/* --- Loading Screen --- */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    font-family: 'Ari9500', cursive;
}

/* Ensure crisp pixel art rendering */
.pixel-art, canvas, img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#loading-content {
    text-align: center;
    color: #fff;
}

#loading-content h1 {
    font-size: var(--font-massive);
    margin-bottom: 2rem;
    color: #4CAF50;
    font-family: 'Ari9500Display';
}

#loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-slot-bg);
    border-top: 4px solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-text {
    font-size: var(--font-header);
    color: #b0aec5;
    margin: 0;
    font-family: 'Ari9500';
}

/* --- NEW: Accessibility Styles --- */
.keyboard-focused {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5) !important;
}

.high-contrast {
    filter: contrast(1.5) saturate(1.5) !important;
}

.high-contrast .window {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.high-contrast button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

.reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

.reduced-motion .shake,
.reduced-motion .bounce,
.reduced-motion .pulse {
    animation: none !important;
    transform: none !important;
}

/* Screen reader only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus management - remove default outlines */
button:focus,
input:focus,
select:focus,
textarea:focus,
.inventory-slot:focus,
*:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Performance optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

:root {
    --pixel-art-scale: 3;
    --ui-bg: rgba(26, 24, 39, 0.92);
    --ui-bg-light: rgba(36, 33, 51, 0.95);
    --ui-border: #45425a;
    --ui-border-glow: rgba(69, 66, 90, 0.35);
    --ui-accent: #6c6895;
    --ui-accent-dim: rgba(108, 104, 149, 0.15);
    --bar-bg: #14131e;
    --settings-icon-filter: sepia(0.6) hue-rotate(225deg) saturate(1.8) brightness(0.95);

    /* Theme-able colors */
    --theme-slot-bg: #232133;
    --theme-hover-bg: #2a283b;
    --theme-btn-top: #343244;
    --theme-btn-bottom: #2a283b;
    --theme-btn-hover-top: #403e5c;
    --theme-btn-hover-bottom: #343244;
    --theme-disabled-bg: #14131e;
    --theme-disabled-text: #55527a;
    --theme-text-dim: #706c88;
    --theme-text-secondary: #a09cb8;
    --theme-text-body: #d0cfe0;
    --theme-text-bright: #d8d6e8;
    --theme-scrollbar-thumb: rgba(108, 104, 149, 0.35);
    --theme-title-top: rgba(52, 50, 83, 0.95);
    --theme-title-bottom: rgba(41, 39, 64, 0.95);
    --theme-window-top: rgba(26, 24, 39, 0.95);
    --theme-window-bottom: rgba(20, 19, 30, 0.97);
    --theme-window-glow: rgba(69, 66, 90, 0.3);
    --theme-window-accent-border: rgba(108, 104, 149, 0.3);
    --theme-gradient-end: rgba(26, 24, 39, 1);

    --hp-color: #c0392b;
    --mp-color: #2980b9;
    --exp-color: #f1c40f;
    --common-color: #ffffff;
    --rare-color: #00aaff;
    --quest-color: #00ff00;
    
    /* Font Size Hierarchy */
    --font-massive: 36px;    /* Main titles, start screen */
    --font-xlarge: 30px;     /* Large headings, critical damage */
    --font-large: 24px;      /* Important UI elements, tooltips */
    --font-header: 20px;     /* Window titles, section headers */
    --font-standard: 16px;   /* Most UI text, buttons, labels */
    --font-medium: 14px;     /* Secondary labels, item details */
    --font-small: 12px;      /* Quantities, minor details only */
    --epic-color: #9b59b6;
    --legendary-color: #f39c12;
    --mythic-color: #00e5cc;
    --prismatic-color: #f0eaff;
    --cosmetic-color: #2ecc71; /* New color for cosmetic items */
    --success-color: #2ecc71;
    --fail-color: #e74c3c;
    --destroy-color: #ff9900;

    /* Status indicator colors */
    --status-good: #2ecc71;
    --status-warning: #f39c12;
    --status-error: #e74c3c;
    --status-info: #3498db;
    --status-offline: #95a5a6;

    /* Social / chat accent colors */
    --guild-color: #9b59b6;
    --guild-color-light: #ce93d8;
    --party-color: #3498db;
    --party-color-light: #81d4fa;
    --buddy-color: #e91e63;
    --buddy-color-light: #f48fb1;

    /* Button danger variant */
    --theme-btn-danger-top: #8b3a3a;
    --theme-btn-danger-bottom: #6b2a2a;
    --theme-btn-danger-hover-top: #a04a4a;
    --theme-btn-danger-hover-bottom: #8b3a3a;

    /* Achievement tier colors */
    --achievement-bronze: #cd7f32;
    --achievement-silver: #c0c0c0;
    --achievement-gold: #ffd700;
    --achievement-diamond: #b9f2ff;
    
    /* Hotbar positioning - used for notifications and prompts */
    --hotbar-bottom: 80px;
    --hotbar-height-keyboard: 65px;  /* hotbar rows + combat identity bar + padding */
    --hotbar-height-gamepad: 65px;
    --hotbar-right: 10px;
    --hotbar-width-keyboard: 460px; /* Approx width of 2-row keyboard hotbar */
    --hotbar-width-gamepad: 480px; /* Approx width of gamepad hotbar */
    /* Gap between elements */
    --ui-gap: 25px;
    --above-hotbar-keyboard: calc(var(--hotbar-bottom) + var(--hotbar-height-keyboard) + var(--ui-gap));
    --above-hotbar-gamepad: calc(var(--hotbar-bottom) + var(--hotbar-height-gamepad) + var(--ui-gap));
    /* Position to the left of hotbar: right edge + hotbar width + gap */
    --left-of-hotbar-keyboard: calc(var(--hotbar-right) + var(--hotbar-width-keyboard) + var(--ui-gap));
    --left-of-hotbar-gamepad: calc(var(--hotbar-right) + var(--hotbar-width-gamepad) + var(--ui-gap));
}

/* =============================================
   THEME: Ocean Depths (Blue)
   ============================================= */
html[data-theme="ocean"] {
    --ui-bg: rgba(15, 24, 36, 0.92);
    --ui-bg-light: rgba(23, 35, 49, 0.95);
    --ui-border: #3a5068;
    --ui-border-glow: rgba(58, 80, 104, 0.35);
    --ui-accent: #5588aa;
    --ui-accent-dim: rgba(85, 136, 170, 0.15);
    --bar-bg: #0b141e;
    --settings-icon-filter: sepia(0.6) hue-rotate(185deg) saturate(1.8) brightness(0.95);
    --theme-slot-bg: #172332;
    --theme-hover-bg: #202f40;
    --theme-btn-top: #2c3c4e;
    --theme-btn-bottom: #202f40;
    --theme-btn-hover-top: #384e60;
    --theme-btn-hover-bottom: #2c3c4e;
    --theme-disabled-bg: #0b141e;
    --theme-disabled-text: #3a5068;
    --theme-text-dim: #5a7a95;
    --theme-text-secondary: #88aac0;
    --theme-text-body: #c0d4e4;
    --theme-text-bright: #d8e8f0;
    --theme-scrollbar-thumb: rgba(85, 136, 170, 0.35);
    --theme-title-top: rgba(38, 56, 79, 0.95);
    --theme-title-bottom: rgba(26, 41, 60, 0.95);
    --theme-window-top: rgba(15, 24, 36, 0.95);
    --theme-window-bottom: rgba(11, 18, 27, 0.97);
    --theme-window-glow: rgba(58, 80, 104, 0.3);
    --theme-window-accent-border: rgba(85, 136, 170, 0.3);
    --theme-gradient-end: rgba(15, 24, 36, 1);
}

/* =============================================
   THEME: Emerald Shadow (Green)
   ============================================= */
html[data-theme="emerald"] {
    --ui-bg: rgba(17, 29, 23, 0.92);
    --ui-bg-light: rgba(26, 41, 33, 0.95);
    --ui-border: #3a5846;
    --ui-border-glow: rgba(58, 88, 70, 0.35);
    --ui-accent: #5a9a70;
    --ui-accent-dim: rgba(90, 154, 112, 0.15);
    --bar-bg: #0c1711;
    --settings-icon-filter: sepia(0.6) hue-rotate(105deg) saturate(1.8) brightness(0.95);
    --theme-slot-bg: #172a1e;
    --theme-hover-bg: #20382a;
    --theme-btn-top: #2c4235;
    --theme-btn-bottom: #20382a;
    --theme-btn-hover-top: #385442;
    --theme-btn-hover-bottom: #2c4235;
    --theme-disabled-bg: #0c1711;
    --theme-disabled-text: #3a5846;
    --theme-text-dim: #5a8868;
    --theme-text-secondary: #88b898;
    --theme-text-body: #c0dcc8;
    --theme-text-bright: #d8ece0;
    --theme-scrollbar-thumb: rgba(90, 154, 112, 0.35);
    --theme-title-top: rgba(38, 64, 47, 0.95);
    --theme-title-bottom: rgba(29, 51, 38, 0.95);
    --theme-window-top: rgba(17, 29, 23, 0.95);
    --theme-window-bottom: rgba(11, 21, 15, 0.97);
    --theme-window-glow: rgba(58, 88, 70, 0.3);
    --theme-window-accent-border: rgba(90, 154, 112, 0.3);
    --theme-gradient-end: rgba(17, 29, 23, 1);
}

/* =============================================
   THEME: Volcanic Ember (Warm/Amber)
   ============================================= */
html[data-theme="ember"] {
    --ui-bg: rgba(33, 23, 17, 0.92);
    --ui-bg-light: rgba(47, 33, 24, 0.95);
    --ui-border: #685038;
    --ui-border-glow: rgba(104, 80, 56, 0.35);
    --ui-accent: #aa7744;
    --ui-accent-dim: rgba(170, 119, 68, 0.15);
    --bar-bg: #170f09;
    --settings-icon-filter: sepia(0.6) hue-rotate(10deg) saturate(2.0) brightness(0.95);
    --theme-slot-bg: #2c2017;
    --theme-hover-bg: #382a1e;
    --theme-btn-top: #4e3c2a;
    --theme-btn-bottom: #382a1e;
    --theme-btn-hover-top: #604e36;
    --theme-btn-hover-bottom: #4e3c2a;
    --theme-disabled-bg: #170f09;
    --theme-disabled-text: #685038;
    --theme-text-dim: #8a7058;
    --theme-text-secondary: #b8a088;
    --theme-text-body: #dcd0c0;
    --theme-text-bright: #ece4d8;
    --theme-scrollbar-thumb: rgba(170, 119, 68, 0.35);
    --theme-title-top: rgba(68, 51, 34, 0.95);
    --theme-title-bottom: rgba(53, 39, 26, 0.95);
    --theme-window-top: rgba(33, 23, 17, 0.95);
    --theme-window-bottom: rgba(23, 15, 11, 0.97);
    --theme-window-glow: rgba(104, 80, 56, 0.3);
    --theme-window-accent-border: rgba(170, 119, 68, 0.3);
    --theme-gradient-end: rgba(33, 23, 17, 1);
}

/* =============================================
   THEME: Onyx Shadows (very dark)
   ============================================= */
html[data-theme="onyx"] {
    --ui-bg: rgba(14, 13, 22, 0.92);
    --ui-bg-light: rgba(20, 18, 29, 0.95);
    --ui-border: #262432;
    --ui-border-glow: rgba(40, 38, 60, 0.35);
    --ui-accent: #43405c;
    --ui-accent-dim: rgba(67, 64, 92, 0.15);
    --bar-bg: #0b0b11;
    --theme-slot-bg: #13121d;
    --theme-hover-bg: #181621;
    --theme-btn-top: #1d1c26;
    --theme-btn-bottom: #181621;
    --theme-btn-hover-top: #242233;
    --theme-btn-hover-bottom: #1d1c26;
    --theme-disabled-bg: #0b0b11;
    --theme-title-top: rgba(29, 28, 46, 0.95);
    --theme-title-bottom: rgba(23, 22, 36, 0.95);
    --theme-window-top: rgba(14, 13, 22, 0.95);
    --theme-window-bottom: rgba(11, 11, 17, 0.97);
    --theme-window-glow: rgba(40, 38, 60, 0.3);
    --theme-window-accent-border: rgba(67, 64, 92, 0.3);
    --theme-gradient-end: rgba(14, 13, 22, 1);
}

/* =============================================
   THEME: Royal Gold (gachapon-exclusive, Theme Capsule unlock)
   ============================================= */
html[data-theme="gold"] {
    --ui-bg: rgba(32, 26, 12, 0.92);
    --ui-bg-light: rgba(45, 37, 18, 0.95);
    --ui-border: #6e5a28;
    --ui-border-glow: rgba(110, 90, 40, 0.4);
    --ui-accent: #c8a038;
    --ui-accent-dim: rgba(200, 160, 56, 0.15);
    --bar-bg: #161107;
    --settings-icon-filter: sepia(0.8) hue-rotate(5deg) saturate(2.2) brightness(1.05);
    --theme-slot-bg: #2a2210;
    --theme-hover-bg: #382e16;
    --theme-btn-top: #4e421e;
    --theme-btn-bottom: #382e16;
    --theme-btn-hover-top: #605226;
    --theme-btn-hover-bottom: #4e421e;
    --theme-disabled-bg: #161107;
    --theme-disabled-text: #6e5a28;
    --theme-text-dim: #948050;
    --theme-text-secondary: #c0aa78;
    --theme-text-body: #e4d8b8;
    --theme-text-bright: #f2ead0;
    --theme-scrollbar-thumb: rgba(200, 160, 56, 0.35);
    --theme-title-top: rgba(66, 54, 24, 0.95);
    --theme-title-bottom: rgba(51, 42, 19, 0.95);
    --theme-window-top: rgba(32, 26, 12, 0.95);
    --theme-window-bottom: rgba(22, 18, 8, 0.97);
    --theme-window-glow: rgba(110, 90, 40, 0.35);
    --theme-window-accent-border: rgba(200, 160, 56, 0.35);
    --theme-gradient-end: rgba(32, 26, 12, 1);
}

/* =============================================
   THEME: Rose Quartz (gachapon-exclusive, Theme Capsule unlock)
   ============================================= */
html[data-theme="rose"] {
    --ui-bg: rgba(32, 17, 26, 0.92);
    --ui-bg-light: rgba(45, 24, 36, 0.95);
    --ui-border: #6e3a54;
    --ui-border-glow: rgba(110, 58, 84, 0.4);
    --ui-accent: #c8709c;
    --ui-accent-dim: rgba(200, 112, 156, 0.15);
    --bar-bg: #170a11;
    --settings-icon-filter: sepia(0.7) hue-rotate(295deg) saturate(2) brightness(1.0);
    --theme-slot-bg: #2a1521;
    --theme-hover-bg: #381d2c;
    --theme-btn-top: #4e2a3d;
    --theme-btn-bottom: #381d2c;
    --theme-btn-hover-top: #60364c;
    --theme-btn-hover-bottom: #4e2a3d;
    --theme-disabled-bg: #170a11;
    --theme-disabled-text: #6e3a54;
    --theme-text-dim: #94587a;
    --theme-text-secondary: #c088a8;
    --theme-text-body: #e4c0d4;
    --theme-text-bright: #f2dce8;
    --theme-scrollbar-thumb: rgba(200, 112, 156, 0.35);
    --theme-title-top: rgba(66, 32, 50, 0.95);
    --theme-title-bottom: rgba(51, 24, 38, 0.95);
    --theme-window-top: rgba(32, 17, 26, 0.95);
    --theme-window-bottom: rgba(22, 11, 17, 0.97);
    --theme-window-glow: rgba(110, 58, 84, 0.35);
    --theme-window-accent-border: rgba(200, 112, 156, 0.35);
    --theme-gradient-end: rgba(32, 17, 26, 1);
}

/* =============================================
   THEME: Glacier (gachapon-exclusive, Theme Capsule unlock)
   ============================================= */
html[data-theme="glacier"] {
    --ui-bg: rgba(12, 24, 32, 0.92);
    --ui-bg-light: rgba(18, 34, 44, 0.95);
    --ui-border: #33586e;
    --ui-border-glow: rgba(51, 88, 110, 0.4);
    --ui-accent: #74aac8;
    --ui-accent-dim: rgba(116, 170, 200, 0.15);
    --bar-bg: #081117;
    --settings-icon-filter: sepia(0.6) hue-rotate(165deg) saturate(2) brightness(1.05);
    --theme-slot-bg: #122430;
    --theme-hover-bg: #1a3040;
    --theme-btn-top: #274357;
    --theme-btn-bottom: #1a3040;
    --theme-btn-hover-top: #325369;
    --theme-btn-hover-bottom: #274357;
    --theme-disabled-bg: #081117;
    --theme-disabled-text: #33586e;
    --theme-text-dim: #5a8aa8;
    --theme-text-secondary: #8ab8d4;
    --theme-text-body: #c4dcec;
    --theme-text-bright: #dcecf6;
    --theme-scrollbar-thumb: rgba(116, 170, 200, 0.35);
    --theme-title-top: rgba(30, 56, 74, 0.95);
    --theme-title-bottom: rgba(22, 43, 58, 0.95);
    --theme-window-top: rgba(12, 24, 32, 0.95);
    --theme-window-bottom: rgba(8, 17, 23, 0.97);
    --theme-window-glow: rgba(51, 88, 110, 0.35);
    --theme-window-accent-border: rgba(116, 170, 200, 0.35);
    --theme-gradient-end: rgba(12, 24, 32, 1);
}

/*debug*/

.debug-hitbox {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.3); /* Semi-transparent red */
    border: 1px solid #ff0000;
    z-index: 1000; /* Increased z-index to draw on top of the player SVG */
    pointer-events: none; /* So they don't interfere with mouse clicks */
    box-sizing: border-box;
    display: none; /* Hidden by default */
}

.debug-hitbox-ladder {
    background-color: rgba(0, 0, 255, 0.3);
    /* Semi-transparent blue */
    border: 1px solid #0000ff;
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'Ari9500', cursive, sans-serif;
    display: flex; /* ADDED */
    justify-content: center; /* ADDED */
    align-items: center; /* ADDED */
    height: 100vh;
    margin: 0;
    overflow: hidden;
    user-select: none;
}

#game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: #000000;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* Fill the full viewport — let the scale factor handle aspect ratio */
    width: 100%;
    height: 100%;
}

#scaling-container {
    /* The layout box is ALWAYS exactly 1366x768 — updateGameScale()'s transform
       does all the fitting, and body + #game-container overflow:hidden clip.
       It used to carry max-width:100vw / max-height:100vh, which shrank the
       layout box on small windows while the pre-game scene canvases stayed a
       fixed 1366x768: everything bottom-anchored to this box (hero preview,
       menu snail, sky art) slid off the drawn ground as the window resized,
       and the game rendered smaller than needed (clamp + transform both
       shrinking). Do not re-add viewport clamps here. */
    width: 1366px; /* Target design width */
    height: 768px; /* Target design height */
    flex: none; /* flex item of #game-container — default flex-shrink:1 re-clamps the width */
    position: relative;
    transform-origin: center center;
    background-color: transparent;
    transition: transform 0.2s ease-out;
    margin: 0;
    overflow: hidden;
}

/* Windows overlay: renders game windows above the UI bar (chat/HP) but
   uses the same 1366×768 coordinate space as the scaling-container so
   drag positions, offsets, etc. remain identical. */
#windows-overlay {
    position: absolute;
    width: 1366px;
    height: 768px;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    pointer-events: none;
    z-index: 200; /* above #ui-container (100) */
    transition: transform 0.2s ease-out;
}

#windows-overlay .window {
    pointer-events: auto;
}

#windows-overlay * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* --- Responsive Design Enhancements --- */
body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrollbars */
    background-color: #000;
}

html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in input fields */
input[type="text"],
textarea,
input[type="number"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Ensure anything marked as draggable can actually be dragged */
[draggable="true"] {
    -webkit-user-drag: element;
    user-select: auto;
}

/* Allow text selection in input fields */
input[type="text"], textarea, input[type="number"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* --- Start Screen --- */
#start-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a5f99 0%, #3498db 100%);
    z-index: 1000;
    display: none; /* Hidden initially, shown after loading */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--theme-text-body);
    overflow: hidden;
}

#start-screen h1 {
    font-size: var(--font-massive);
    color: var(--exp-color);
    text-shadow: 3px 3px #000;
    font-family: 'Ari9500Display';
}

/* Title Card Image */
.title-card-container {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.title-card {
    image-rendering: pixelated;
    width: 512px;
    height: 128px;
}

.version-number {
    position: absolute;
    top: 15px;
    right: -15px;
    font-family: 'Ari9500';
    font-size: var(--font-large);
    color: var(--exp-color);
    text-shadow: 1px 1px 2px #000;
    transform: rotate(10deg);
}

.playtest-banner {
    font-family: 'Ari9500';
    font-size: var(--font-header);
    color: var(--exp-color);
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 16px;
    letter-spacing: 1px;
    animation: playtest-pulse 2s ease-in-out infinite;
}

@keyframes playtest-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* (Generic #start-screen button rules removed — start screen now uses the styled .press-key prompt) */
/* Polished Input and Select Fields */
#character-name {
    grid-column: 1 / -1; /* Make these span both columns */
    width: 100%;
    padding: 10px;
    margin: 0;
    background-color: var(--bar-bg);
    border: 1px solid var(--ui-border);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    box-sizing: border-box;
}

/* Removed resolution-select styles as requested */

#game-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none; /* Hidden until game loads */
}

/* ── Screen-space visual FX overlays (see visual-effects.js) ──────────────── */
/* These sit above the scrolling #world-content (inside the screen-fixed
   #game-world) so they grade the game scene without touching the UI windows. */
.fx-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50; /* above all in-world content; UI windows are outside #game-world */
    /* Promote to its own GPU layer so the compositor blends it directly each frame
       instead of re-rasterizing — keeps the full-screen overlay cheap on high-Hz displays. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* ── Day/night tint + stars live inside #world-content (world-space, z-index 1)
   so they're behind platforms (z-4), the ground gradient (z-3), and all sprites.
   Styles are set inline by visual-effects.js; only the twinkle animations live here. ── */
.fx-star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
    will-change: opacity;
}
.fx-star-far  { animation: fx-twinkle-b 6.8s ease-in-out infinite; }
.fx-star-near { width: 2px; height: 2px; animation: fx-twinkle-a 4.5s ease-in-out infinite; }
@keyframes fx-twinkle-a { 0%, 100% { opacity: 1; }   50% { opacity: 0.42; } }
@keyframes fx-twinkle-b { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.28; } }

/* Title-screen wandering snail — cycles its 3-frame sprite sheet as it crawls. */
@keyframes menu-snail-walk {
    from { background-position-x: 0; }
    to   { background-position-x: calc(-1 * var(--snail-w, 144px)); }
}

/* Title-screen celestial parallax — gentle drift so the sky feels alive even
   though the menu camera is static. Stars (farthest) drift least & slowest;
   sun/moon a touch more. Applied to inner <img> so the wrapper keeps its
   time-of-day left/top positioning. */
/* Title screen has a static camera — no parallax drift on celestial bodies. */

/* Cinematic vignette stays screen-fixed in #game-world (correct for a vignette). */
#fx-vignette {
    z-index: 52;
    opacity: 0;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.35) 78%,
        rgba(0, 0, 0, 0.78) 100%);
    transition: opacity 1.5s linear;
}
/* ── Announcement Banner ── */
#announcement-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    overflow: hidden;
    z-index: 160;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    line-height: 20px;
}
#announcement-banner-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    font-family: 'Ari9500';
    font-size: var(--font-small);
    color: rgba(255, 255, 255, 0.7);
    animation: scroll-banner 40s linear infinite;
}
@keyframes scroll-banner {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ── Community Goal widget (playtest event) ──
   Top-center, skinned with the same x2 window frame as the boss/elite HP bars
   (#mini-boss-hp-bar) so it reads as the same UI. It's the topmost persistent
   HUD element: boss/elite bars drop below it when it's visible (see the
   body.community-goal-visible rules near #mini-boss-hp-bar) so they never
   overlap it, and it drops below the PQ/dojo tracker when that's up. */
#community-goal-widget {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 152; /* above the boss/elite bars (150/149) */
    pointer-events: none;
    text-align: center;
    background: var(--px-window-bg);
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window);
    padding: 3px 16px;
    min-width: 300px;
    max-width: 420px;
}
/* Sits below the PQ/dojo tracker (top-center) when that's up, mirroring how the
   boss bars already move for it, so the two don't overlap. */
body.pq-tracker-visible #community-goal-widget {
    top: 104px;
}
#community-goal-label {
    font-family: 'Ari9500';
    font-size: var(--font-small);
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 3px;
}
#community-goal-track {
    width: 100%;
    height: 6px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
#community-goal-fill {
    width: 0%;
    height: 100%;
    background: var(--exp-color);
    transition: width 0.6s ease;
}

/* ── Starter checklist (new-player golden path) ──
   Left column, stacked under the minimap / party overlay (top is set
   dynamically by updateStarterChecklist so it never overlaps them).
   Skinned exactly like a standard .window: x2 frame, border 12,
   title strip at border 6 — same pixel density as inventory/equipment. */
#starter-checklist {
    position: absolute;
    top: 232px; /* fallback; updateStarterChecklist stacks it below minimap/party */
    left: 10px;
    width: 200px;
    z-index: 140; /* under UI windows, over the game world */
    font-family: 'Ari9500';
    font-size: var(--font-small);
    color: var(--theme-text-primary, #fff);
    background: var(--px-window-bg);
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window);
}
#starter-checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 8px;
    background: var(--px-title-bg);
    border: 6px solid transparent;
    border-image: var(--px-frame-title) 6 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-slot);
    color: var(--exp-color);
    cursor: var(--cursor-pointer, pointer);
    user-select: none;
}
#starter-checklist-toggle { opacity: 0.75; padding: 0 2px; }
#starter-checklist-body { padding: 5px 4px 2px; }
.starter-step { display: flex; gap: 6px; align-items: baseline; line-height: 1.5; }
.starter-step .step-mark { width: 12px; text-align: center; }
.starter-step.done { color: rgba(140, 220, 140, 0.85); }
.starter-step.done .step-label { text-decoration: line-through; opacity: 0.75; }
.starter-step.current { color: #fff; }
.starter-step.current .step-mark { color: var(--exp-color); }
.starter-step.locked { opacity: 0.45; }
.starter-step .step-count { margin-left: auto; opacity: 0.8; }
#starter-checklist-hint {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--exp-color);
}

#game-clock {
    position: absolute;
    top: 25px;
    right: 10px;
    z-index: 150;
    /* Above the game world but below UI windows */
    color: var(--exp-color);
    /* Gold color */
    font-family: 'Ari9500';
    font-weight: bold;
    font-size: var(--font-large);
    padding: 8px 10px;
    text-shadow: 1px 1px 2px #000;
}

/* Stats Overlay - Shows FPS, Ping, etc. */
#stats-overlay {
    position: absolute;
    top: 80px;
    right: 10px;
    z-index: 150;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-small);
    color: var(--theme-text-body);
    min-width: 155px;
    pointer-events: none;
    user-select: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

#stats-overlay-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#stats-overlay .stat-section-header {
    color: #888;
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: 2px;
    margin-bottom: 1px;
}

#stats-overlay .stat-divider {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin: 3px 0;
}

#stats-overlay .stat-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.3;
}

#stats-overlay .stat-label {
    color: var(--theme-text-secondary);
}

#stats-overlay #stats-fps {
    color: var(--success-color);
}

#stats-overlay #stats-ping {
    color: var(--mp-color);
}

#stats-overlay #stats-players {
    color: var(--destroy-color);
}

#stats-overlay #stats-monsters {
    color: var(--fail-color);
}

#stats-overlay #stats-map {
    color: var(--exp-color);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#stats-overlay .subsystem-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    line-height: 1.3;
}

#stats-overlay .subsystem-name {
    color: #aaa;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#stats-overlay .subsystem-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
    min-width: 30px;
}

#stats-overlay .subsystem-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

#stats-overlay .subsystem-ms {
    color: #ccc;
    min-width: 30px;
    text-align: right;
}

#stats-fps-graph-container {
    margin-top: 4px;
}

#stats-fps-graph {
    width: 100%;
    height: 40px;
    border-radius: 2px;
    background: rgba(255,255,255,0.04);
    image-rendering: pixelated;
}

#chat-log-container {
    position: absolute;
    bottom: calc(100% + 2px); /* Small gap prevents backdrop-filter blur bleeding into UI bar */
    left: 0;
    width: 30%;
    height: 150px;
    background-color: rgba(20, 18, 30, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    box-sizing: border-box;
    padding: 5px;
    padding-top: 8px; /* Extra padding for resize handle */
    transition: bottom 0.15s ease-out;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1; /* Layer behind game windows */
}

#chat-log-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: var(--cursor-resize, ns-resize);
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#chat-log-resize-handle:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, transparent 100%);
}

#chat-log-resize-handle-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: var(--cursor-resize, ew-resize);
    background: linear-gradient(to left, rgba(255,255,255,0.15) 0%, transparent 100%);
}

#chat-log-resize-handle-right:hover {
    background: linear-gradient(to left, rgba(255,255,255,0.3) 0%, transparent 100%);
}

#chat-log-resize-handle-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: var(--cursor-resize, nesw-resize);
    z-index: 1;
}

#chat-log-container.chat-active {
    bottom: calc(100% + 36px); /* Push up when chat input is visible */
}

#chat-log-container.collapsed {
    height: 35px; /* Enough height to show full last line of chat messages */
}

#chat-log {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    font-size: var(--font-standard);
    line-height: 1.2;
    cursor: var(--cursor-resize, grab);
    user-select: none;
    pointer-events: auto;
    font-family: 'Ari9500';
    /* ADDED: Explicitly allow mouse events on the log itself */
}

.chat-log-message {
    padding: 2px 4px;
    color: white;
    /* Default chat color */
}

/* Colors for different message types */
.chat-log--system {
    color: var(--theme-text-secondary);
}

.chat-log--success {
    color: var(--success-color);
}

.chat-log--fail {
    color: var(--fail-color);
}

.chat-log--destroyed {
    color: var(--destroy-color);
    font-weight: bold;
}

.chat-log--rare {
    color: var(--rare-color);
}

.chat-log--epic {
    color: var(--epic-color);
}

.chat-log--legendary {
    color: var(--legendary-color);
}

.chat-log--mythic {
    color: var(--mythic-color);
}

.chat-log--prismatic {
    color: var(--prismatic-color);
    text-shadow: 0 0 8px rgba(240, 234, 255, 0.6);
    animation: prismaticText 2s ease-in-out infinite;
}

.chat-log--player-join {
    color: #4ade80;
    font-style: italic;
    background: rgba(74, 222, 128, 0.15);
    border-left: 3px solid #4ade80;
    padding-left: 5px;
    margin-left: -5px;
}

.chat-log--player-leave {
    color: #f87171;
    font-style: italic;
    background: rgba(248, 113, 113, 0.15);
    border-left: 3px solid #f87171;
    padding-left: 5px;
    margin-left: -5px;
}

.chat-log--party {
    color: #5dade2;
    font-style: italic;
    background: rgba(93, 173, 226, 0.15);
    border-left: 3px solid #5dade2;
    padding-left: 5px;
    margin-left: -5px;
}

.chat-log--boss {
    color: var(--destroy-color);
    font-weight: bold;
}

.chat-log--ghost {
    color: #aaaaff;
}

.chat-log--global {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.1) 0%, transparent 100%);
    padding: 2px 4px;
    border-radius: 2px;
    margin: 1px 0;
}

.chat-log--discord {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.12) 0%, transparent 100%);
    border-left: 2px solid #5865F2;
    padding-left: 6px;
}

.chat-log--buddy {
    color: #f48fb1;
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.15) 0%, transparent 100%);
    padding: 2px 4px;
    border-radius: 2px;
    margin: 1px 0;
    border-left: 2px solid #e91e63;
    padding-left: 6px;
}

.chat-log--guild {
    color: #ce93d8;
    background: linear-gradient(90deg, rgba(155, 89, 182, 0.15) 0%, transparent 100%);
    padding: 2px 4px;
    border-radius: 2px;
    margin: 1px 0;
    border-left: 2px solid #9b59b6;
    padding-left: 6px;
}

.chat-log--party-chat {
    color: #81d4fa;
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.15) 0%, transparent 100%);
    padding: 2px 4px;
    border-radius: 2px;
    margin: 1px 0;
    border-left: 2px solid #3498db;
    padding-left: 6px;
}

.chat-log--announcement {
    color: #ffd700;
    font-weight: bold;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.1) 50%, transparent 100%);
    padding: 3px 6px;
    border-radius: 3px;
    margin: 2px 0;
    border-left: 3px solid #ffd700;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.chat-log--announcement-mythic {
    color: var(--mythic-color);
    font-weight: bold;
    background: linear-gradient(90deg, rgba(0, 229, 204, 0.2) 0%, rgba(0, 229, 204, 0.08) 50%, transparent 100%);
    padding: 3px 6px;
    border-radius: 3px;
    margin: 2px 0;
    border-left: 3px solid var(--mythic-color);
    text-shadow: 0 0 4px rgba(0, 229, 204, 0.5);
}

.chat-log--announcement-prismatic {
    color: var(--prismatic-color);
    font-weight: bold;
    background: linear-gradient(90deg, rgba(240, 234, 255, 0.2) 0%, rgba(200, 180, 255, 0.1) 50%, transparent 100%);
    padding: 3px 6px;
    border-radius: 3px;
    margin: 2px 0;
    border-left: 3px solid var(--prismatic-color);
    text-shadow: 0 0 6px rgba(240, 234, 255, 0.5);
    animation: prismaticText 2s ease-in-out infinite;
}

/* Trade Window Styling */
#trade-window .window-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trade-header {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.trade-panels {
    display: flex;
    gap: 10px;
}

.trade-panel {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.trade-confirmed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.trade-confirmed-overlay span {
    color: #27ae60;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(39, 174, 96, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
}

.trade-panel-title {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.trade-items-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    min-height: 100px;
}

.trade-slot {
    width: 45px;
    height: 45px;
}

.trade-gold-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-gold-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trade-coin-icon-wrapper {
    display: inline-block;
    width: 14px;
    height: 14px;
    overflow: hidden;
    vertical-align: middle;
    image-rendering: pixelated;
}

.trade-coin-img {
    display: block;
    width: 56px;
    height: 14px;
    margin-left: 0;
    image-rendering: pixelated;
}

.trade-gold-row input {
    width: 100px;
    padding: 5px;
    background: var(--ui-bg);
    border: 1px solid rgba(69, 66, 90, 0.3);
    color: white;
    border-radius: 3px;
}

.trade-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trade-footer .btn {
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    cursor: var(--cursor-pointer, pointer);
    font-size: 13px;
}

.trade-footer .btn-success {
    background: #27ae60;
    color: white;
}

.trade-footer .btn-success:hover {
    background: #2ecc71;
}

.trade-footer .btn-danger {
    background: #c0392b;
    color: white;
}

.trade-footer .btn-danger:hover {
    background: #e74c3c;
}

/* Trade Item Selector Grid */
.trade-selector-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    max-height: 250px;
    overflow-y: auto;
}

/* Online Players Styling */
.online-player-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background 0.2s;
}

.online-player-entry:hover {
    background: rgba(0, 0, 0, 0.5);
}

.online-player-entry.afk {
    opacity: 0.7;
}

.afk-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 165, 0, 0.3);
    color: #ffa500;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 8px;
}

.online-player-info {
    display: flex;
    flex-direction: column;
}

.online-player-name {
    font-weight: bold;
    color: #fff;
}

.online-player-details {
    font-size: 0.85em;
    color: var(--theme-text-secondary);
}

.online-player-map {
    font-size: 0.85em;
    color: var(--theme-text-dim);
}

.trade-btn {
    padding: 5px 10px;
    background: var(--ui-accent);
    border: none;
    border-radius: 3px;
    color: #111020;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.85em;
}

.trade-btn:hover {
    background: #2980b9;
}

/* Party Invite Button */
.party-invite-btn {
    padding: 5px 10px;
    background: #27ae60;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.85em;
    margin-right: 5px;
}

.party-invite-btn:hover {
    background: #229954;
}

/* Online Player Buttons Container */
.online-player-buttons {
    display: flex;
    align-items: center;
}

/* ============================================
   SOCIAL HUB STYLES
   ============================================ */

/* Social Hub Tabs - Uses global tab styling */
.social-hub-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}

/* Social Tab Content */
.social-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    padding-bottom: 15px;
    flex-direction: column;
    min-height: 0;
}

.social-tab-content.active {
    display: flex;
}

/* Buddy List Styles */
.buddy-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background 0.2s;
}

.buddy-entry:hover {
    background: rgba(0, 0, 0, 0.5);
}

.buddy-entry.offline {
    opacity: 0.6;
}

.buddy-info {
    display: flex;
    flex-direction: column;
}

.buddy-name {
    font-weight: bold;
    color: #fff;
}

.buddy-status {
    font-size: 0.85em;
    color: var(--theme-text-dim);
}

.buddy-status.online {
    color: #2ecc71;
}

.buddy-buttons {
    display: flex;
    gap: 5px;
}

.add-buddy-btn, .remove-buddy-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.85em;
}

.add-buddy-btn {
    background: #27ae60;
}

.add-buddy-btn:hover {
    background: #229954;
}

.remove-buddy-btn {
    background: #e74c3c;
}

.remove-buddy-btn:hover {
    background: #c0392b;
}

/* ============================================
   PLAYER INSPECTION STYLES
   ============================================ */
#player-inspect-window .window-content {
    padding: 15px;
}

.inspect-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(108, 104, 149, 0.1);
    border: 1px solid rgba(69, 66, 90, 0.3);
    border-radius: 8px;
    margin-bottom: 15px;
    position: relative;
}

.inspect-status-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1.2em;
}

.inspect-avatar {
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    overflow: hidden;
}

.inspect-avatar canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.inspect-basic-info {
    flex: 1;
}

.inspect-name {
    font-size: 1.3em;
    color: var(--ui-accent);
    margin-bottom: 5px;
}

.inspect-name .player-title {
    font-size: 0.7em;
    color: #f1c40f;
    margin-left: 8px;
}

.inspect-class {
    font-size: 0.95em;
    color: var(--theme-text-secondary);
}

.inspect-guild {
    font-size: 0.85em;
    color: #9b59b6;
    margin-top: 3px;
}

.inspect-section {
    margin-bottom: 15px;
}

.inspect-section h4 {
    color: #f1c40f;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Downed/Rescue System UI */
#downed-ui {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.95), rgba(120, 30, 30, 0.95));
    padding: 25px 40px;
    border-radius: 12px;
    border: 3px solid #e74c3c;
    box-shadow: 0 0 40px rgba(231, 76, 60, 0.8), 0 8px 30px rgba(0, 0, 0, 0.8);
    text-align: center;
    animation: downedPulse 1s ease-in-out infinite;
}

@keyframes downedPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(231, 76, 60, 0.8), 0 8px 30px rgba(0, 0, 0, 0.8); }
    50% { box-shadow: 0 0 60px rgba(231, 76, 60, 1), 0 8px 30px rgba(0, 0, 0, 0.8); }
}

.downed-header {
    font-family: 'Ari9500', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px #000;
    margin-bottom: 10px;
}

.downed-subtext {
    font-size: 14px;
    color: var(--theme-text-bright);
    margin-bottom: 15px;
}

.downed-timer-container {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.downed-timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #f39c12);
    transition: width 0.1s linear;
    width: 100%;
}

.downed-timer-text {
    font-size: 12px;
    color: var(--theme-text-secondary);
}

/* Rescue Progress UI */
#rescue-progress-ui {
    position: fixed;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(46, 204, 113, 0.9);
    padding: 12px 25px;
    border-radius: 8px;
    border: 2px solid #27ae60;
    text-align: center;
}

.rescue-progress-text {
    font-family: 'Ari9500', sans-serif;
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px;
}

.rescue-progress-bar-container {
    width: 200px;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.rescue-progress-bar {
    height: 100%;
    background: #fff;
    width: 0%;
}

/* Downed Player Indicator on other players */
.downed-player-indicator {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(231, 76, 60, 0.9);
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    cursor: var(--cursor-pointer, pointer);
    animation: downedIndicatorPulse 1s ease-in-out infinite;
}

@keyframes downedIndicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.downed-give-up-btn {
    margin-top: 15px;
    background: linear-gradient(135deg, var(--theme-text-dim), var(--theme-btn-hover-top));
    border: 2px solid var(--ui-accent);
    color: #fff;
    padding: 10px 25px;
    border-radius: 6px;
    font-family: 'Ari9500', sans-serif;
    font-size: 12px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
}

.downed-give-up-btn:hover {
    background: linear-gradient(135deg, var(--theme-text-secondary), var(--theme-text-dim));
}

/* Mailbox UI */
.mailbox-gifts-list {
    max-height: 300px;
    overflow-y: auto;
}

.mailbox-gift-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-bottom: 8px;
}

.mailbox-gift-icon {
    font-size: 28px;
    width: 40px;
    text-align: center;
}

.mailbox-gift-info {
    flex: 1;
}

.mailbox-gift-from {
    font-size: 0.85em;
    color: var(--theme-text-secondary);
}

.mailbox-gift-item {
    font-weight: bold;
    color: #fff;
}

.mailbox-gift-gold {
    color: #f1c40f;
    font-size: 0.85em;
}

.mailbox-gift-message {
    font-style: italic;
    color: #9b59b6;
    font-size: 0.8em;
    margin-top: 4px;
}

.mailbox-claim-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border: none;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    font-family: inherit;
    transition: all 0.2s;
}

.mailbox-claim-btn:hover {
    transform: scale(1.05);
}

/* Gift buddy selection */
.gift-buddy-list {
    max-height: 200px;
    overflow-y: auto;
}

.gift-buddy-entry {
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
}

.gift-buddy-entry:hover {
    background: rgba(155, 89, 182, 0.3);
    border-left: 3px solid #9b59b6;
}

.gift-buddy-name {
    color: #fff;
    font-weight: bold;
}

.inspect-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.inspect-stat {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.inspect-stat-label {
    color: var(--theme-text-dim);
}

.inspect-stat-value {
    color: var(--theme-text-bright);
    font-weight: bold;
}

.inspect-equipment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.inspect-equip-slot {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.inspect-equip-slot.empty {
    opacity: 0.5;
}

.inspect-equip-slot img {
    max-width: 40px;
    max-height: 40px;
}

.inspect-equip-slot .slot-label {
    position: absolute;
    bottom: -15px;
    font-size: 0.65em;
    color: var(--theme-text-dim);
    white-space: nowrap;
}

/* Gear Inspect Window */
/* Gear inspect list layout */
.gear-inspect-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
}

.gear-inspect-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 4px;
    /* Hovering shows a highlight + item tooltip (inspecting another player's
       gear), so the custom hand cursor is correct — plain "default" here
       reverted to the browser's native arrow instead of the game's pixel one. */
    cursor: var(--cursor-pointer, pointer);
    transition: background 0.15s;
}

.gear-inspect-row:hover {
    background-color: var(--theme-hover-bg);
}

.gear-inspect-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background-color: var(--theme-slot-bg);
    border: 1px solid var(--theme-text-dim);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.gear-inspect-icon.rare { box-shadow: inset 0 0 5px 2px var(--rare-color); }
.gear-inspect-icon.epic { box-shadow: inset 0 0 5px 2px var(--epic-color); }
.gear-inspect-icon.legendary { box-shadow: inset 0 0 5px 2px var(--legendary-color); }
.gear-inspect-icon.mythic { box-shadow: inset 0 0 6px 3px var(--mythic-color); }
.gear-inspect-icon.prismatic { box-shadow: inset 0 0 8px 3px var(--prismatic-color); animation: prismaticGlow 2s ease-in-out infinite; }

.gear-inspect-name {
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gear-inspect-enh {
    color: #2ecc71;
    font-weight: bold;
}

.gear-inspect-empty {
    text-align: center;
    color: var(--theme-text-dim);
    padding: 16px 0;
    font-size: 0.85em;
}

.gear-inspect-row.empty {
    opacity: 0.35;
    padding: 2px 6px;
}

.gear-inspect-slot-label {
    font-size: 0.8em;
    color: var(--theme-text-dim);
    font-style: italic;
}

.gear-slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gear-slot-icon .pixel-art {
    transform: scale(3) !important;
    image-rendering: pixelated;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

.inspect-btn {
    padding: 8px 16px;
    background: var(--ui-accent);
    border: none;
    border-radius: 4px;
    color: #111020;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.85em;
    transition: background 0.2s, transform 0.1s;
    min-width: 100px;
    text-align: center;
}

.inspect-btn:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

.inspect-btn:active {
    transform: translateY(0);
}

.inspect-btn-danger {
    background: #c0392b;
}

.inspect-btn-danger:hover {
    background: #a93226;
}

.inspect-btn-teleport {
    background: #9b59b6;
}

.inspect-btn-teleport:hover {
    background: #8e44ad;
}

.inspect-btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.inspect-actions {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 6px;
}

/* ============================================
   ONLINE LIST ENHANCEMENTS
   ============================================ */
.online-player-entry.party-member {
    background: rgba(46, 204, 113, 0.15) !important;
    border-left: 3px solid #2ecc71;
}

.online-player-entry.same-map-party {
    background: rgba(46, 204, 113, 0.25) !important;
    border-left: 3px solid #2ecc71;
    animation: sameMapPulse 2s ease-in-out infinite;
}

@keyframes sameMapPulse {
    0%, 100% { box-shadow: inset 0 0 10px rgba(46, 204, 113, 0.2); }
    50% { box-shadow: inset 0 0 20px rgba(46, 204, 113, 0.4); }
}

.party-indicator {
    color: #2ecc71;
    margin-left: 4px;
}

.activity-status {
    margin-left: 8px;
    font-size: 0.9em;
}

.same-map-tag {
    background: #2ecc71;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    margin-left: 5px;
    font-weight: bold;
}

/* ============================================
   GLOBAL EVENT BANNER STYLES
   ============================================ */
#global-event-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.9) 0%, rgba(243, 156, 18, 0.9) 100%);
    border: 2px solid #f39c12;
    border-radius: 8px;
    padding: 8px 20px;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4);
    animation: eventBannerPulse 2s ease-in-out infinite;
}

#global-event-banner.double-exp {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.9) 0%, rgba(39, 174, 96, 0.9) 100%);
    border-color: #27ae60;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

#global-event-banner.double-drops {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.9) 0%, rgba(142, 68, 173, 0.9) 100%);
    border-color: #9b59b6;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}

#global-event-banner.boss-spawn {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.9) 0%, rgba(192, 57, 43, 0.9) 100%);
    border-color: #e74c3c;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

@keyframes eventBannerPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.02); }
}

#event-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Ari9500', cursive;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

#event-banner-icon {
    font-size: 1.3em;
}

#event-banner-text {
    font-size: 1.1em;
    font-weight: bold;
}

#event-banner-timer {
    font-size: 0.9em;
    opacity: 0.9;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Guild Styles */
.guild-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(155, 89, 182, 0.1);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Guild icon sprite rendering */
.guild-icon-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    background-repeat: no-repeat;
}

.guild-icon-display {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid #9b59b6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.guild-icon-display img {
    max-width: 100%;
    max-height: 100%;
}

.guild-info-header {
    flex: 1;
}

.guild-info-header h3 {
    margin: 0 0 5px 0;
    color: #9b59b6;
}

.guild-info-header p {
    margin: 0;
    color: var(--theme-text-dim);
    font-size: 0.9em;
}

.guild-members-section {
    margin-bottom: 15px;
}

.guild-members-section h4 {
    color: #9b59b6;
    border-bottom: 1px solid rgba(155, 89, 182, 0.3);
    padding-bottom: 5px;
    margin: 0 0 10px 0;
}

.guild-member-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 5px;
}

.guild-member-entry.leader {
    border-left: 3px solid #f1c40f;
}

.guild-member-entry.online {
    border-left: 3px solid #2ecc71;
}

.guild-member-entry.offline {
    opacity: 0.6;
}

.guild-member-name {
    font-weight: bold;
    color: #fff;
}

.guild-member-rank {
    font-size: 0.8em;
    color: #f1c40f;
}

.guild-member-status {
    font-size: 0.85em;
    color: var(--theme-text-dim);
}

.guild-kick-btn {
    background: rgba(231, 76, 60, 0.6);
    border: none;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: var(--cursor-pointer, pointer);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.guild-kick-btn:hover {
    background: rgba(231, 76, 60, 1);
}

/* Guild Role System */
.guild-role-badge {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guild-role-buttons {
    display: flex;
    gap: 2px;
}

.guild-role-btn {
    background: rgba(155, 89, 182, 0.6);
    border: none;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    cursor: var(--cursor-pointer, pointer);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
}

.guild-role-btn:hover {
    transform: scale(1.1);
}

.guild-role-btn.promote {
    background: rgba(46, 204, 113, 0.6);
}

.guild-role-btn.promote:hover {
    background: rgba(46, 204, 113, 1);
}

.guild-role-btn.demote {
    background: rgba(231, 76, 60, 0.6);
}

.guild-role-btn.demote:hover {
    background: rgba(231, 76, 60, 1);
}

/* Guild Buffs Section */
.guild-buffs-section {
    background: rgba(155, 89, 182, 0.1);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.guild-buffs-section h4 {
    color: #9b59b6;
    margin: 0 0 10px 0;
}

.guild-active-buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.guild-buff-active {
    background: rgba(155, 89, 182, 0.3);
    border: 1px solid rgba(155, 89, 182, 0.5);
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
}

.guild-buff-icon {
    font-size: 14px;
}

.guild-buff-name {
    color: #fff;
}

.guild-buffs-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

/* Guild Buffs Modal Grid */
.guild-buffs-grid {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.guild-buff-category {
    margin-bottom: 15px;
}

.guild-buff-category-header {
    font-size: 0.9em;
    color: #f1c40f;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(241, 196, 15, 0.3);
}

.guild-buff-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 6px;
    transition: all 0.2s;
}

.guild-buff-item.unlocked {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.1);
}

.guild-buff-item.superseded {
    border-color: rgba(128, 128, 128, 0.3);
    background: rgba(128, 128, 128, 0.08);
    opacity: 0.5;
}

.guild-buff-item.available {
    border-color: rgba(241, 196, 15, 0.5);
}

.guild-buff-item.available:hover {
    background: rgba(241, 196, 15, 0.1);
}

.guild-buff-icon-large {
    font-size: 24px;
    width: 36px;
    text-align: center;
}

.guild-buff-details {
    flex: 1;
}

.guild-buff-title {
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}

.guild-buff-desc {
    font-size: 0.8em;
    color: var(--theme-text-secondary);
}

.guild-buff-cost {
    font-size: 0.8em;
    color: #f1c40f;
    margin-top: 2px;
}

.guild-buff-req {
    font-size: 0.75em;
    color: #e74c3c;
    margin-top: 2px;
}

.guild-buff-status {
    color: #2ecc71;
    font-size: 0.9em;
}

.guild-buff-unlock-btn {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    border: none;
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    font-family: inherit;
    font-weight: bold;
    transition: transform 0.2s;
}

.guild-buff-unlock-btn:hover {
    transform: scale(1.05);
}

.guild-challenges {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.guild-challenges h4 {
    color: #2ecc71;
    margin: 0 0 10px 0;
}

.guild-challenge-entry {
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 5px;
}
.guild-challenge-entry.locked {
    opacity: 0.5;
}
.guild-challenge-entry.claimed {
    border-left: 3px solid #2ecc71;
}

.guild-challenge-name {
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.guild-challenge-progress {
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.guild-challenge-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.3s;
}

.guild-challenge-reward {
    font-size: 0.8em;
    color: #f1c40f;
    margin-top: 5px;
}

.guild-action-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500', cursive;
    font-size: 0.9em;
    margin-top: 10px;
}

.create-guild-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.create-guild-btn:hover {
    background: linear-gradient(135deg, #8e44ad, #7d3c98);
}

.leave-guild-btn {
    background: #e74c3c;
}

.leave-guild-btn:hover {
    background: #c0392b;
}

.invite-to-guild-btn {
    padding: 5px 8px;
    background: #9b59b6;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.8em;
}

.invite-to-guild-btn:hover {
    background: #8e44ad;
}

.no-guild-message {
    text-align: center;
    padding: 30px;
    color: var(--theme-text-dim);
}

.no-guild-message p {
    margin: 5px 0;
}

.guild-icon-selector {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 15px;
    max-height: 200px;
    overflow-y: auto;
}

.guild-icon-option {
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: var(--cursor-pointer, pointer);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.guild-icon-option:hover {
    border-color: #9b59b6;
    background: rgba(155, 89, 182, 0.2);
}

.guild-icon-option.selected {
    border-color: #9b59b6;
    background: rgba(155, 89, 182, 0.3);
}

.guild-icon-option img {
    max-width: 32px;
    max-height: 32px;
}

/* Party Section Styles */
.party-section {
    background: rgba(93, 173, 226, 0.1);
    border: 1px solid rgba(93, 173, 226, 0.3);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.party-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.party-members {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.party-member-entry {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border-left: 3px solid #5dade2;
}

.party-member-entry.same-map {
    border-left-color: #2ecc71;
}

.party-member-name {
    font-weight: bold;
    color: #5dade2;
}

.party-member-details {
    font-size: 0.85em;
    color: var(--theme-text-secondary);
}

.party-member-map {
    font-size: 0.8em;
    color: var(--theme-text-dim);
}

.leave-party-btn {
    width: 100%;
    padding: 6px;
    background: #e74c3c;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.85em;
}

.leave-party-btn:hover {
    background: #c0392b;
}

.party-member-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.party-kick-btn {
    background: #c0392b;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    padding: 1px 4px;
    font-size: 0.65em;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.party-kick-btn:hover {
    background: #e74c3c;
    opacity: 1;
}

.party-tag {
    color: #5dade2;
    font-size: 0.8em;
}

.in-other-party {
    opacity: 0.7;
}

/* Invite Prompt Container - stacks all invite prompts vertically */
#invite-prompt-container {
    position: fixed;
    bottom: var(--above-hotbar-keyboard);
    right: var(--left-of-hotbar-keyboard);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    transition: bottom 0.3s ease, right 0.3s ease;
}

body.gamepad-active #invite-prompt-container {
    bottom: var(--above-hotbar-gamepad);
    right: var(--left-of-hotbar-gamepad);
}

/* Base Invite Prompt - shared styles for all invite/request popups */
.invite-prompt {
    position: relative;
    z-index: 10000;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    animation: inviteSlideUp 0.3s ease-out;
    text-align: center;
    width: 320px;
    font-family: 'Ari9500', cursive;
    pointer-events: auto;
}

.invite-prompt-title {
    background: var(--ui-border);
    color: var(--theme-text-body);
    padding: 6px 12px;
    font-size: var(--font-header);
    font-weight: bold;
}

.invite-prompt-content {
    padding: 15px;
    color: var(--theme-text-bright);
    font-size: var(--font-standard);
}

.invite-prompt-content strong {
    color: var(--exp-color);
}

.invite-prompt h3 {
    background: var(--ui-border);
    color: var(--theme-text-body);
    margin: 0;
    padding: 6px 12px;
    font-size: var(--font-header);
    font-weight: bold;
    border-radius: 3px 3px 0 0;
}

.invite-prompt p {
    color: var(--theme-text-bright);
    margin: 0;
    padding: 15px;
    font-size: var(--font-standard);
}

/* Invite buttons container */
.invite-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px 15px 15px;
}

.invite-accept-btn, .invite-decline-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    transition: all 0.2s;
}

.invite-accept-btn {
    background: #27ae60;
    border: 1px solid #2ecc71;
}

.invite-accept-btn:hover {
    background: #2ecc71;
}

.invite-decline-btn {
    background: var(--theme-text-dim);
    border: 1px solid var(--ui-accent);
}

.invite-decline-btn:hover {
    background: var(--ui-accent);
}

/* Party Invite Prompt - blue accent */
.party-invite-prompt h3 {
    background: #5dade2;
}

/* Trade Invite Prompt - gold accent */
.trade-invite-prompt h3 {
    background: #f1c40f;
    color: var(--theme-text-body);
}

/* Buddy Invite Prompt - pink accent */
.buddy-invite-prompt h3 {
    background: #e91e63;
}

/* Guild Invite Prompt - purple accent */
.guild-invite-prompt h3 {
    background: #9b59b6;
}

/* Death Flash & Overlay */
@keyframes deathFlash {
    0%   { opacity: 0.6; }
    100% { opacity: 0; }
}

@keyframes deathOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#death-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 99998;
    animation: deathOverlayFadeIn 0.35s ease-out forwards;
}

/* Death Prompt — matches .window design language */
@keyframes deathPromptAppear {
    from { opacity: 0; transform: translate(-50%, -47%) scale(0.93); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.death-prompt {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    width: 290px;
    font-family: 'Ari9500', cursive;
    text-align: center;
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 6px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.85), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: deathPromptAppear 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.death-title {
    background: linear-gradient(180deg, #c0392b 0%, #922b21 100%);
    color: #fff;
    padding: 8px 12px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: var(--font-header);
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    letter-spacing: 0.3px;
}

.death-prompt-body {
    padding: 16px;
}

.death-prompt-tombstone {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.death-prompt-tombstone img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* Contextual new-player tip (getDeathTip in player.js) */
.death-prompt .death-tip {
    color: var(--exp-color);
    font-size: var(--font-small);
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 8px;
    margin: 0 0 14px;
}

.death-prompt p {
    color: var(--theme-text-bright);
    margin: 0 0 16px;
    font-size: var(--font-standard);
    line-height: 1.5;
}

.death-prompt p strong {
    color: #e74c3c;
}

.death-respawn-btn {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: linear-gradient(180deg, #c0392b 0%, #922b21 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    color: #fff;
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    cursor: var(--cursor-pointer, pointer);
    transition: background 0.15s;
    letter-spacing: 0.3px;
}

.death-respawn-btn:hover {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
}

/* Lingering world tombstones — behind monsters (9) and players (10), above ground (5) */
.world-tombstone {
    position: absolute;
    z-index: 7;
    cursor: var(--cursor-pointer, pointer);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    opacity: 0;
    animation: tombstoneAppear 0.6s ease-out 0.1s forwards;
}

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

.world-tombstone img {
    width: 45px;
    height: 45px;
    image-rendering: pixelated;
    display: block;
}

.tombstone-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
    font-family: 'Ari9500', cursive;
    font-size: var(--font-small);
    color: var(--theme-text-bright);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    animation: tooltipFadeIn 0.2s ease-out forwards;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes inviteSlideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes inviteFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.invite-prompt.dismissing {
    animation: inviteFadeOut 0.2s ease-out forwards;
    pointer-events: none;
}

/* Guild Modal - centered modals for guild creation/management (NOT invites) */
.guild-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.3s ease-out;
    text-align: center;
    width: 400px;
    font-family: 'Ari9500', cursive;
}

.guild-modal h3 {
    background: var(--ui-border);
    color: var(--theme-text-body);
    margin: 0;
    padding: 6px 12px;
    font-size: var(--font-header);
    font-weight: bold;
    border-radius: 3px 3px 0 0;
}

.guild-modal p {
    color: var(--theme-text-bright);
    margin: 0;
    padding: 15px 15px 0;
    font-size: var(--font-standard);
    margin: 0 0 10px 0;
}

.guild-modal p {
    color: var(--theme-text-bright);
    margin: 0;
    padding: 15px 15px 0;
    font-size: var(--font-standard);
}

.guild-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 15px;
}

.guild-modal-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: var(--cursor-pointer, pointer);
    font-weight: bold;
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    transition: all 0.2s;
    border: 1px solid transparent;
}

.guild-modal-btn.confirm {
    background: #27ae60;
    border-color: #2ecc71;
}

.guild-modal-btn.confirm:hover {
    background: #2ecc71;
}

.guild-modal-btn.cancel {
    background: var(--theme-text-dim);
    border-color: var(--theme-text-secondary);
}

.guild-modal-btn.cancel:hover {
    background: var(--ui-accent);
}

.guild-modal-btn.danger {
    background: #c0392b;
    border-color: #e74c3c;
}

.guild-modal-btn.danger:hover {
    background: #e74c3c;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* World Map Player Count Badge & Tooltip */
.world-map-player-count {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #2ecc71;
    color: white;
    font-size: 9px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.8);
    pointer-events: none;
    border: 1px solid rgba(0,0,0,0.3);
    padding: 0 3px;
}

.world-map-node-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 18, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    color: #ddd;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
    text-align: left;
}

.world-map-node-tooltip strong {
    color: #fff;
    font-size: 12px;
}

/* Trade Window Items */

/* Trade Window Items */
.trade-item-slot {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(69, 66, 90, 0.3);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: var(--cursor-pointer, pointer);
}

.trade-item-slot:hover {
    border-color: var(--ui-accent);
}

.trade-item-slot img {
    max-width: 32px;
    max-height: 32px;
    image-rendering: pixelated;
}

.trade-item-slot .item-quantity {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 1px black;
}

/* Custom Scrollbar for the chat log — handled by universal rule */

#chat-log.active {
    cursor: var(--cursor-resize, grabbing);
}

#chat-input-container {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 30%; /* synced with chat-log-container via JS */
    padding: 5px;
    background-color: var(--ui-bg);
    border-top: 2px solid var(--ui-border);
    display: none;
    /* This makes the input bar hidden by default */
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    z-index: 1; /* Layer behind game windows */
}

#chat-channel-indicator {
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    cursor: var(--cursor-pointer, pointer);
    transition: filter 0.15s ease, transform 0.1s ease;
    user-select: none;
}
#chat-channel-indicator:hover {
    filter: brightness(1.3);
    transform: scale(1.05);
}

#chat-channel-indicator[data-channel="global"] {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
}

#chat-channel-indicator[data-channel="buddy"] {
    color: #e91e63;
    background: rgba(233, 30, 99, 0.2);
    border: 1px solid #e91e63;
}

#chat-channel-indicator[data-channel="guild"] {
    color: #9b59b6;
    background: rgba(155, 89, 182, 0.2);
    border: 1px solid #9b59b6;
}

#chat-channel-indicator[data-channel="party"] {
    color: #3498db;
    background: rgba(52, 152, 219, 0.2);
    border: 1px solid #3498db;
}

#chat-input {
    width: 100%;
    padding: 6px;
    background-color: var(--bar-bg);
    border: 1px solid var(--ui-border);
    color: #fff;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    box-sizing: border-box;
    border-radius: 2px;
}

#player-chat-bubble {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #1c2833;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    max-width: 200px;
    min-width: 30px;
    width: max-content;
    text-align: center;
    z-index: 100;
    display: none;
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
}

#player-chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.9);
}

/* --- Chat Item Links --- */
.chat-item-link {
    cursor: var(--cursor-pointer, pointer);
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
    padding: 0 2px;
    border-radius: 2px;
    transition: filter 0.15s ease;
}
.chat-item-link:hover {
    filter: brightness(1.4);
    text-decoration-style: solid;
}
.chat-item-link.common { color: #ffffff; }
.chat-item-link.rare { color: var(--rare-color); }
.chat-item-link.epic { color: var(--epic-color); }
.chat-item-link.legendary { color: var(--legendary-color); }
.chat-item-link.mythic { color: var(--mythic-color); }
.chat-item-link.prismatic { color: var(--prismatic-color); text-shadow: 0 0 6px rgba(240, 234, 255, 0.5); animation: prismaticText 2s ease-in-out infinite; }
.chat-item-link.quest { color: var(--quest-color, #f1c40f); }
.chat-item-link.cosmetic { color: var(--cosmetic-color, #e91e63); }

/* Chat input drag-over highlight */
#chat-input.chat-input-drag-over {
    border-color: var(--rare-color) !important;
    box-shadow: 0 0 6px var(--rare-color);
    background-color: rgba(52, 152, 219, 0.15) !important;
}

#job-adv-content p {
    margin-bottom: 10px; /* Reduced from 25px */
    font-size: var(--font-small); /* Added font size */
    text-align: center;
}

.job-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Pixel-skinned selection card: small window frame + staircase clip, matching
   the rest of the new UI. No hover lift/movement (skin convention) — hover is a
   brightness lift only. */
.job-option {
    background: var(--px-window-bg);
    border: 6px solid transparent;
    border-image: var(--px-frame-window-sm) 6 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px; /* Reduced gap for tighter layout */
    transition: filter 0.15s ease;
    box-shadow: none;
    min-height: 55px; /* Reduced from 65px to fit all 5 options */
}

.job-option:hover {
    filter: brightness(1.15);
}

.job-icon-container {
    width: 32px; /* Smaller icon since it's beside text */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--px-slot-bg);
    border: 4px solid transparent;
    border-image: var(--px-frame-slot-sm) 4 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-slot-sm);
    flex-shrink: 0; /* Prevent shrinking */
}

.job-info {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and class name */
    text-align: left; /* Align text to the left since icon is on left */
}

.job-class-name {
    font-size: var(--font-small); /* Slightly smaller for horizontal layout */
    font-weight: bold;
    margin: 0;
    color: var(--exp-color);
    font-family: 'Ari9500Display';
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.job-description {
    font-size: var(--font-small);
    margin: 0;
    color: var(--theme-text-secondary);
    line-height: 1.2;
    font-family: 'Ari9500';
    text-align: center; /* Keep centered */
    flex-grow: 1; /* Allow description to grow and push button to bottom */
}

.job-action {
    display: flex;
    align-items: center;
    margin-top: auto; /* Push to bottom of flex container */
    padding-top: 4px; /* Small space above button */
}

.job-select-btn {
    padding: 6px 12px; /* Reduced padding */
    font-size: var(--font-small);
    font-weight: bold;
    min-width: 70px; /* Reduced from 80px */
    background: linear-gradient(135deg, var(--success-color) 0%, #27ae60 100%);
    border: 2px solid #2ecc71; /* Reduced border */
    color: white;
    transition: all 0.3s ease;
    border-radius: 6px; /* Reduced border radius */
}

.job-select-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #27ae60 0%, var(--success-color) 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4); /* Reduced shadow */
}

.job-select-btn:disabled {
    background: var(--theme-hover-bg);
    border-color: var(--theme-btn-hover-top);
    color: var(--theme-text-dim);
    cursor: not-allowed;
    opacity: 0.6;
}

#world-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Transparent by default so the #fx-sky day/night backdrop shows through maps
       whose art has no baked-in sky. Indoor maps set their own backgroundColor
       (via changeMap), which covers the sky. */
    background-color: transparent;
    will-change: transform;
}

#bg-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.5) 80%,
        rgba(0, 0, 0, 1) 100%
    );
}

#world-map-window {
    width: 900px;
    height: 600px;
    top: 75px;
    left: 100px;
    background-color: rgba(20, 30, 40, 0.95);
    display: none; /* Start hidden */
    flex-direction: column; /* Organizes title and content vertically */
}

#world-map-grid {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#world-map-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.world-map-connection {
    stroke: var(--ui-border);
    stroke-width: 2;
}

.world-map-connection-undiscovered {
    stroke: rgba(255,255,255,0.08);
    stroke-dasharray: 4 4;
    stroke-width: 1;
}

/* ── Map Node: default is a small dot ── */
.world-map-node {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5a5065;
    border: 2px solid rgba(0,0,0,0.6);
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
    opacity: 0.3;
    overflow: visible;
    z-index: 2;
    cursor: default;
    font-size: 0;
    color: transparent;
    padding: 0;
    transition: all 0.15s ease;
}

.world-map-node.discovered {
    opacity: 1;
    background: #c84838;
    border-color: rgba(40,20,15,0.8);
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.5);
}

.world-map-node.discovered:hover {
    background: #e05848;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%) scale(1.25);
}

/* Selected: bright ring outline (not filled) */
.world-map-node.selected {
    background: #c84838;
    border-color: #ffffff;
    border-width: 3px;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* Current: cyan color + player marker */
.world-map-node.current {
    background: #48d4d4;
    border-color: #2a8888;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2);
    opacity: 1;
}

/* Player marker icon for current map */
.world-map-node.current::after {
    content: '▼';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #48d4d4;
    pointer-events: none;
    animation: playerMarkerBounce 1.5s ease-in-out infinite;
}

@keyframes playerMarkerBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

/* ── Map Node: town — larger blue dot ── */
.world-map-node.town {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4888d4;
    border: 2px solid rgba(30,60,120,0.8);
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.5);
    opacity: 0.4;
    overflow: visible;
    font-size: 0;
    color: transparent;
    padding: 0;
}

.world-map-node.town.discovered {
    opacity: 1;
    background: #4888d4;
    border-color: rgba(30,60,120,0.8);
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.5);
}

.world-map-node.town.discovered:hover {
    background: #5a9ae8;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2);
    transform: translate(-50%, -50%) scale(1.25);
}

/* Selected town: bright white outline ring */
.world-map-node.town.selected {
    background: #4888d4;
    border-color: #ffffff;
    border-width: 3px;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* Current town: cyan color + player marker */
.world-map-node.town.current {
    background: #48d4d4;
    border-color: #2a8888;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2);
    opacity: 1;
}

/* Player marker for current town */
.world-map-node.town.current::before {
    content: '▼';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #48d4d4;
    pointer-events: none;
    animation: playerMarkerBounce 1.5s ease-in-out infinite;
}

/* ── Hover name tooltip (for dot nodes) ── */
.world-map-name-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    background: linear-gradient(180deg, #f5e8cc 0%, #e0d0a8 50%, #ccc088 100%);
    border: 1px solid #a08050;
    border-radius: 2px;
    color: #3a2010;
    font-family: 'Ari9500', cursive;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.5);
    z-index: 20;
    display: none;
}

.world-map-node.discovered:hover .world-map-name-label,
.world-map-node.selected .world-map-name-label,
.world-map-node.current .world-map-name-label {
    display: block;
}

/* Name label styling for current map - matches cyan theme */
.world-map-node.current .world-map-name-label {
    background: linear-gradient(180deg, #e8fffa 0%, #c8f0e8 50%, #a8e0d8 100%);
    border-color: #2a8888;
    color: #1a5555;
    bottom: calc(100% + 16px);
}

/* World Map Tabs */
.world-map-tab {
    padding: 8px 16px;
    background: rgba(30, 40, 50, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px 5px 0 0;
    color: rgba(255, 255, 255, 0.6);
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500', sans-serif;
    font-size: 13px;
    transition: all 0.2s ease;
}

.world-map-tab:hover {
    background: rgba(50, 70, 90, 0.9);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

.world-map-tab.active {
    background: rgba(74, 144, 226, 0.3);
    border-color: #4a90e2;
    color: #fff;
    border-bottom-color: transparent;
}

.world-map-tab[data-region="dewdrop"].active {
    background: rgba(74, 200, 160, 0.3);
    border-color: #4ac8a0;
}

.world-map-tab[data-region="victoria"].active {
    background: rgba(200, 160, 74, 0.3);
    border-color: #c8a04a;
}

.world-map-tab[data-region="skypalace"].active {
    background: rgba(120, 60, 160, 0.3);
    border-color: #783ca0;
}

#foliage-background-canvas,
#foliage-foreground-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Allows clicks to pass through */
}

#foliage-background-canvas {
    z-index: 8; /* Behind the player (z-index: 10) */
}

#foliage-foreground-canvas {
    z-index: 11; /* In front of the player */
}
.ladder {
    position: absolute;
    width: 32px; /* Width of the ladder sprite */
    z-index: 6; /* In front of the ground (5) but behind monsters/player (9+) */
    background-repeat: repeat-y;
    background-position: center top; /* Center the graphic horizontally */
}

.npc-quest-indicator {
    position: absolute;
    width: 36px;
    height: 36px;
    z-index: 100;
}

.world-map-quest-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 21px;
    height: 21px;
    z-index: 3; /* On top of the map node */
    animation: quest-wiggle 1.2s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes quest-wiggle {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    15% { transform: rotate(-3deg) translateY(0); }
    30% { transform: rotate(2.5deg) translateY(-1px); }
    45% { transform: rotate(-2deg) translateY(0); }
    60% { transform: rotate(1.5deg) translateY(0); }
    75% { transform: rotate(-1deg); }
    85% { transform: rotate(0.5deg); }
}

/* World Boss icon on the world map */
.world-map-boss-icon {
    position: absolute;
    top: -14px;
    left: -14px;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    z-index: 4;
    filter: drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 8px #ff4400);
    animation: boss-icon-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
.world-map-node.has-world-boss {
    box-shadow: 0 0 8px 2px rgba(255, 50, 50, 0.7);
}
@keyframes boss-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}
.parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: repeat-x;
    z-index: 1;
    overflow: hidden;
}
/* Style for the element being dragged */
.dragging {
    opacity: 0.5;
    border: 2px dashed var(--exp-color);
}

/* Style for a hotbar slot that can receive a drop */
.drag-over {
    background-color: #556677;
    transform: scale(1.1);
}
#tooltip {
    position: fixed;
    /* FIX: Changed from 'absolute' back to 'fixed' */
    display: none;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    padding: 10px;
    border-radius: 5px;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
    pointer-events: none;
    z-index: 99999;
    max-width: 300px;
    transform-origin: top left;
}

#tooltip h4 {
    margin: 0 0 5px 0;
    color: var(--exp-color);
    font-family: 'Ari9500';
    font-size: var(--font-large);
}

#tooltip p {
    margin: 0;
    white-space: pre-wrap; /* Allows for line breaks in descriptions */
}
#tooltip .item-category { color: var(--theme-text-secondary); font-size: var(--font-standard); margin-bottom: 5px; font-family: 'Ari9500'; }
#tooltip .cosmetic-info { color: #e74c3c; font-size: var(--font-small); font-style: italic; margin-bottom: 5px; font-family: 'Ari9500'; }
#tooltip h4.common { color: var(--common-color); }
#tooltip h4.rare { color: var(--rare-color); }
#tooltip h4.epic { color: var(--epic-color); }
#tooltip h4.legendary { color: var(--legendary-color); }
#tooltip h4.mythic { color: var(--mythic-color); text-shadow: 0 0 8px rgba(0, 229, 204, 0.5); }
#tooltip h4.prismatic { color: var(--prismatic-color); text-shadow: 0 0 10px rgba(240, 234, 255, 0.6); animation: prismaticText 2s ease-in-out infinite; }
#tooltip h4.cosmetic { color: var(--cosmetic-color); }
#tooltip h4.quest { color: var(--quest-color); }

#tooltip .stat-increase {
    color: var(--success-color);
    font-weight: bold;
}

#tooltip .stat-decrease {
    color: var(--fail-color);
    font-weight: bold;
}

#tooltip .stat-missing {
    color: var(--theme-text-dim);
}

#tooltip .tooltip-stats-divider {
    border-top: 1px solid #3a374f;
    margin: 6px 0;
}

#tooltip .comparison-divider {
    border-top: 1px solid var(--ui-border);
    margin: 8px 0;
}

#tooltip .comparison-header {
    color: var(--theme-text-secondary);
    font-size: 0.9em;
    margin-bottom: 4px;
}

#tooltip .comparison-summary {
    font-weight: bold;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
}

#tooltip .comparison-summary.upgrade {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

#tooltip .comparison-summary.downgrade {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
}

#tooltip .comparison-summary.sidegrade {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.15);
    border: 1px solid rgba(243, 156, 18, 0.3);
}

#tooltip .comparison-summary.equal {
    color: var(--theme-text-secondary);
    background: rgba(149, 165, 166, 0.15);
    border: 1px solid rgba(149, 165, 166, 0.3);
}

#tooltip .enhancement-warning {
    color: var(--fail-color);
    font-style: italic;
    font-size: var(--font-standard);
    margin-top: 5px;
    font-family: 'Ari9500';
}

.portal-arrow-prompt {

    position: absolute;
    top: -10px; /* Position above the portal */
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: none; /* Hidden by default */
    z-index: 8;
    /*animation: float-up-down 1.5s infinite ease-in-out;*/

}
@keyframes float-up-down {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -4px);
    }
}

/* This new rule will apply to ALL visual elements inside your game */
#game-container div,
#game-container canvas,
#game-container svg {
    image-rendering: pixelated;
}
#ground-canvas, #platforms-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}

#sparks-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 16;
    pointer-events: none;
    image-rendering: pixelated;
}

.hotkey-notification {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    background-color: var(--exp-color);
    color: black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-standard);
    font-weight: bold;
    box-shadow: 1px 1px 2px black;
    pointer-events: none; /* So it doesn't interfere with clicks */
}

.hotkey-notification.pixel-art {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 24px;
    height: 24px;
    /* Perch above the button's top-right corner. The parent .hotkey uses
       overflow: visible so this is no longer clipped. z-index keeps it above
       the neighbouring button frames. */
    top: -16px;
    right: -6px;
    z-index: 5;
}
.option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: var(--font-standard);
    padding: 1px 0;
}
.option-item label {
    flex-basis: 35%;
    text-align: left;
    font-size: var(--font-standard);
}

.settings-diagnostics {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
    line-height: 1.5;
}

.settings-diagnostics .diagnostic-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-diagnostics .diagnostic-row + .diagnostic-row {
    margin-top: 4px;
}

.settings-diagnostics .diagnostic-label {
    color: var(--theme-text-dim);
}

.settings-diagnostics .diagnostic-value {
    color: var(--theme-text-bright);
    text-align: right;
}
.option-item input[type="range"] {
    flex-grow: 1;
    margin: 0 10px;
    /* Basic styling for the slider */
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--bar-bg);
    outline: none;
    border: 1px solid var(--ui-border);
    border-radius: 5px;
}
.option-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--exp-color);
    cursor: var(--cursor-pointer, pointer);
    border: 1px solid black;
    border-radius: 50%;
}
.option-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--exp-color);
    cursor: var(--cursor-pointer, pointer);
    border: 1px solid black;
    border-radius: 50%;
}
#achievement-window {
    width: 750px;
    top: 100px;
    left: 175px;
}

/* Achievement window tabs — now uses shared tab override */
.achievement-tabs {
    margin-bottom: 10px;
}

.achievement-tab-content {
    display: none;
}

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

#achievement-list,
#medals-list {
    height: 500px;
    overflow-y: auto;
    padding-right: 5px; /* For scrollbar spacing */
    /* Perf: give the scroll area its own compositor layer + containment so
       scrolling this long list doesn't re-rasterize the window's backdrop blur
       (which froze the game for seconds while scrolling). */
    contain: layout paint;
    transform: translateZ(0);
    will-change: scroll-position;
}

/* Bestiary Window */
#bestiary-window {
    width: 550px;
    top: 80px;
    left: 200px;
}
.bestiary-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}
.bestiary-tab-button {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
}
.bestiary-tab-button:last-child {
    border-right: none;
}
.bestiary-tab-button.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.bestiary-tab-button:hover:not(.active) {
    background: var(--theme-hover-bg);
}
/* Bestiary layout */
.bestiary-content-container {
    height: 450px;
    overflow: hidden;
}

.bestiary-split-layout {
    display: none;
    gap: 15px;
    height: 100%;
}

.bestiary-split-layout:has(.bestiary-tab-content.active) {
    display: flex;
}

.bestiary-full-layout {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.bestiary-full-layout:has(.bestiary-tab-content.active) {
    display: block;
}

.bestiary-list-panel {
    flex: 0 0 320px;
    overflow-y: auto;
    padding-right: 5px;
}

.bestiary-detail-panel {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.bestiary-no-selection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--theme-disabled-text);
    font-size: var(--font-standard);
}

.bestiary-tab-content {
    display: none;
}
.bestiary-tab-content.active {
    display: block;
}
.bestiary-monster {
    background: linear-gradient(135deg, var(--ui-bg), var(--ui-bg-light));
    border: 2px solid var(--theme-slot-bg);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}
.bestiary-monster.discovered {
    border-color: var(--ui-border);
}
.bestiary-monster.undiscovered {
    opacity: 0.4;
    filter: grayscale(1);
}
.bestiary-monster-info {
    flex: 1;
}
.bestiary-monster-info h4 {
    margin: 0 0 6px 0;
    color: var(--theme-text-bright);
    font-size: var(--font-standard);
    font-weight: bold;
}
.bestiary-monster-info p {
    margin: 3px 0;
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
}
.bestiary-monster-stats {
    text-align: right;
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
    min-width: 100px;
}
.bestiary-monster-stats p {
    margin: 3px 0;
}
.bestiary-monster-medals {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}
.bestiary-medal {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--font-small);
    text-shadow: #000000 1px 1px 1px;
    color: white;
    font-weight: bold;
}
.bestiary-medal.bronze { background: var(--achievement-bronze); }
.bestiary-medal.silver { background: var(--achievement-silver); }
.bestiary-medal.gold { background: var(--achievement-gold); }
.bestiary-medal.diamond { background: var(--achievement-diamond); }
.bestiary-medal.vanquisher {
    animation: prismaticText 2s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(255, 100, 200, 0.6);
    background: linear-gradient(90deg, rgba(255, 100, 100, 0.3), rgba(100, 200, 255, 0.3), rgba(180, 100, 255, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.3);
}
@keyframes vanquisher-bar {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
.vanquisher-icon {
    animation: prismaticText 2s ease-in-out infinite;
    font-size: 14px;
}
.bestiary-stats-section {
    background: linear-gradient(135deg, var(--ui-bg), var(--ui-bg-light));
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.bestiary-stats-section h3 {
    margin: 0 0 12px 0;
    color: var(--theme-text-bright);
    font-family: 'Ari9500Display';
    font-size: var(--font-header);
    border-bottom: 2px solid var(--ui-border);
    padding-bottom: 8px;
}
.bestiary-stat-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
    padding: 4px 0;
}
.bestiary-stat-row span:first-child {
    color: var(--theme-text-secondary);
}
.bestiary-stat-row span:last-child {
    color: var(--theme-text-bright);
    font-weight: bold;
}

/* Bestiary Progress Bars */
.bestiary-progress-stat {
    margin: 12px 0;
}
.bestiary-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
}
.bestiary-progress-header span:first-child {
    color: var(--theme-text-secondary);
}
.bestiary-progress-header span:last-child {
    color: var(--theme-text-bright);
    font-weight: bold;
}
.bestiary-progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.bestiary-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.bestiary-rare-drop {
    color: var(--rare-color);
    font-weight: bold;
}
.bestiary-monster.clickable {
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s ease;
}
.bestiary-monster.clickable:hover {
    background: var(--theme-slot-bg);
    border-color: var(--ui-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bestiary-monster.selected {
    background: #4a90e2;
    border-color: #5fa3e3;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}
.bestiary-complete {
    color: var(--success-color);
    font-weight: bold;
}
.bestiary-achievement-complete {
    color: var(--rare-color);
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
}

/* Monster Detail Modal */
#monster-detail-modal {
    background: var(--ui-bg);
}
.monster-detail-layout {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.monster-animation-container {
    flex: 0 0 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 6px;
    position: relative;
}
.bestiary-shiny-btn {
    position: absolute;
    bottom: 4px;
    font-size: var(--font-small);
    font-family: 'Ari9500', sans-serif;
    padding: 1px 4px;
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    background: var(--ui-bg);
    color: var(--theme-text);
    cursor: var(--cursor-pointer, pointer);
    z-index: 2;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
}
.bestiary-shiny-btn:hover {
    opacity: 1;
    background: var(--theme-hover-bg);
}
.bestiary-shiny-btn.active {
    opacity: 1;
    background: var(--achievement-gold);
    color: #000;
    border-color: var(--achievement-gold);
}
.monster-sprite-animated {
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.monster-sprite-animated svg {
    width: 100%;
    height: 100%;
    animation: monsterBob 2s ease-in-out infinite;
}
@keyframes monsterBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}
.monster-info-section {
    flex: 1;
}
.monster-info-section h3 {
    margin: 0 0 5px 0;
    color: var(--ui-border);
    font-family: 'Ari9500Display';
    font-size: var(--font-header);
}
.monster-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 5px;
}
.stat-item {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-standard);
    color: var(--theme-text-secondary);
    font-family: 'Ari9500';
}
.stat-item span:first-child {
    color: var(--theme-text-bright);
}
.monster-medals {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.monster-drops-section h4 {
    margin: 0 0 5px 0;
    color: var(--ui-border);
    border-bottom: 1px solid var(--theme-slot-bg);
    padding-bottom: 3px;
    font-family: 'Ari9500Display';
    font-size: var(--font-standard);
}
.drops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 4px;
}
.drop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 3px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid var(--theme-slot-bg);
    text-align: center;
    min-height: 60px;
    transition: all 0.2s ease;
    gap: 1px;
}
.drop-item:hover:not(.undiscovered) {
    scale: 0.98;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.drop-item .drop-icon-wrapper,
.drop-item .coin-icon {
    flex-shrink: 0;
    transform: scale(0.75);
    margin: -4px;
}
.drop-item .unknown-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--theme-text-dim);
    flex-shrink: 0;
}
.drop-item.common { border-color: var(--theme-text-dim); }
.drop-item.rare { border-color: var(--rare-color); }
.drop-item.epic { border-color: var(--epic-color); }
.drop-item.legendary { border-color: var(--legendary-color); }
.drop-item.mythic { border-color: var(--mythic-color); }
.drop-item.prismatic { border-color: var(--prismatic-color); animation: prismaticBorder 2s ease-in-out infinite; }
.drop-item.quest { border-color: var(--quest-color); }
.drop-item.undiscovered { 
    border-color: var(--ui-border); 
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.6;
}
.drop-item.undiscovered .drop-name,
.drop-item.undiscovered .drop-count {
    color: var(--theme-text-dim);
}
.empty-slot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    border: 1px dashed var(--ui-border);
}
.drop-name {
    font-size: var(--font-small);
    color: var(--theme-text-bright);
    word-break: break-word;
    max-width: 100%;
    line-height: 1.2;
}
.drop-count {
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
    margin-top: 1px;
}
.gold-icon, .unknown-icon, .empty-slot {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-standard);
}
.unknown-icon {
    background: var(--theme-hover-bg);
    color: var(--theme-text-dim);
    border-radius: 3px;
}
.achievement-entry {
    background-color: var(--bar-bg);
    border-left: 4px solid gray;
    padding: 6px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
    border-radius: 0 3px 3px 0;
    /* Perf: skip layout/paint for rows scrolled out of view (the list can hold
       ~200 entries). contain-intrinsic-size reserves height so the scrollbar
       stays correct. */
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
}
.achievement-entry.bronze { 
    border-color: var(--achievement-bronze); 
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, var(--theme-gradient-end) 100%);
}
.achievement-entry.silver { 
    border-color: var(--achievement-silver); 
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, var(--theme-gradient-end) 100%);
}
.achievement-entry.gold { 
    border-color: var(--achievement-gold); 
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.achievement-entry.diamond { 
    border-color: var(--achievement-diamond); 
    background: linear-gradient(90deg, rgba(185, 242, 255, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.achievement-entry.claimable {
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
    animation: achievementPulse 2s infinite;
}
.achievement-entry.completed { opacity: 0.6; }

@keyframes achievementPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(241, 196, 15, 0.3); }
    50% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.6); }
}

/* Medal entries - compact layout */
.medal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}
.medal-sub-tabs {
    display: flex;
    gap: 0;
}
.medal-sub-tab {
    padding: 4px 12px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: 1px solid var(--ui-border);
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
}
.medal-sub-tab:first-child { border-radius: 3px 0 0 3px; }
.medal-sub-tab:last-child { border-radius: 0 3px 3px 0; border-left: none; }
.medal-sub-tab.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.medal-sub-tab:hover:not(.active) { background: var(--theme-hover-bg); }

.medal-sort-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.medal-sort-label {
    color: var(--theme-text-dim);
    font-family: 'Ari9500';
    font-size: var(--font-small);
}
.medal-sort-select {
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    padding: 2px 4px;
    font-family: 'Ari9500';
    font-size: var(--font-small);
    cursor: var(--cursor-pointer, pointer);
}

.medal-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ---- Achievement browser (summary + category tabs + filters) ---- */
.achievement-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
}
.ach-claimable-pill {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--achievement-gold, #ffd700);
    color: #1a1300;
    font-weight: bold;
    font-size: var(--font-small);
    /* static glow (no infinite box-shadow animation — that repaints every frame
       while the window is open and competed with the game loop) */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.ach-toolbar { flex-wrap: wrap; gap: 6px; }
.ach-cat-tabs { flex-wrap: wrap; gap: 4px; }
/* category tabs are standalone pills (override the joined medal-sub-tab radii) */
.ach-cat-tab {
    border-radius: 3px !important;
    border-left: 1px solid var(--ui-border) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ach-cat-count {
    color: var(--theme-text-dim);
    font-size: var(--font-small);
}
.ach-cat-tab.active .ach-cat-count { color: var(--theme-text-body); }
.ach-cat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--achievement-gold, #ffd700);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.8); /* static — see .ach-claimable-pill */
}
.ach-controls { display: flex; align-items: center; gap: 6px; }
.ach-empty {
    color: var(--theme-text-dim);
    text-align: center;
    padding: 18px 10px;
    font-family: 'Ari9500';
}

/* ---- Medal page: category filter chips + summary ---- */
.medal-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.medal-cat-chip {
    padding: 2px 10px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-small);
}
.medal-cat-chip:hover:not(.active) { background: var(--theme-hover-bg); }
.medal-cat-chip.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.medal-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-dim);
    font-family: 'Ari9500';
    font-size: var(--font-small);
}
.medal-summary-equipped strong { color: var(--theme-text-bright); }

.medal-entry.compact {
    background-color: var(--bar-bg);
    border-left: 3px solid gray;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
    border-radius: 0 3px 3px 0;
    min-height: 0;
    gap: 6px;
    /* Perf: skip off-screen rows (the monster medal list can be long). */
    content-visibility: auto;
    contain-intrinsic-size: auto 48px;
}

.medal-entry.bronze { 
    border-color: var(--achievement-bronze); 
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.silver { 
    border-color: var(--achievement-silver); 
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.gold { 
    border-color: var(--achievement-gold); 
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.diamond { 
    border-color: var(--achievement-diamond); 
    background: linear-gradient(90deg, rgba(185, 242, 255, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.epic { 
    border-color: var(--epic-color); 
    background: linear-gradient(90deg, rgba(153, 50, 204, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.legendary { 
    border-color: var(--legendary-color); 
    background: linear-gradient(90deg, rgba(255, 153, 0, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.mythic { 
    border-color: var(--mythic-color); 
    background: linear-gradient(90deg, rgba(0, 229, 204, 0.15) 0%, var(--theme-gradient-end) 100%);
}
.medal-entry.prismatic { 
    border-color: var(--prismatic-color); 
    background: linear-gradient(90deg, rgba(240, 234, 255, 0.15) 0%, var(--theme-gradient-end) 100%);
    animation: prismaticBorder 2s ease-in-out infinite;
}
.medal-entry.vanquisher {
    border-color: #ff6464;
    background: linear-gradient(90deg, rgba(255, 100, 100, 0.15) 0%, rgba(100, 200, 255, 0.1) 50%, rgba(180, 100, 255, 0.15) 100%);
    animation: prismaticBorder 2s ease-in-out infinite;
}
.medal-entry.vanquisher .medal-name {
    animation: prismaticText 2s ease-in-out infinite;
}
.medal-entry.rare { 
    border-color: var(--rare-color); 
    background: linear-gradient(90deg, rgba(68, 136, 255, 0.1) 0%, var(--theme-gradient-end) 100%);
}

.medal-entry.locked {
    opacity: 0.5;
}

.medal-entry.equipped {
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
    border-color: #4CAF50;
}

.medal-entry.displayed {
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
    border-color: #2196F3;
}

.medal-entry.equipped.displayed {
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5), 0 0 12px rgba(33, 150, 243, 0.3);
}

.medal-info {
    flex: 1;
    min-width: 0;
}

.medal-top-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.medal-name {
    font-weight: bold;
    font-size: var(--font-standard);
    font-family: 'Ari9500';
    white-space: nowrap;
}

.medal-badge {
    font-size: 9px;
    padding: 0 4px;
    border-radius: 2px;
    font-family: 'Ari9500';
    line-height: 1.4;
    white-space: nowrap;
}
.badge-stats { background: rgba(76, 175, 80, 0.4); color: #81c784; }
.badge-shown { background: rgba(33, 150, 243, 0.4); color: #64b5f6; }
.badge-locked { background: rgba(255, 255, 255, 0.1); color: var(--theme-text-dim); }

.medal-desc {
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
    font-family: 'Ari9500';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.medal-stats-inline {
    font-size: var(--font-small);
    color: #81c784;
    font-family: 'Ari9500';
}

.medal-progress-compact {
    margin-top: 2px;
}

.medal-progress-text {
    color: var(--legendary-color);
    font-size: var(--font-small);
    font-family: 'Ari9500';
}

/* Medal progress bar */
.medal-progress-bar-wrapper {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-top: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.medal-progress-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
    min-width: 0;
}

.medal-progress-percent {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    font-family: 'Ari9500';
    line-height: 1;
}

.medal-actions {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}

.medal-actions button {
    padding: 2px 8px;
    font-size: var(--font-small);
    min-width: 50px;
    white-space: nowrap;
}

.medal-actions button.equipped-btn {
    background-color: #4CAF50;
    border-color: #66bb6a;
}

.medal-actions button.equipped-btn:hover {
    background-color: #388E3C;
}

.medal-section-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 10px;
    margin: 10px 0 6px 0;
    border-radius: 3px;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    color: #ffd700;
    border-left: 3px solid #ffd700;
}

.medal-section-header:first-child {
    margin-top: 0;
}

.achievement-info h4 { margin: 0 0 4px 0; font-size: var(--font-standard); font-family: 'Ari9500'; font-weight: bold; }
.achievement-info p { margin: 0; font-size: var(--font-standard); color: var(--theme-text-secondary); font-family: 'Ari9500'; }
.achievement-progress {
    width: 100%;
    background-color: var(--bar-bg);
    height: 8px;
    border-radius: 4px;
    margin-top: 4px;
}
.achievement-progress-fill {
    height: 100%;
    background-color: var(--exp-color);
    border-radius: 4px;
}
.achievement-reward button {
    padding: 5px 10px;
    font-size: var(--font-standard);
    margin: 0;
}
.achievement-reward button:disabled {
    background-color: var(--theme-slot-bg);
    color: var(--theme-text-dim);
    cursor: not-allowed;
}
.window-content-button, .option-item button {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, var(--theme-btn-top) 0%, var(--theme-btn-bottom) 100%);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    cursor: var(--cursor-pointer, pointer);
    font-size: var(--font-standard);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    margin: 0;
    border-radius: 3px;
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.window-content-button:hover, .option-item button:hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Hotbar slot assignment buttons */
.hotbar-slot-btn {
    padding: 15px 10px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.hotbar-slot-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
    border-color: var(--rare-color);
}

#fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9999; /* Ensures it's on top of all other game elements */
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when transparent */
    transition: opacity 0.25s ease-in-out;
}
#fade-overlay.active {
    opacity: 1;
    pointer-events: auto; /* Blocks clicks during the transition */
}

/* Fade overlay transition classes for character creation */
#fade-overlay.fade-to-black {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease-in-out;
}

#fade-overlay.fade-from-black {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

/* Welcome Popup */
#welcome-popup {
    pointer-events: auto;
}

#welcome-popup .window-title {
    cursor: default !important;
    pointer-events: none;
}

#settings-footer {
    margin-top: 8px;
    padding: 8px;
    border-top: 1px solid var(--ui-border);
    display: flex;
    justify-content: space-around;
    gap: 10px;
    background-color: var(--ui-bg);
    position: relative;
    /* ADD THIS LINE */
    z-index: 1;
    /* ADD THIS LINE */
}
#settings-footer button {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid var(--ui-border);
    background-color: var(--theme-btn-bottom);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    cursor: var(--cursor-pointer, pointer);
    font-size: var(--font-standard);
    box-shadow: 1px 1px #000;
    margin: 0;
    border-radius: 2px;
}
#settings-footer button:hover {
    background-color: var(--theme-btn-hover-top);
}    

/* --- Button Hover Effects --- */
/* For the main buttons like 'Create Character', 'Back', and 'Create New' */
#character-creation button:hover,
#character-selection-screen button:not(.pre-game-settings-btn):hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

/* --- SKY SCENE BACKGROUND (shared by all pre-game screens) --- */

#character-selection-screen,
#character-creation {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent; /* sky shows through from #menu-sky in #scaling-container */
    overflow: hidden;
    z-index: auto;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Cloud layer */
.sky-clouds-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sky-cloud {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* All title/pre-game clouds sit in the upper sky band — within ~20px of the
   top so they never drift down over the structures/ground (lots of negative
   space up top to fill). The cloud body hangs down from there. */
.cloud-1 {
    background-image: var(--cloud-1-url);
    width: 380px;
    height: 143px;
    top: 2px;
    animation: cloud-drift 35s linear infinite;
    animation-delay: -8s;
}

.cloud-2 {
    background-image: var(--cloud-2-url);
    width: 280px;
    height: 112px;
    top: 14px;
    animation: cloud-drift 50s linear infinite;
    animation-delay: -18s;
}

.cloud-3 {
    background-image: var(--cloud-3-url);
    width: 220px;
    height: 90px;
    top: 8px;
    animation: cloud-drift 28s linear infinite;
    animation-delay: -10s;
}

.cloud-4 {
    background-image: var(--cloud-2-url);
    width: 340px;
    height: 136px;
    top: 18px;
    animation: cloud-drift 62s linear infinite;
    animation-delay: -30s;
}

.cloud-5 {
    background-image: var(--cloud-1-url);
    width: 260px;
    height: 98px;
    top: 4px;
    animation: cloud-drift 44s linear infinite;
    animation-delay: -20s;
}

.cloud-6 {
    background-image: var(--cloud-3-url);
    width: 420px;
    height: 172px;
    top: 12px;
    animation: cloud-drift 70s linear infinite;
    animation-delay: -42s;
}

.cloud-7 {
    background-image: var(--cloud-2-url);
    width: 190px;
    height: 76px;
    top: 6px;
    animation: cloud-drift 38s linear infinite;
    animation-delay: -6s;
}

.cloud-8 {
    background-image: var(--cloud-1-url);
    width: 300px;
    height: 113px;
    top: 16px;
    animation: cloud-drift 55s linear infinite;
    animation-delay: -47s;
}

@keyframes cloud-drift {
    from { transform: translateX(-350px); }
    to   { transform: translateX(2500px); }
}

/* ─────────────────────────────────────────────────────────────
   SHARED PRE-GAME SCENE BACKGROUND
   ───────────────────────────────────────────────────────────── */
.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.scene-bluesky-layer {
    position: absolute; left: 0; right: 0; bottom: 96px; height: 256px;
    background-image: var(--bluesky-url, none);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center bottom;
    image-rendering: pixelated;
}
.scene-grass-layer {
    position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
    background-image: var(--tileset-url, none);
    background-repeat: repeat-x;
    background-position: -96px 0;
    background-size: 864px 768px;
    image-rendering: pixelated;
}
.scene-deco { position: absolute; bottom: 80px; image-rendering: pixelated; pointer-events: none; }
.scene-deco.flower-l  { left: 180px;  width: 32px; height: 32px; background-image: var(--flower-url,  none); background-size: contain; background-repeat: no-repeat; }
.scene-deco.flower-r  { right: 220px; width: 32px; height: 32px; background-image: var(--flower-url,  none); background-size: contain; background-repeat: no-repeat; }
.scene-deco.foliage-1 { left: 480px;  width: 64px; height: 64px; background-image: var(--foliage-url, none); background-size: contain; background-repeat: no-repeat; }
.scene-deco.foliage-2 { right: 480px; width: 64px; height: 64px; background-image: var(--foliage-url, none); background-size: contain; background-repeat: no-repeat; }
.scene-deco.foliage-3 { left: 80px;   width: 64px; height: 64px; background-image: var(--foliage-url, none); background-size: contain; background-repeat: no-repeat; }

/* ─────────────────────────────────────────────────────────────
   TITLE SCREEN
   ───────────────────────────────────────────────────────────── */
.title-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 5;
    padding-bottom: 100px;
}
.title-card-frame {
    animation: title-bob 4s ease-in-out infinite;
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.5));
}
#start-title-card { width: 616px; height: 147px; image-rendering: pixelated; }

@keyframes title-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.press-key {
    margin-top: 56px;
    font-family: 'Ari9500'; font-weight: bold; font-size: 16px;
    color: #fff; letter-spacing: 4px;
    text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0,0,0,.5);
    background: rgba(34, 32, 52, .7);
    border: 2px solid #fff;
    padding: 10px 28px;
    box-shadow: 2px 2px 0 rgba(0,0,0,.5);
    animation: press-pulse 1.6s ease-in-out infinite;
    cursor: var(--cursor-pointer, pointer);
}
@keyframes press-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.corner-stamp {
    position: absolute;
    font-size: 11px; font-family: 'Ari9500'; letter-spacing: 1px;
    color: #fff; text-shadow: 1px 1px 0 #000;
    z-index: 6;
}
.corner-stamp.tl { top: 18px; left: 22px; opacity: .85; }
.corner-stamp.tr { top: 8px; right: 10px; color: var(--exp-color); font-weight: bold; }
.corner-stamp.bl { bottom: 16px; left: 22px; opacity: .85; }
.corner-stamp.br { bottom: 16px; right: 22px; opacity: .85; }

.playtest-badge {
    position: absolute; top: 30px; right: 50%; transform: translateX(50%) rotate(-3deg);
    background: #c0392b; color: #fff8d8; padding: 5px 16px;
    font-size: 11px; letter-spacing: 3px; font-weight: bold;
    border: 2px solid #4a2611; box-shadow: 2px 2px 0 rgba(0,0,0,.4);
    text-shadow: 1px 1px 0 #4a2611;
    z-index: 7;
}

/* ─────────────────────────────────────────────────────────────
   MAIN MENU SCREEN
   ───────────────────────────────────────────────────────────── */
#main-menu-screen {
    position: absolute;
    width: 100%; height: 100%;
    background: transparent; /* sky shows through from #menu-sky in #scaling-container */
    z-index: auto;
    display: none;
    overflow: hidden;
}
.menu-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 5;
    padding-bottom: 80px;
}
.menu-brand { margin-bottom: 36px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.45)); }
#menu-title-card { width: 387px; height: 92px; image-rendering: pixelated; }

/* --- MAINTENANCE OVERLAY (matches the main-menu branding) --- */
#maintenance-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    overflow: hidden; background: #0a1420;
}
#maintenance-bg {
    position: absolute; inset: 0;
    /* bluesky sprite injected as a url() by the gate; gradient is the fallback */
    background-image: linear-gradient(180deg, #8ec9ee 0%, #bfe3f5 70%, #d8eef8 100%);
    background-size: 384px 768px; background-repeat: repeat-x; background-position: bottom left;
    image-rendering: pixelated;
}
.maintenance-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: 24px; padding-bottom: 56px;
}
#maintenance-title-card {
    width: min(440px, 74vw); height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,.45));
    margin-bottom: 34px;
}
.maintenance-panel {
    min-width: 320px; max-width: 92vw;
    padding: 26px 34px; text-align: center;
    /* Same 9-slice pixel frame as in-game windows (px vars are defined at
       :root, so they resolve even on the pre-boot maintenance gate) */
    background: var(--px-window-bg, #252337);
    border: 12px solid transparent;
    border-image: var(--px-frame-window, url('assets/ui/ui_window_9slice_x2.png')) 12 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window);
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.maintenance-status {
    font-family: 'Ari9500', sans-serif; font-weight: bold; font-size: 18px;
    letter-spacing: 3px; color: var(--theme-text-bright, #d8d6e8);
    text-shadow: 2px 2px 0 #000;
    display: flex; align-items: center; justify-content: center; gap: 11px;
    margin-bottom: 14px;
}
.maintenance-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--exp-color, #f1c40f); box-shadow: 0 0 8px var(--exp-color, #f1c40f);
    animation: maintenance-pulse 1.6s ease-in-out infinite;
}
@keyframes maintenance-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.maintenance-msg {
    font-family: 'Ari9500', sans-serif; font-size: 13px; line-height: 1.9;
    color: var(--theme-text-secondary, #a09cb8); letter-spacing: 1px; margin: 0;
}

.menu-stack {
    display: flex; flex-direction: column; min-width: 380px;
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 14px 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.menu-row {
    display: grid; grid-template-columns: 36px 1fr; align-items: center;
    padding: 13px 26px;
    color: var(--theme-text-body);
    font-family: 'Ari9500'; font-weight: bold; font-size: 20px;
    letter-spacing: 2px; text-shadow: 2px 2px 0 #000;
    cursor: var(--cursor-pointer, pointer);
    transition: background 0.1s ease;
}
.menu-row:hover { background: linear-gradient(90deg, rgba(241,196,15,.15) 0%, transparent 100%); color: #fff8d8; }
.menu-row .caret { color: var(--exp-color); opacity: 0; font-size: 16px; }
.menu-row.selected {
    background: linear-gradient(90deg, rgba(241,196,15,.20) 0%, transparent 100%);
    color: #fff8d8;
    border-left: 4px solid var(--exp-color);
    padding-left: 22px;
}
.menu-row.selected .caret { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   MAIN MENU — PLAY PANEL (logged-in state)
   Just the primary "enter the world" action, using the same in-game
   pixel-btn as the character-select screen's "ENTER WORLD" so the
   front-end reads as one consistent UI. Account access is the top-right
   pill (.account-pill), matching the other pre-game screens.
   ───────────────────────────────────────────────────────────── */
.menu-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: menuPlayIn .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hero-sized variant of .pixel-btn.primary — same gold, more presence. */
.menu-play-btn.menu-play-btn {
    font-size: 26px;
    letter-spacing: 4px;
    padding: 20px 66px;
    min-width: 300px;
    border-radius: 5px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(0, 0, 0, .28);
    transition: filter .14s ease, transform .1s ease;
}
.menu-play-btn.menu-play-btn:not(:disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    opacity: 1;
}
.menu-play-btn.menu-play-btn:not(:disabled):active {
    transform: translateY(1px);
    filter: brightness(.96);
}

@keyframes menuPlayIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .menu-play { animation: none; }
}

.account-pill {
    position: absolute; top: 22px; right: 22px;
    display: flex; align-items: center; gap: 8px;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    padding: 7px 14px;
    font-family: 'Ari9500'; font-size: 12px;
    color: var(--theme-text-secondary);
    box-shadow: 2px 2px 0 #000;
    z-index: 6; cursor: var(--cursor-pointer, pointer);
}
.account-pill .dot { width: 6px; height: 6px; background: var(--theme-text-dim); }
.account-pill.signed-in { color: var(--theme-text-bright); }
.account-pill.signed-in .dot { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.account-pill:hover { border-color: var(--ui-accent); color: var(--theme-text-bright); }

.pre-game-settings-btn {
    position: absolute; bottom: 22px; right: 22px;
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
    z-index: 6; cursor: var(--cursor-pointer, pointer);
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
    transition: filter 0.15s, opacity 0.15s;
}
.pre-game-settings-btn:hover {
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5)) brightness(1.25);
}
.pre-game-settings-btn .settings-icon-img {
    width: 48px;
    height: 48px;
}
.settings-icon-img {
    image-rendering: pixelated;
    display: block;
    width: 48px;
    height: 48px;
    filter: var(--settings-icon-filter);
    transition: filter 0.3s ease;
}

.menu-hint {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    font-family: 'Ari9500'; font-size: 11px; color: #fff; letter-spacing: 3px;
    text-shadow: 1px 1px 0 #000; z-index: 6; opacity: .85; white-space: nowrap;
}
.menu-hint kbd {
    background: var(--ui-bg); border: 1px solid var(--ui-border);
    padding: 2px 6px; font-family: 'Ari9500'; color: var(--theme-text-bright);
    margin: 0 4px; font-size: 10px; text-shadow: 1px 1px 0 #000;
}

/* --- INLINE AUTH PANEL (main menu, logged-out state) --- */

.menu-auth-panel {
    min-width: 380px;
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.menu-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--ui-border);
}

.menu-auth-tab {
    flex: 1;
    padding: 13px;
    background: none;
    border: none;
    color: var(--theme-text-body);
    font-family: 'Ari9500';
    font-size: 13px;
    letter-spacing: 2px;
    cursor: var(--cursor-pointer, pointer);
    text-shadow: 1px 1px 0 #000;
    transition: background 0.1s;
}

.menu-auth-tab:hover { background: rgba(255,255,255,0.05); color: var(--theme-text-bright); }

.menu-auth-tab.active {
    background: rgba(241,196,15,0.12);
    color: #fff8d8;
    box-shadow: inset 0 -2px 0 var(--exp-color);
}

.menu-auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 10px;
}

.menu-auth-input {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-size: 12px;
    padding: 10px 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.menu-auth-input:focus { border-color: var(--ui-accent); box-shadow: 0 0 5px rgba(108, 104, 149, 0.35); }
.menu-auth-input::placeholder { color: var(--theme-text-dim); }

.menu-auth-submit {
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
    padding: 12px;
}

.menu-auth-error {
    min-height: 16px;
    padding: 4px 20px 0;
    color: #e74c3c;
    font-family: 'Ari9500';
    font-size: 10px;
    text-align: center;
    line-height: 1.4;
}

.menu-auth-separator {
    display: flex;
    align-items: center;
    padding: 10px 20px 4px;
    gap: 10px;
}

.menu-auth-separator::before,
.menu-auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.12);
}

.menu-auth-separator span {
    font-family: 'Ari9500';
    font-size: 10px;
    color: var(--theme-text-dim);
    letter-spacing: 2px;
}

.menu-guest-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: var(--theme-text-secondary);
    font-family: 'Ari9500';
    font-size: 11px;
    letter-spacing: 2px;
    padding: 10px;
    margin: 0 20px 16px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.15s;
    text-shadow: 1px 1px 0 #000;
}

.menu-guest-btn:hover {
    border-color: rgba(255,255,255,0.45);
    color: var(--theme-text-bright);
    background: rgba(255,255,255,0.05);
}

/* --- CHARACTER SELECTION SCREEN --- */

.select-content {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center;
    padding: 56px 0 40px;
    overflow: hidden;
}
.select-header {
    font-family: 'Ari9500Display'; font-size: 32px; color: #fff;
    letter-spacing: 6px; text-shadow: 3px 3px 0 #000; margin-bottom: 24px;
    flex-shrink: 0;
}
.select-back { position: absolute; bottom: 24px; left: 28px; z-index: 6; }

.select-panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 6px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 600px;
    max-width: 900px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.select-title {
    font-family: 'Ari9500Display';
    color: var(--exp-color);
    text-shadow: 2px 2px #000;
    margin-bottom: 16px;
    font-size: var(--font-massive);
}

.char-card-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px;
}

/* When used as the scrollable character list */
#character-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
    padding: 12px 16px;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#character-list::-webkit-scrollbar { width: 6px; }
#character-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
#character-list::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 3px; }

.char-card {
    width: 240px;
    height: 360px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 2px solid var(--ui-border);
    box-shadow: 2px 2px 0 #000, 0 8px 24px rgba(0,0,0,.5);
    position: relative;
    cursor: var(--cursor-pointer, pointer);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.char-card:hover {
    border-color: var(--ui-accent);
}

.char-card.selected {
    border-color: var(--exp-color);
    box-shadow: 2px 2px 0 #000, 0 0 0 4px rgba(241,196,15,.3), 0 12px 32px rgba(0,0,0,.6);
    transform: translateY(-10px);
}

body.gamepad-active .char-card.gamepad-selected {
    border-color: var(--ui-accent);
    box-shadow: 2px 2px 0 #000, 0 0 0 4px rgba(108,104,149,.3), 0 12px 32px rgba(0,0,0,.6);
}

.card-portrait {
    flex: 1;
    background: linear-gradient(180deg, #1a5f99 0%, #3498db 100%);
    position: relative;
    border-bottom: 2px solid var(--ui-border);
    overflow: hidden;
}

/* Platform inside the card portrait is added via JS (see createCardAnimatedCanvas) */

.card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,.6);
    border: 1px solid #888;
    color: #bdc3c7;
    font-family: 'Ari9500';
    font-size: 12px;
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 0 #000;
    z-index: 3;
    cursor: var(--cursor-pointer, pointer);
    padding: 0;
}

.char-card:hover .card-delete {
    display: flex;
}

.card-name-banner {
    background: linear-gradient(180deg, rgba(69,66,110,.95), rgba(55,52,85,.95));
    color: var(--theme-text-bright);
    font-family: 'Ari9500Display';
    font-size: 18px;
    padding: 10px 12px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000;
    border-bottom: 1px solid var(--ui-border);
}

.card-meta {
    padding: 10px 14px 14px;
    display: grid;
    gap: 4px;
}

.card-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Ari9500';
    font-size: 12px;
}

.card-row .lbl {
    color: #888;
}

.card-row .val {
    color: var(--theme-text-bright);
    text-shadow: 1px 1px 0 #000;
}

.class-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid;
    font-family: 'Ari9500';
}

.class-badge.swordsman   { color: #e74c3c; border-color: #e74c3c; }
.class-badge.archer    { color: #27ae60; border-color: #27ae60; }
.class-badge.mage  { color: #3498db; border-color: #3498db; }
.class-badge.rogue     { color: #9b59b6; border-color: #9b59b6; }
.class-badge.engineer  { color: #f39c12; border-color: #f39c12; }
.class-badge.nightblade   { color: #e74c3c; border-color: #e74c3c; }
.class-badge.vanguard  { color: #c0392b; border-color: #c0392b; }
.class-badge.sorcerer    { color: #2980b9; border-color: #2980b9; }
.class-badge.invoker    { color: #5dade2; border-color: #5dade2; }
.class-badge.ninja  { color: #9b59b6; border-color: #9b59b6; }
.class-badge.bladedancer    { color: #8e44ad; border-color: #8e44ad; }
.class-badge.scout    { color: #27ae60; border-color: #27ae60; }
.class-badge.ballista { color: #1e8449; border-color: #1e8449; }
.class-badge.gunsmith  { color: #d68910; border-color: #d68910; }
.class-badge.technician { color: #f39c12; border-color: #f39c12; }

/* Pixel-art class/job icon rendered from the classIcons spritesheet */
.class-icon-sprite {
    display: inline-block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* Advancement path section inside creation blurb */
.blurb-advancements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 4px;
}

.advancement-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.advancement-card .adv-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.advancement-card .adv-name {
    font-family: 'Ari9500Display';
    font-size: 11px;
    text-shadow: 1px 1px 0 #000;
}

.advancement-card .adv-lore {
    font-family: 'Ari9500';
    font-size: 8px;
    color: var(--theme-text-secondary);
    line-height: 1.7;
    letter-spacing: 1px;
}

.blurb-adv-label {
    font-family: 'Ari9500';
    font-size: 8px;
    color: #888;
    letter-spacing: 2px;
    margin-top: 6px;
}

.empty-card {
    width: 240px;
    height: 360px;
    border: 2px dashed rgba(255,255,255,.55);
    background: rgba(34,32,52,.55);
    cursor: var(--cursor-pointer, pointer);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Ari9500';
    font-size: 14px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #000;
    transition: all 0.15s ease;
}

.empty-card:hover {
    background: rgba(108,104,149,.2);
    border-color: var(--exp-color);
    color: var(--exp-color);
}

.empty-card .plus {
    font-family: 'Ari9500Display';
    font-size: 56px;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1;
}

.empty-card:hover .plus {
    color: var(--exp-color);
}

.select-actions {
    display: flex;
    gap: 14px;
    margin-top: 20px;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.pixel-btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(180deg, var(--theme-btn-top) 0%, var(--theme-btn-bottom) 100%);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-weight: bold;
    font-size: 16px;
    border: 1px solid var(--ui-accent);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: var(--cursor-pointer, pointer);
    text-shadow: 1px 1px 0 #000;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.pixel-btn.primary {
    background: linear-gradient(180deg, #c89c4a 0%, #8a6418 100%);
    border-color: #f1c40f;
    color: #fff8d8;
}

.pixel-btn.ghost {
    background: rgba(34,32,52,0.7);
    border-color: #888;
    color: #bdc3c7;
}

.pixel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pixel-btn:not(:disabled):hover {
    opacity: 0.85;
}

.select-secondary-btns {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- CHARACTER CREATION SCREEN --- */

/* Boost secondary buttons inside creation and selection panels */
.create-panel .pixel-btn.ghost,
#character-selection-screen .pixel-btn.ghost {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
    border-color: var(--ui-accent);
    color: var(--theme-text-bright);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 1px 1px 0 #000;
    opacity: 1;
}
.create-panel .pixel-btn.ghost:not(:disabled):hover,
#character-selection-screen .pixel-btn.ghost:not(:disabled):hover {
    filter: brightness(1.25);
    opacity: 1;
}
.create-panel .randomize-btn {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
    border: 1px solid var(--ui-accent);
    color: var(--theme-text-bright);
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.create-panel .randomize-btn:hover {
    filter: brightness(1.25);
}

.create-root {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 24px 32px;
}

.create-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
}

.create-header h2 {
    font-family: 'Ari9500Display';
    font-size: 22px;
    color: var(--theme-text-bright);
    text-shadow: 2px 2px 0 #000;
    margin: 0;
    letter-spacing: 4px;
}

.create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    min-height: 0;
}

.create-panel {
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.create-panel .panel-title {
    margin: 0;
    font-family: 'Ari9500Display';
    font-size: 13px;
    color: var(--exp-color);
    letter-spacing: 4px;
}

.panel-spacer { flex: 1; }

.panel-btn { width: 100%; box-sizing: border-box; padding: 8px 0; text-align: center; }

.class-destiny-blurb {
    font-family: 'Ari9500';
    font-size: 9px;
    color: var(--theme-text-secondary);
    line-height: 1.9;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blurb-excellent-hint {
    padding: 10px 12px;
    background: rgba(255, 200, 50, 0.1);
    border: 1px solid var(--legendary-color);
    color: var(--theme-text-secondary);
    font-family: 'Ari9500';
    font-size: 9px;
    line-height: 1.9;
    letter-spacing: 1px;
}

.blurb-hint-star {
    font-family: 'Ari9500Display';
    font-size: 10px;
    color: var(--legendary-color);
    text-shadow: 0 0 6px rgba(255,200,50,0.6);
    letter-spacing: 2px;
}

.blurb-entry {
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.blurb-class-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.class-destiny-blurb .blurb-class {
    font-family: 'Ari9500Display';
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}

.blurb-lore {
    margin: 0;
    font-family: 'Ari9500';
    font-size: 9px;
    color: var(--theme-text-secondary);
    line-height: 1.9;
    letter-spacing: 1px;
}

.class-lore {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    font-family: 'Ari9500';
    font-size: 9px;
    color: rgba(255,255,255,0.85);
    text-shadow: 1px 1px 0 #000;
    line-height: 1.8;
    letter-spacing: 1px;
    background: none;
    text-align: center;
    z-index: 3;
    min-height: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.stage {
    position: relative;
}

/* Platform — small grass-topped platform from the in-game tileset.
   Three tile parts: left edge (16px), repeating center, right edge (16px).
   Source tile is 16x16; we render at 4x = 64px tall. */
.platform {
    position: absolute;
    display: flex;
    height: 64px;
    z-index: 1;
    image-rendering: pixelated;
    pointer-events: none;
}
.platform-tile {
    height: 100%;
    background-image: var(--tileset-url);
    background-size: 576px 512px;     /* tileset is 144x128, scaled 4x */
    background-repeat: no-repeat;
    image-rendering: pixelated;
}
.platform-left   { width: 64px; background-position:     0 0; }              /* platformGrassLeft   (src x:0)  */
.platform-right  { width: 64px; background-position: -128px 0; }             /* platformGrassRight  (src x:32) */
.platform-center { width: 64px; background-position:  -64px 0; background-repeat: no-repeat; } /* platformGrassCenter (src x:16) */

.platform.stage-platform {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px; /* 64(L) + 3×64(C) + 64(R) */
    height: 64px;
    z-index: 2;
}
.platform.card-platform {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 192px; /* 64(L) + 1×64(C) + 64(R) */
    height: 64px;
    z-index: 2;
}

.sky-tower {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 192px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    height: 274px; /* cap(64) + column(210) fills to character feet */
}

.sky-tower-cap {
    display: flex;
    height: 64px;
    width: 192px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.sky-tower-column {
    width: 52px;
    flex: 1;
    background: linear-gradient(180deg, #6b4c2a 0%, #3e2a10 100%);
    border-left: 4px solid #9a7040;
    border-right: 4px solid #2e1c08;
    image-rendering: pixelated;
}

/* Anchored to #character-creation, which shares its box with #creation-structure-canvas,
   so these coordinates are the canvas's own (the #scaling-container layout box is a
   fixed 1366x768 — see its rule — so bottom-anchoring can't drift from the drawn scene).
   renderSkyScene() draws the central tower with its walkable top at canvas y = H - 280,
   and the in-game player sprite's canvas bottom edge IS its feet (see the sprite canvas
   offset in render()). bottom: 274px sinks the feet 6px (2 art px) into the tile's grass
   fringe, matching how entities read against grass tops in-game.
   It previously lived inside .stage (position: relative), where this offset was measured
   from the panel grid — a box that moves with padding and responsive overrides — which
   left the hero sunk into the tower. */
#character-preview-area {
    position: absolute;
    bottom: 274px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
    image-rendering: pixelated;
}

/* The sprite canvas is the hero's feet, so it must be the box's bottom edge. As an
   inline element it sat on the text baseline, leaving 3px of descender beneath it
   and floating the hero just off the tower. */
#character-preview-area canvas {
    display: block;
}

/* Destiny ribbon — color-coded class hint that updates as stats roll */
.destiny-ribbon {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bar-bg);
    border: 3px solid var(--ui-border);
    color: var(--theme-text-secondary);
    font-family: 'Ari9500Display';
    font-size: 18px;
    letter-spacing: 6px;
    padding: 8px 28px;
    text-shadow: 2px 2px 0 #000;
    box-shadow: 2px 2px 0 #000;
    z-index: 4;
    text-align: center;
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.destiny-ribbon small {
    display: block;
    font-family: 'Ari9500';
    font-size: 9px;
    color: var(--theme-text-dim);
    letter-spacing: 4px;
    margin-bottom: 4px;
    text-shadow: 1px 1px 0 #000;
}

.control-book {
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 3px solid var(--ui-border);
    box-shadow: 2px 2px 0 #000, 0 12px 32px rgba(0,0,0,.5);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
}

.book-section {
    padding: 16px 20px;
    border-right: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.book-section h3 {
    margin: 0;
    font-family: 'Ari9500Display';
    font-size: 13px;
    color: var(--exp-color);
    letter-spacing: 4px;
}

.name-row {
    display: flex;
    gap: 8px;
}

.field-input {
    flex: 1;
    background: var(--bar-bg);
    border: 2px solid var(--ui-border);
    color: var(--theme-text-bright);
    padding: 8px 10px;
    font-family: 'Ari9500';
    font-size: 14px;
}

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

.stat-die {
    background: linear-gradient(180deg, var(--theme-btn-top), var(--theme-btn-bottom));
    border: 2px solid var(--ui-accent);
    box-shadow: 2px 2px 0 #000;
    padding: 8px 0;
    text-align: center;
}

.stat-die .name {
    font-family: 'Ari9500';
    font-size: 9px;
    color: #bdc3c7;
    letter-spacing: 2px;
}

.stat-die .val {
    font-family: 'Ari9500Display';
    font-size: 26px;
    color: var(--exp-color);
    text-shadow: 2px 2px 0 #000;
    line-height: 1.1;
}

.roll-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #c89c4a 0%, #8a6418 100%);
    border: 2px solid #f1c40f;
    color: #fff8d8;
    font-family: 'Ari9500';
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 3px;
    text-shadow: 1px 1px 0 #4a3506;
    box-shadow: 2px 2px 0 #000;
    cursor: var(--cursor-pointer, pointer);
}

.roll-btn:hover {
    background: linear-gradient(180deg, #d4aa56 0%, #9a7428 100%);
}

.appear-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.appear-row .lbl {
    font-family: 'Ari9500';
    font-size: 9px;
    color: #bdc3c7;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.carousel {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: stretch;
    gap: 0;
    background: var(--bar-bg);
    border: 2px solid var(--ui-border);
}

.carousel .arrow {
    background: var(--theme-btn-top);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-weight: bold;
    text-align: center;
    line-height: 38px;
    font-size: 12px;
    border: none;
    cursor: var(--cursor-pointer, pointer);
    padding: 0;
}

.carousel .arrow:hover {
    background: var(--theme-btn-hover-top);
}

.carousel .value {
    text-align: center;
    line-height: 38px;
    font-family: 'Ari9500';
    font-size: 13px;
    color: var(--theme-text-bright);
}

.palette-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bar-bg);
    border: 2px solid var(--ui-border);
    padding: 8px;
}

.palette-chip {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    cursor: var(--cursor-pointer, pointer);
    padding: 0;
    flex-shrink: 0;
}

.palette-chip:hover {
    transform: scale(1.2);
    border-color: #fff;
    z-index: 1;
    position: relative;
}

.palette-chip.selected {
    outline: 2px solid var(--exp-color);
    outline-offset: 1px;
    z-index: 2;
    position: relative;
}

/* ── Color Picker Widget ── */
.color-picker-widget {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.cpw-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cpw-grad-wrap {
    position: relative;
    cursor: crosshair;
    width: 100%;
}

.cpw-grad-canvas {
    display: block;
    width: 100%;
    height: 36px;
    border: 1px solid var(--ui-border);
    image-rendering: pixelated;
}

.cpw-hue-wrap {
    position: relative;
    cursor: crosshair;
    width: 100%;
}

.cpw-hue-canvas {
    display: block;
    width: 100%;
    height: 12px;
    border: 1px solid var(--ui-border);
    image-rendering: pixelated;
}

.cpw-grad-cursor {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cpw-hue-cursor {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    background: rgba(255,255,255,0.9);
    border: 1px solid #000;
    transform: translateX(-50%);
    pointer-events: none;
}

.cpw-preview-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cpw-swatch {
    width: 26px;
    height: 26px;
    border: 1px solid var(--ui-border);
    flex-shrink: 0;
}

.cpw-hex-input {
    flex: 1;
    background: var(--bar-bg);
    border: 1px solid var(--ui-border);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-size: 9px;
    padding: 4px 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    min-width: 0;
}

.cpw-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    background: var(--bar-bg);
    border: 2px solid var(--ui-border);
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
}

.cpw-presets .palette-chip {
    width: 20px;
    height: 20px;
    flex: none;
}



.book-actions {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    min-width: 200px;
    background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.4));
}

.randomize-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, var(--theme-btn-top) 0%, var(--theme-btn-bottom) 100%);
    border: 2px solid var(--ui-accent);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-size: 12px;
    letter-spacing: 2px;
    box-shadow: 2px 2px 0 #000;
    cursor: var(--cursor-pointer, pointer);
    text-shadow: 1px 1px 0 #000;
}

.randomize-btn:hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
}

.action-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dice-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: var(--font-standard);
    cursor: var(--cursor-pointer, pointer);
    background: linear-gradient(180deg, var(--theme-btn-top), #333);
    border: 1px solid var(--ui-border);
    color: var(--theme-text-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px #000;
    flex-shrink: 0;
}

.dice-btn:hover {
    background: linear-gradient(180deg, #666, #444);
}

#character-name {
    width: 100%;
    box-sizing: border-box;
}

/* CREATE button: always visible. (Was previously hidden until stats rolled.) */
#start-game-btn { visibility: visible; }

/* Stretch action buttons to fill their panel column */
.action-stack .pixel-btn, .panel-btn { width: 100%; box-sizing: border-box; padding: 12px 0; text-align: center; }
.book-actions .randomize-btn, .create-panel .randomize-btn { width: 100%; }

/* Last book section has no right border */
.control-book .book-section:last-of-type { border-right: none; }

/* Universal gamepad selection styling - visible when gamepad is connected */
body.gamepad-active .inventory-slot.gamepad-selected,
body.gamepad-active .equipment-slot.gamepad-selected,
body.gamepad-active .skill-item.gamepad-selected,
body.gamepad-active .skill-node.gamepad-selected,
body.gamepad-active .stat-add-btn.gamepad-selected,
body.gamepad-active .quest-item.gamepad-selected,
body.gamepad-active .monster-entry.gamepad-selected,
body.gamepad-active .achievement-item.gamepad-selected,
body.gamepad-active .shop-item.gamepad-selected,
body.gamepad-active button.gamepad-selected,
body.gamepad-active input.gamepad-selected,
body.gamepad-active select.gamepad-selected {
    outline: 2px solid var(--ui-accent);
    box-shadow: 0 0 10px rgba(108, 104, 149, 0.5);
    background-color: rgba(108, 104, 149, 0.1);
}

/* Virtual mouse cursor */
#virtual-mouse-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 99999;
    display: none;
    background: rgba(255, 215, 0, 0.8);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.6);
    animation: pulse-cursor 1s infinite;
    transition: opacity 0.3s ease-out, transform 0.15s ease-out;
    transform-origin: center center;
}

/* Show cursor when gamepad is active */
.gamepad-active #virtual-mouse-cursor {
    display: block !important;
    /* Opacity is controlled by JavaScript based on left stick movement */
}

@keyframes pulse-cursor {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.6); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 10px rgba(255, 255, 255, 0.8); }
}

/* Virtual Keyboard */
#virtual-keyboard {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.98);
    border: 2px solid var(--legendary-color);
    border-radius: 10px;
    padding: 15px;
    z-index: 100000;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
    min-width: 600px;
    font-family: 'Ari9500', cursive;
}

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

#virtual-keyboard-input-display {
    color: #ffffff;
    font-size: var(--font-standard);
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    min-height: 30px;
    margin-right: 10px;
}

#virtual-keyboard-close {
    background: var(--hp-color);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: var(--cursor-pointer, pointer);
    font-size: 18px;
    transition: all 0.2s;
}

#virtual-keyboard-close:hover {
    background: #e74c3c;
    transform: scale(1.1);
}

.virtual-keyboard-keys {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.virtual-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.virtual-keyboard-key {
    background: linear-gradient(135deg, #3a3a50 0%, #2a2a40 100%);
    border: 2px solid var(--ui-border);
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 5px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.15s;
    font-size: var(--font-standard);
    min-width: 45px;
    text-align: center;
    user-select: none;
}

.virtual-keyboard-key:hover {
    background: linear-gradient(135deg, #4a4a60 0%, #3a3a50 100%);
    border-color: var(--legendary-color);
    transform: translateY(-2px);
}

.virtual-keyboard-key.selected {
    background: linear-gradient(135deg, var(--legendary-color) 0%, #cc9900 100%);
    border-color: #ffffff;
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: pulse-key 1s infinite;
}

.virtual-keyboard-key.wide-key {
    min-width: 120px;
    padding: 12px 30px;
}

@keyframes pulse-key {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 1); }
}

/* Radial Menu */
#gamepad-radial-menu {
    display: none;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.radial-menu-item {
    transition: all 0.2s ease;
    font-family: Arial, sans-serif;
}

.radial-menu-item:hover {
    cursor: var(--cursor-pointer, pointer);
}

/* Gamepad Dropdown Mapping Styles */
.gamepad-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.gamepad-dropdown-item {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #2a2a2a;
    border-radius: 6px;
    border: 1px solid #3a374f;
}

.gamepad-dropdown-item.locked {
    opacity: 0.6;
    background: #252525;
}

.gamepad-button-label {
    font-weight: bold;
    color: #fff;
    font-size: var(--font-small);
}

.gamepad-action-select {
    padding: 6px 10px;
    background: #1a1a1a;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: #ffd700;
    font-size: var(--font-small);
    cursor: var(--cursor-pointer, pointer);
    font-family: inherit;
}

.gamepad-action-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #151515;
}

.gamepad-action-select:hover:not(:disabled) {
    border-color: #ffd700;
    background: var(--bar-bg);
}

.gamepad-duplicate-warning {
    color: #e74c3c;
    font-size: var(--font-small);
    font-weight: bold;
}

#player {
    position: absolute;
    width: 60px;
    height: 60px;
    /* z-index:auto (not 10) so #player does NOT form a stacking context. The sprite container
       carries the player's depth (10, below foliage-foreground z-11) while the overhead UI
       children (nameplate/HP bar/medals/cooldowns, z-13) can paint ABOVE the foliage.
       IMPORTANT: never set opacity on #player — opacity<1 forces a stacking context and buries
       the element under the foliage-foreground canvas (z-11). Animate #player-sprite-container. */
    z-index: auto;
    pointer-events: none;
}
/* Sprite renders at the player's depth — below foliage-foreground (z-11), above monsters (z-9).
   Opacity transitions live here so #player never gains a stacking context. */
#player-sprite-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    transition: opacity 0.1s linear;
}
#player-hp-bar-container {
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: var(--theme-slot-bg);
    border: 1px solid black;
    border-radius: 3px;
    z-index: 13; /* above foliage-foreground (z-11) */
    display: none;
}
#player-hp-bar-fill {
    height: 100%;
    background-color: var(--hp-color);
    border-radius: 2px;
    transition: width 0.2s linear;
}
/* Overhead stack: name, guild, then medals in one vertical column so they can
   never overlap or reorder. Anchored where the old nameplate sat (top: 60px);
   children flow top-to-bottom in DOM order (Name -> Guild -> Stat/Show medals). */
#player-overhead-stack {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 13; /* above foliage-foreground (z-11) */
    pointer-events: none;
}

#player-nameplate {
    color: white;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    image-rendering: pixelated;
    line-height: 1;
}

.npc-nameplate {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #f1c40f;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    image-rendering: pixelated;
}

.npc.pixel-art .npc-nameplate {
    top: 98px;
}

/* Player-sprite NPCs have same positioning as ghost players */
.npc.player-sprite .npc-nameplate {
    top: 60px;
}

.monster-nameplate {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-small);
    font-family: 'Ari9500';
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    padding: 4px 8px;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    image-rendering: pixelated;
    display: none;
    filter: none;
}

#guild-nameplate {
    /* Second row of #player-overhead-stack (no absolute offset needed) */
    color: white;
    /* A light blue color for the guild name */
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    display: none;
    /* Aligns the icon and text side-by-side */
    align-items: center;
    gap: 4px;
    image-rendering: pixelated;
    line-height: 1;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    /* Adds a small space between the icon and name */
}

#guild-icon {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
}
.weapon-glow-blue .pixel-art {
    filter: drop-shadow(0 0 1px #00ccff) drop-shadow(0 0 0.5px #66ddff);
    animation: glow-blue-anim 2.5s ease-in-out infinite alternate;
}
.weapon-glow-red .pixel-art {
    filter: drop-shadow(0 0 1px #ff4444) drop-shadow(0 0 0.5px #ff7777);
    animation: glow-red-anim 2s ease-in-out infinite alternate;
}
.weapon-glow-green .pixel-art {
    filter: drop-shadow(0 0 1px #44ff44) drop-shadow(0 0 0.5px #77ff77);
    animation: glow-green-anim 1.8s ease-in-out infinite alternate;
}
.weapon-glow-rainbow .pixel-art {
    animation: glow-rainbow-anim 2s ease-in-out infinite;
}
@keyframes glow-green-anim {
    from { filter: drop-shadow(0 0 0.5px #44ff44) drop-shadow(0 0 0.25px #77ff77); }
    to { filter: drop-shadow(0 0 1.5px #44ff44) drop-shadow(0 0 1px #77ff77); }
}
@keyframes glow-rainbow-anim {
    0% { filter: drop-shadow(0 0 2px #ff6464) drop-shadow(0 0 1px #ff6464); }
    16% { filter: drop-shadow(0 0 2px #ffc832) drop-shadow(0 0 1px #ffc832); }
    33% { filter: drop-shadow(0 0 2px #64ff64) drop-shadow(0 0 1px #64ff64); }
    50% { filter: drop-shadow(0 0 2px #64c8ff) drop-shadow(0 0 1px #64c8ff); }
    66% { filter: drop-shadow(0 0 2px #b464ff) drop-shadow(0 0 1px #b464ff); }
    83% { filter: drop-shadow(0 0 2px #ff64c8) drop-shadow(0 0 1px #ff64c8); }
    100% { filter: drop-shadow(0 0 2px #ff6464) drop-shadow(0 0 1px #ff6464); }
}
@keyframes glow-blue-anim {
    from { filter: drop-shadow(0 0 0.5px #00ccff) drop-shadow(0 0 0.25px #66ddff); }
    to { filter: drop-shadow(0 0 1.5px #00ccff) drop-shadow(0 0 1px #66ddff); }
}
@keyframes glow-red-anim {
    from { filter: drop-shadow(0 0 0.5px #ff4444) drop-shadow(0 0 0.25px #ff7777); }
    to { filter: drop-shadow(0 0 1.5px #ff4444) drop-shadow(0 0 1px #ff7777); }
}
#portal-charge-bar-container {
    position: absolute;
    top: -25px; /* Position it above the HP bar */
    left: 0;
    width: 100%;
    height: 8px;
    background-color: var(--bar-bg); /* Dark background */
    border: 1px solid black;
    border-radius: 3px;
    display: none; /* Hide it by default */
    z-index: 11;
}

#portal-charge-bar-fill {
    height: 100%;
    width: 0%; /* Start at 0% */
    background-color: #9b59b6; /* A magical purple color */
    border-radius: 2px;
}

#charge-skill-bar-container {
    position: absolute;
    top: -35px;
    left: -10px;
    width: 120%;
    height: 10px;
    background-color: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    display: none;
    z-index: 12;
    overflow: visible;
}

#charge-skill-bar-fill {
    height: 100%;
    width: 0%;
    background-color: #3498db;
    border-radius: 3px;
    transition: width 0.05s linear, background-color 0.2s;
}

#charge-skill-bar-label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-family: 'PressStart2P', monospace;
    color: #f1c40f;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
    pointer-events: none;
    z-index: 13;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 168px;
    background-color: transparent;
    background-repeat: repeat-x;
    z-index: 5;
}
.platform {
    position: absolute;
    height: 20px;
    background-color: transparent;
    border: none;
    z-index: 5;
}
#ui-container {
    position: absolute;
    bottom: 5px; /* Reverted back to original position */
    left: 0;
    width: 100%;
    z-index: 100;
    display: none;
}
/* Floating panel holding the class power meter (top) + skill hotbar (bottom) */
#hotbar-stack {
    position: absolute;
    bottom: 125px;
    right: 10px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    border-radius: 0;
    /* Tight interior like the other pixel windows: the 12px frame art
       already provides the visual margin, so keep inner padding minimal. */
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#skill-hotbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.hotbar-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Gamepad mode: single row with larger slots */
.hotbar-gamepad-mode {
    gap: 12px;
}

.hotbar-gamepad-mode .skill-slot {
    width: 50px;
    height: 50px;
}

.hotbar-gamepad-mode .hotkey-num {
    font-size: var(--font-small);
    font-weight: bold;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Drag and Drop Styles */
.hotbar-drop-zone {
    transition: all 0.2s ease;
}

.hotbar-drop-zone.drag-over {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dashed #fff;
    transform: scale(1.05);
}

.skill-slot[draggable="true"] {
    cursor: var(--cursor-resize, grab);
}

.skill-slot[draggable="true"]:active {
    cursor: var(--cursor-resize, grabbing);
}

.inventory-slot[draggable="true"] {
    cursor: var(--cursor-resize, grab);
}

.inventory-slot[draggable="true"]:active {
    cursor: var(--cursor-resize, grabbing);
}

.skill-node[draggable="true"] {
    cursor: var(--cursor-resize, grab);
}

.skill-node[draggable="true"]:active {
    cursor: var(--cursor-resize, grabbing);
}
#main-ui-bar {
    position: relative;
    z-index: 50; /* Below game windows (10002) so chat/UI bar don't obstruct them */
    background: var(--ui-bg);
    border-top: 2px solid var(--ui-border);
    padding: 5px;
    box-sizing: border-box;
    font-size: var(--font-standard);
}
#ui-layout {
    position: relative;
    z-index: 2; /* Above chat-log-container blur (z-index:1) */
    display: grid;
    grid-template-columns: 80px auto 1fr auto auto;
    gap: 10px;
    align-items: center;
}

#player-info-ui {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    text-align: left;
    white-space: nowrap;
}

#player-name-ui {
    font-size: var(--font-header);
    font-weight: bold;
    color: var(--exp-color);
    text-shadow: 1px 1px #000;
}

#player-class-ui {
    font-size: var(--font-large);
    color: #fff;
    text-shadow: 1px 1px #000;
}
#player-portrait {
    width: 64px;
    height: 64px;
    margin-left: 15px;
    background: #1c2833;
    border: 2px solid var(--ui-border);
    position: relative;
    /* Add these three lines to center the icon */
    display: flex;
    align-items: center;
    justify-content: center;
}
#player-level-ui {
    position: absolute;
    bottom: -12px;
    left: -2px;
    background: #000;
    border: 2px solid var(--ui-border);
    border-top-right-radius: 5px;
    padding: 4px 8px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;

}
#player-buff-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 12; /* On top of the player sprite */
}
#player-buff-effects svg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible; /* Allows effects to draw outside the box */
}
/* Match buff effect SVG positioning for remote/other players */
.remote-buff-effects svg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
}
@keyframes buff-pulse {
    0% { opacity: 0.8; transform: scale(0.95); }
    50% { opacity: 0.4; transform: scale(1.05); }
    100% { opacity: 0.8; transform: scale(0.95); }
}
@keyframes buff-swirl {
    from { transform: rotate(0deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1.1); }
}
.iron-will-effect {
    animation: buff-pulse 2s infinite ease-in-out;
}
.haste-effect {
    animation: buff-swirl 1.5s linear infinite;
}
.ui-bar {
    background: var(--bar-bg);
    border: 1px solid #000;
    border-radius: 5px;
    height: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.ui-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.2s ease-out;
}
.ui-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px #000;
    width: 100%;
    text-align: center;
    font-size: var(--font-standard);
    font-weight: bold;
}

/* ── Combat identity — pill tab anchored above the HP bar, centred on the bars column ── */
/* Combat identity tab — grows out of the right side of the HP/MP bars area */
#player-stats-bars {
    position: relative;
}
#combat-identity-column {
    position: absolute;
    bottom: calc(100% + 5px); /* its own bar, lifted a few px above the UI bar */
    right: 0;
    width: 38.5%;
    height: 28px;
    z-index: 3;
}
#combat-identity-column:empty {
    display: none;
}
#combat-identity-bar {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: var(--cursor-pointer, pointer);
    background: var(--ui-bg);
    /* Fully capped, self-contained bar (like #hotbar-stack) */
    border: 2px solid var(--ui-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Class-power label on the left of the tab */
#combat-identity-label {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    z-index: 2;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-small);
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    pointer-events: none;
    white-space: nowrap;
}
/* Horizontal fill — grows left-to-right */
#combat-identity-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 0.2s ease-out;
}
/* Segment divider lines (e.g. the 5 chambers) */
#combat-identity-segments {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.ci-seg-line {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 1px;
    background: rgba(0, 0, 0, 0.45);
}
#combat-identity-text {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    z-index: 2;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-small);
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    pointer-events: none;
    white-space: nowrap;
}
/* At max: a soft class-coloured glow + gentle pulse */
#combat-identity-bar.at-max {
    box-shadow: 0 0 6px var(--ci-color, #fff), 0 0 10px var(--ci-color, #fff);
}
#combat-identity-bar.at-max #combat-identity-fill {
    animation: ci-max-pulse 0.9s ease-in-out infinite;
}
@keyframes ci-max-pulse {
    0%, 100% { filter: brightness(1.1); }
    50% { filter: brightness(1.55); }
}

/* Armed state (Mana Surge / Faith empowered next spell is loaded): the whole
   bar fills with the class colour and pulses, and the label reads CHARGED! /
   SMITE READY! — so the payoff window is unmistakable until you unleash it. */
#combat-identity-bar.ci-armed {
    box-shadow: 0 0 8px var(--ci-color, #fff), 0 0 16px var(--ci-color, #fff);
    animation: ci-armed-pulse 0.7s ease-in-out infinite;
}
#combat-identity-bar.ci-armed #combat-identity-fill {
    width: 100% !important;
    background: var(--ci-color, #fff) !important;
}
#combat-identity-bar.ci-armed #combat-identity-label {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 6px var(--ci-color, #fff);
}
@keyframes ci-armed-pulse {
    0%, 100% { filter: brightness(1.15); }
    50% { filter: brightness(1.7); }
}

/* HP and MP bars - twice as thick as EXP bar */
#hp-bar {
    height: 24px;

}
#mp-bar {
    height: 16px;
}
#hp-bar .ui-bar-fill { background: var(--hp-color); }
#mp-bar .ui-bar-fill { background: var(--mp-color); }

/* EXP bar - standard thickness with interval markers */
#exp-bar {
    height: 8px;
}
#exp-bar .ui-bar-fill { background: var(--exp-color); }

/* ── Movement skill cooldown — buff-style icon above the player's head ──
   Only shown while the skill is on cooldown (display toggled in JS). */
/* ── Combo counter — floats above the player, below the movement cooldown ── */
#combo-counter {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center bottom;
    font-family: 'Ari9500', sans-serif;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 11;
    line-height: 1;
}
.combo-count {
    display: block;
    font-size: 22px;
    color: #ffe066;
    text-shadow:
        1px 1px 0 #000, -1px 1px 0 #000,
        1px -1px 0 #000, -1px -1px 0 #000,
        0 0 8px rgba(255, 200, 0, 0.7);
}
.combo-x {
    font-size: 9px;
    letter-spacing: 2px;
    margin-left: 4px;
    opacity: 0.8;
    vertical-align: middle;
    color: #fff;
    -webkit-text-fill-color: #fff; /* don't inherit the t5 gradient's transparent fill */
}
.combo-rank {
    display: block;
    font-size: 11px;
    letter-spacing: 3px;
    margin-top: 2px;
    color: #fff;
    text-shadow: 1px 1px 0 #000, 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Tier escalation: bigger + hotter the longer the chain runs */
#combo-counter.combo-t2 .combo-count {
    font-size: 26px;
    color: #ffae42;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 10px rgba(255, 150, 0, 0.8);
}
#combo-counter.combo-t3 .combo-count {
    font-size: 30px;
    color: #ff6b35;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 12px rgba(255, 90, 30, 0.85);
}
#combo-counter.combo-t4 .combo-count {
    font-size: 35px;
    color: #ff3860;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 14px rgba(255, 40, 80, 0.9);
}
#combo-counter.combo-t5 .combo-count {
    font-size: 42px;
    background: linear-gradient(90deg, #ff3860, #ffae42, #ffe066, #4ade80, #38bdf8, #a855f7, #ff3860);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: combo-rainbow 1.2s linear infinite;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}
#combo-counter.combo-t3 .combo-rank { color: #ff6b35; }
#combo-counter.combo-t4 .combo-rank { color: #ff3860; }
#combo-counter.combo-t5 .combo-rank {
    color: #ffe066;
    text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 220, 0, 0.9);
}
@keyframes combo-rainbow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

#combo-counter.combo-pop {
    animation: combo-pop 0.18s ease-out forwards;
}
@keyframes combo-pop {
    0%   { transform: translateX(-50%) scale(1.45); }
    100% { transform: translateX(-50%) scale(1); }
}
#combo-counter.combo-pop-big {
    animation: combo-pop-big 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes combo-pop-big {
    0%   { transform: translateX(-50%) scale(1.9) rotate(-3deg); }
    60%  { transform: translateX(-50%) scale(0.92) rotate(1deg); }
    100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}
#combo-counter.combo-fade {
    animation: combo-fade 0.4s ease-out forwards;
}
@keyframes combo-fade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Row of overhead cooldown icons (movement skill + attack skills on
   cooldown) — the row centres itself so one icon sits exactly where the
   old lone movement icon did, and extras fan out beside it. */
#player-overhead-cooldowns {
    position: absolute;
    top: -54px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    justify-content: center;
    pointer-events: none;
    z-index: 13; /* above foliage-foreground (z-11) */
}
#player-movement-cooldown,
.player-attack-cooldown {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    pointer-events: none;
}
#player-overhead-cooldowns .msci-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    /* base transform set inline (scale); recentre via margins */
    margin: -8px 0 0 -8px;
    image-rendering: pixelated;
    border-radius: 4px;
}
#player-overhead-cooldowns .msci-sweep {
    position: absolute;
    inset: 0;
    border-radius: 4px;
}
#player-overhead-cooldowns .msci-timer {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-family: 'Ari9500', sans-serif;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    line-height: 1;
}

/* ── Teleport / dash afterimage silhouettes ── */
.teleport-ghost {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 9;
    animation: tg-fade 0.45s ease-out forwards;
}
.teleport-ghost canvas { position: absolute; }
/* Mage Blink: pure-white body with a blue glow */
.tg-arcane canvas {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 5px #6cc6ff) drop-shadow(0 0 11px #1e90ff);
}
/* Rogue Flash Jump: dark shadow silhouette */
.tg-shadow canvas {
    filter: brightness(0) saturate(0)
            drop-shadow(0 0 4px rgba(20, 0, 35, 0.8));
    opacity: 0.85;
}
/* Engineer Thruster Launch: fiery orange exhaust glow */
.tg-thruster canvas {
    filter: brightness(0) invert(1) sepia(1) saturate(8) hue-rotate(-25deg)
            drop-shadow(0 0 6px #ff8a1e) drop-shadow(0 0 12px #ff5500);
}
@keyframes tg-fade {
    from { opacity: 0.9; transform: scale(1); }
    to   { opacity: 0;   transform: scale(1.05); }
}

/* ── Remote-player movement-skill VFX ─────────────────────────────────────
   The remote ghost can't snapshot the other player's canvas, so each kind
   renders as a glowing shape whose colour matches the local effect:
     shadow  → dark/purple silhouette  (Rogue Flash Jump)
     arcane  → white body + blue glow  (Mage Blink)
     thruster→ orange/fire pulse       (Engineer Thruster Launch)
     dash    → horizontal speed streak (Nightblade/Vanguard Charge)
   All inherit .remote-tg-base for lifetime animation and z-index.         */

.remote-tg-base {
    position: absolute;
    pointer-events: none;
    z-index: 9;
    border-radius: 6px;
}

/* Rogue / Ninja / Bladedancer Flash Jump */
.remote-tg-shadow {
    width: 40px;
    height: 56px;
    background: rgba(20, 0, 40, 0.75);
    box-shadow: 0 0 8px 3px rgba(80, 20, 100, 0.7),
                0 0 18px 6px rgba(40, 0, 60, 0.4);
    animation: rtg-fade 0.48s ease-out forwards;
}

/* Mage / Invoker / Sorcerer Blink */
.remote-tg-arcane {
    width: 40px;
    height: 56px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 8px 4px #6cc6ff,
                0 0 20px 8px rgba(30, 144, 255, 0.55),
                0 0 36px 14px rgba(30, 100, 255, 0.25);
    animation: rtg-fade 0.48s ease-out forwards;
}

/* Engineer Thruster Launch */
.remote-tg-thruster {
    width: 40px;
    height: 56px;
    background: rgba(255, 165, 40, 0.8);
    box-shadow: 0 0 8px 4px #ff8a1e,
                0 0 20px 8px rgba(255, 85, 0, 0.6),
                0 0 36px 14px rgba(255, 60, 0, 0.25);
    animation: rtg-fade 0.48s ease-out forwards;
}

/* Nightblade / Vanguard Charge streak */
.remote-tg-dash {
    width: 88px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(to right, transparent, rgba(255, 220, 100, 0.55), rgba(255, 255, 255, 0.85));
    box-shadow: 0 0 10px 4px rgba(255, 200, 60, 0.5),
                0 0 22px 8px rgba(255, 160, 20, 0.3);
    animation: rtg-dash-fade 0.32s ease-out forwards;
}

@keyframes rtg-fade {
    0%   { opacity: 0.88; transform: scale(1); }
    60%  { opacity: 0.5;  transform: scale(1.04); }
    100% { opacity: 0;    transform: scale(1.08); }
}
@keyframes rtg-dash-fade {
    /* No transform here — the JS applies scaleX(-1) for left-facing charges
       and CSS transform in keyframes would clobber it. Pure opacity fade. */
    0%   { opacity: 0.85; }
    100% { opacity: 0;    }
}

/* Archer Tumble: brief flicker while rolling (i-frames).
   Targets the sprite container so #player keeps z-index:auto and never forms a stacking context. */
#player.dodge-rolling #player-sprite-container {
    animation: dodge-flicker 0.42s linear;
}
@keyframes dodge-flicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.45; }
    50% { opacity: 0.7; }
    75% { opacity: 0.45; }
}

/* ── Movement-skill 2nd-job passive effect visuals ── */
.move-fx { position: absolute; pointer-events: none; z-index: 8; }

/* Ninja Shadow Flash — dark expanding burst */
.move-fx-wisp {
    width: 56px; height: 56px; margin: 14px 0 0 2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,40,200,0.55) 0%, rgba(60,0,90,0.25) 50%, transparent 70%);
    box-shadow: 0 0 10px rgba(140,60,220,0.8);
    animation: move-fx-burst 0.45s ease-out forwards;
}
/* Sorcerer Phantom Shift — arcane explosion */
.move-fx-blast {
    width: 70px; height: 70px; margin: 14px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,180,255,0.6) 0%, rgba(30,110,255,0.3) 45%, transparent 70%);
    box-shadow: 0 0 14px rgba(60,150,255,0.9);
    animation: move-fx-burst 0.45s ease-out forwards;
}
/* Turret muzzle / hit spark */
.move-fx-muzzle {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffd24a 50%, transparent 70%);
    animation: move-fx-burst 0.4s ease-out forwards;
}
@keyframes move-fx-burst {
    from { transform: scale(0.4); opacity: 0.95; }
    to   { transform: scale(1.5); opacity: 0; }
}

/* Scout Tactical Retreat — snare trap on the ground (persistent) */
.move-fx-trap {
    width: 70px; height: 22px;
    border: 2px solid rgba(110,230,140,0.8);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(60,200,90,0.28) 0%, transparent 70%);
    box-shadow: 0 0 8px rgba(80,220,110,0.6);
    animation: move-fx-trap-pulse 0.7s ease-in-out infinite;
}
@keyframes move-fx-trap-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Technician Anchor Deploy — turret (persistent) */
.move-fx-turret {
    width: 18px; height: 20px;
    background: linear-gradient(#9aa7b5, #4a5663);
    border: 1px solid #2b333d;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 6px rgba(120,200,255,0.7);
}
.move-fx-turret::before {
    content: ''; position: absolute; top: 6px; left: 14px;
    width: 12px; height: 4px;
    background: #2b333d; border-radius: 2px;
}
.move-fx-turret::after {
    content: ''; position: absolute; top: -4px; left: 4px;
    width: 10px; height: 6px;
    background: #c0ccd8; border-radius: 3px 3px 0 0;
    animation: move-fx-trap-pulse 0.5s ease-in-out infinite;
}

/* EXP bar interval lines - exactly 1 pixel thick */
#exp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(90deg, transparent calc(10% - 0.5px), rgba(0,0,0,0.4) calc(10% - 0.5px), rgba(0,0,0,0.4) calc(10% + 0.5px), transparent calc(10% + 0.5px)),
        linear-gradient(90deg, transparent calc(20% - 0.5px), rgba(0,0,0,0.4) calc(20% - 0.5px), rgba(0,0,0,0.4) calc(20% + 0.5px), transparent calc(20% + 0.5px)),
        linear-gradient(90deg, transparent calc(30% - 0.5px), rgba(0,0,0,0.4) calc(30% - 0.5px), rgba(0,0,0,0.4) calc(30% + 0.5px), transparent calc(30% + 0.5px)),
        linear-gradient(90deg, transparent calc(40% - 0.5px), rgba(0,0,0,0.4) calc(40% - 0.5px), rgba(0,0,0,0.4) calc(40% + 0.5px), transparent calc(40% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(0,0,0,0.6) calc(50% - 0.5px), rgba(0,0,0,0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(60% - 0.5px), rgba(0,0,0,0.4) calc(60% - 0.5px), rgba(0,0,0,0.4) calc(60% + 0.5px), transparent calc(60% + 0.5px)),
        linear-gradient(90deg, transparent calc(70% - 0.5px), rgba(0,0,0,0.4) calc(70% - 0.5px), rgba(0,0,0,0.4) calc(70% + 0.5px), transparent calc(70% + 0.5px)),
        linear-gradient(90deg, transparent calc(80% - 0.5px), rgba(0,0,0,0.4) calc(80% - 0.5px), rgba(0,0,0,0.4) calc(80% + 0.5px), transparent calc(80% + 0.5px)),
        linear-gradient(90deg, transparent calc(90% - 0.5px), rgba(0,0,0,0.4) calc(90% - 0.5px), rgba(0,0,0,0.4) calc(90% + 0.5px), transparent calc(90% + 0.5px));
    pointer-events: none;
    border-radius: 4px;
}

/* EXP text display below the bar */
.exp-info {
    font-family: var(--ui-font);
    font-size: var(--font-standard);
    color: white;
    text-align: center;
    margin-top: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#main-hotkey-bar {
    display: grid;
    /* minmax(0, 1fr) so every column is exactly equal: plain 1fr can't shrink
       below min-content, which let the widest label (Achievements) bloat its
       column and stagger the grid. Widened to ~106px/column so the longest
       labels (Achievements) sit inside the button box without clipping. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) 44px;
    grid-auto-rows: 1fr;
    gap: 4px;
    width: 484px;
    align-items: stretch;
}
.hotkey {
    position: relative;
    border: 2px solid var(--ui-border);
    background: var(--theme-slot-bg);
    padding: 6px 2px;
    border-radius: 6px;
    text-align: center;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s ease;
    font-family: var(--ui-font);
    font-size: 10px;
    color: white;
    font-weight: bold;
    outline: none;
    white-space: nowrap;
    min-width: 0;
    /* visible (not hidden) so the notification badge (.hotkey-notification,
       offset above the button top) isn't clipped. Labels now fit the widened
       columns, so clipping is no longer needed to contain them. */
    overflow: visible;
}

.hotkey:hover {
    background: var(--theme-btn-hover-top);
    border-color: var(--ui-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hotkey:active {
    background: var(--theme-disabled-bg);
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Settings button: small icon in 5th column, spanning all three hotkey rows */
.hotkey.settings-btn {
    grid-column: 5;
    grid-row: 1 / 4;
    background: none;
    border: none;
    padding: 4px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
    transition: filter 0.15s;
}
.hotkey.settings-btn .settings-icon-img {
    width: 36px;
    height: 36px;
}
.hotkey.settings-btn:hover {
    background: none;
    border-color: transparent;
    transform: none;
    box-shadow: none;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5)) brightness(1.25);
}
.hotkey.settings-btn:active {
    background: none;
    box-shadow: none;
    transform: none;
}

.skill-slot {
    width: 48px;
    height: 48px;
    border: 2px solid var(--ui-border);
    background-color: var(--theme-slot-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ── Per-skill cooldown feedback (big AoE skills) ── */
/* Dark veil drains from full height to 0 as the cooldown recovers. */
.skill-cooldown-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(8, 10, 22, 0.62);
    pointer-events: none;
    z-index: 2;
}
.skill-cooldown-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: var(--font-small);
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    z-index: 3;
}
/* Red pulse when a skill is cast while still on cooldown ("not ready") */
.skill-slot.cooldown-denied {
    animation: cooldown-denied-flash 0.35s ease-out;
}
@keyframes cooldown-denied-flash {
    0%   { box-shadow: inset 0 0 0 3px rgba(231, 76, 60, 0.95); }
    100% { box-shadow: inset 0 0 0 3px rgba(231, 76, 60, 0); }
}

.skill-slot svg {
    width: 100%; height: 100%;
}
.skill-slot .hotkey-num {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px #000;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 4px;
    border-radius: 3px;
}
.skill-slot .item-quantity-top-left {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px #000;
}
#notification-container {
    position: absolute;
    /* Sits above the multi-row #hotbar-stack (bottom:125px, right-aligned) so the
       loot/EXP/gold feed no longer overlaps the hotbar. */
    bottom: 345px;
    right: 10px;
    z-index: 99;
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 4px;
    transition: bottom 0.25s ease;
}
/* While the achievement toast is up (anchored above the hotbar stack),
   lift the loot/notification feed so the two never overlap. */
body.achievement-toast-active #notification-container {
    bottom: 410px;
}

/* Adjust notification position for gamepad mode (single row hotbar) */
body.gamepad-active #notification-container {
    bottom: 290px;
}

/* Gamepad Hotbar Assignment Menu */
#gamepad-hotbar-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10002; /* Between windows (10002) and menu (10003) */
    pointer-events: auto; /* Block all clicks to elements behind */
}

#gamepad-hotbar-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 20, 30, 0.98);
    border: 3px solid #4a90e2;
    border-radius: 12px;
    padding: 20px;
    z-index: 10003; /* Above all windows (10002) and backdrop */
    min-width: 400px;
    box-shadow: 0 0 30px rgba(74, 144, 226, 0.5);
    pointer-events: auto; /* Ensure menu blocks clicks to elements behind it */
}

.hotbar-menu-header {
    font-size: var(--font-standard);
    font-weight: bold;
    color: #4a90e2;
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#hotbar-menu-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.hotbar-menu-slot {
    background: rgba(40, 40, 50, 0.9);
    border: 3px solid var(--theme-btn-hover-top);
    border-radius: 10px;
    padding: 12px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
    text-align: center;
    position: relative;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    user-select: none;
}

.hotbar-menu-slot:hover,
.hotbar-menu-slot.selected {
    background: rgba(74, 144, 226, 0.4);
    border-color: #4a90e2;
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.6);
}

.hotbar-menu-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hotbar-menu-slot-number {
    font-size: var(--font-standard);
    font-weight: bold;
    color: #4a90e2;
}

.hotbar-menu-slot-button {
    font-size: var(--font-standard);
    font-weight: bold;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #ffd700;
}

.hotbar-menu-slot-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    margin: 8px 0;
}

.hotbar-menu-slot-current {
    font-size: var(--font-small);
    color: #b0aec5;
    margin-top: 8px;
    min-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotbar-menu-footer {
    font-size: var(--font-standard);
    color: #7d7998;
    text-align: center;
    margin-top: 10px;
}

.notification-text {
    position: relative;
    font-size: var(--font-standard);
    font-weight: bold;
    text-shadow: 1px 1px #000;
    animation: notificationSlideIn 0.2s ease-out, notificationFadeOut 2s 0.3s forwards;
    white-space: nowrap;
    opacity: 1;
}

@keyframes notificationSlideIn {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes notificationFadeOut {
    0% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}
.notification-text.exp { color: var(--exp-color); }
.notification-text.partyExp { color: #3498db; }
.notification-text.eventExp { color: #e74c3c; text-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
.notification-text.guild { color: var(--guild-color-light); text-shadow: 0 0 8px rgba(155, 89, 182, 0.5); }
.notification-text.common { color: var(--common-color); }
.notification-text.rare { color: var(--rare-color); }
.notification-text.epic { color: var(--epic-color); }
.notification-text.legendary { color: var(--legendary-color); }
.notification-text.mythic { color: var(--mythic-color); text-shadow: 0 0 8px rgba(0, 229, 204, 0.5); }
.notification-text.prismatic { color: var(--prismatic-color); text-shadow: 0 0 10px rgba(240, 234, 255, 0.6); animation: prismaticText 2s ease-in-out infinite; }
.notification-text.cosmetic { color: var(--cosmetic-color); }
.notification-text.quest { color: var(--quest-color); }
.notification-text.error { color: red; }
.notification-text.success { color: var(--success-color); font-weight: bold; }
.notification-text.fail { color: var(--fail-color); font-weight: bold; }
.notification-text.destroyed { color: var(--destroy-color); font-weight: bold; font-size: var(--font-standard); animation: shake 0.5s, notificationFadeOut 2s forwards; }

.monster, .npc { position: absolute; z-index: 9; will-change: transform; }
.monster.monster-raised {
    /* Standing on a platform/structure: render behind ground scenery (z 8)
       whose bottom edge is below the monster, but above ladders (z 6). */
    z-index: 7;
}
.monster.mini-boss {
    transform: scale(1.5);
    filter: drop-shadow(0 0 5px red);
}

/* Trial Boss Player Sprite Styles */
.monster.trial-boss-player {
    overflow: visible;
}
.monster.trial-boss-player canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.monster.trial-boss-player .monster-nameplate {
    top: 68px; /* Position below player sprite */
    color: #ff6b6b; /* Red tint to indicate hostile */
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.monster-hp-bar-container {
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: var(--theme-slot-bg);
    border: 1px solid black;
    top: -10px;
    display: none;
}
.monster-hp-bar-fill {
    height: 100%;
    background-color: var(--hp-color);
    transition: width 0.2s linear;
}

/* Debuff Icons - Regular Monsters (above HP bar, world-space sibling) */
.monster-debuff-row {
    position: absolute;
    display: flex;
    gap: 10px;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.debuff-icon {
    position: relative;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.debuff-stack-count {
    position: absolute;
    bottom: -2px;
    right: -4px;
    font-family: 'Ari9500', sans-serif;
    font-size: 6px;
    font-weight: bold;
    color: #fff;
    background: rgba(0,0,0,0.35);
    border-radius: 3px;
    padding: 0 2px;
    line-height: 1.2;
    text-shadow: 0 0 2px #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
    pointer-events: none;
    z-index: 2;
}

/* Debuff Duration Timer */
.debuff-timer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Ari9500', sans-serif;
    font-size: 6px;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 0 2px #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
    pointer-events: none;
    z-index: 3;
}

.debuff-timer-lg {
    font-size: 8px;
    top: -10px;
}

/* Debuff Icons - Boss HP Bars (larger, prominent) */
.boss-debuff-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 4px;
    min-height: 0;
}

.debuff-icon-lg {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.debuff-stack-lg {
    font-size: 7px;
    bottom: -2px;
    right: -5px;
    text-shadow: 0 0 3px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* Rune Socket Modal — matches game .window theme */
#rune-socket-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    pointer-events: auto;
}

.rune-socket-panel {
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-width: 360px;
    max-width: 460px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.rune-socket-title {
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    color: var(--theme-text-bright);
    padding: 8px 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-header);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.3px;
}

.rune-socket-body {
    padding: 14px;
    color: #c0bed0;
    font-size: var(--font-standard);
}

.rune-slot-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.rune-slot-filled {
    justify-content: space-between;
    background: var(--theme-slot-bg);
}

.rune-slot-empty {
    justify-content: center;
    background: var(--bar-bg);
    border: 1px dashed var(--ui-border);
}

.rune-slot-empty span {
    color: var(--theme-text-dim);
}

.rune-unsocket-btn {
    padding: 2px 8px;
    background: linear-gradient(180deg, #d45555 0%, #b83a3a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    color: #fff;
    cursor: var(--cursor-pointer, pointer);
    font-size: 0.8em;
    font-family: 'Ari9500';
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}

.rune-unsocket-btn:hover {
    background: linear-gradient(180deg, #e06060 0%, #cc4545 100%);
    box-shadow: 0 2px 6px rgba(200, 60, 60, 0.4);
}

.rune-socket-add-btn, .rune-weapon-choice {
    padding: 6px 10px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: #c0bed0;
    cursor: var(--cursor-pointer, pointer);
    text-align: left;
    width: 100%;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    transition: all 0.15s ease;
}

.rune-socket-add-btn:hover, .rune-weapon-choice:hover {
    background: var(--theme-hover-bg);
    border-color: var(--ui-accent);
}

.rune-available-section {
    margin-top: 8px;
    border-top: 1px solid var(--ui-border);
    padding-top: 8px;
}

.rune-available-label {
    color: var(--theme-text-secondary);
    font-size: 0.85em;
    margin-bottom: 4px;
}

.rune-available-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 180px;
    overflow-y: auto;
}

/* Elite Monster Styles */
.elite-monster {
    animation: eliteGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px #ffd700) brightness(1.3);
}

@keyframes eliteGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 25px #ff8c00) brightness(1.3);
    }
    50% {
        filter: drop-shadow(0 0 7px #ffd700) drop-shadow(0 0 35px #ff8c00) brightness(1.5);
    }
}

#mini-boss-hp-bar {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    /* Standard x2 window frame — same pixel density as .window (v0.8.126 pass). */
    background: var(--px-window-bg);
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window);
    padding: 3px 14px;
    min-width: 380px;
    max-width: 480px;
    text-align: center;
    pointer-events: none;
}
/* When the dojo/PQ tracker is up (top-center), drop the boss bar below it so the
   two no longer overlap. */
body.pq-tracker-visible #mini-boss-hp-bar,
body.pq-tracker-visible #elite-monster-hp-bar {
    top: 104px;
}
/* When the community goal widget is up (top-center), drop the boss/elite bars
   below it so they never overlap it. */
body.community-goal-visible #mini-boss-hp-bar,
body.community-goal-visible #elite-monster-hp-bar {
    top: 84px;
}
/* Both up: goal sits under the tracker (top:104) so the bars go below both. */
body.pq-tracker-visible.community-goal-visible #mini-boss-hp-bar,
body.pq-tracker-visible.community-goal-visible #elite-monster-hp-bar {
    top: 164px;
}

.mini-boss-name {
    font-family: 'Ari9500', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #dc143c;
    text-shadow: 1px 1px 3px #000;
    margin-bottom: 3px;
    letter-spacing: 1.5px;
}

.mini-boss-hp-bar-container {
    width: 100%;
    height: 8px;
    background: var(--bar-bg);
    border: 1px solid rgba(220, 20, 60, 0.4);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}

.mini-boss-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b0000, #dc143c, #ff4500);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.mini-boss-hp-text {
    font-family: 'Ari9500', sans-serif;
    font-size: 10px;
    color: var(--theme-text-secondary);
    text-shadow: 1px 1px 2px #000;
}

#elite-monster-hp-bar {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 149;
    /* Match the mini-boss bar (standard x2 window frame). */
    background: var(--px-window-bg);
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 fill stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window);
    padding: 3px 14px;
    min-width: 320px;
    max-width: 420px;
    text-align: center;
    pointer-events: none;
}

.elite-monster-name {
    font-family: 'Ari9500', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 1px 1px 3px #000, 0 0 8px rgba(255, 140, 0, 0.4);
    margin-bottom: 3px;
    letter-spacing: 1.5px;
}

.elite-monster-hp-bar-container {
    width: 100%;
    height: 8px;
    background: var(--bar-bg);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}

.elite-monster-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b8860b, #ffd700, #ffaa00);
    transition: width 0.3s ease;
    border-radius: 3px;
}

@keyframes hpBarPulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

.elite-monster-hp-text {
    font-family: 'Ari9500', sans-serif;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

/* World Boss Event UI — Combined Panel */
#world-boss-ui {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 151;
    /* Standard x2 window frame like the other boss bars; the titan identity
       stays in the purple inner glow instead of a custom frame. No `fill` on
       the border-image — fill paints over inset box-shadows (see char-card);
       the solid bg backstops the slice seams instead. */
    background: var(--px-window-bg);
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 stretch;
    border-radius: 0;
    clip-path: var(--px-clip-window);
    box-shadow: inset 0 0 18px rgba(155, 89, 182, 0.35);
    padding: 3px 16px;
    min-width: 380px;
    max-width: 480px;
    text-align: center;
    animation: worldBossAppear 0.5s ease-out;
    pointer-events: none;
}

#world-boss-ui.ending {
    animation: worldBossDisappear 2s ease-out forwards;
}

@keyframes worldBossAppear {
    from { transform: translateX(-50%) translateY(-80px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes worldBossDisappear {
    to { transform: translateX(-50%) translateY(-80px); opacity: 0; }
}

/* Title row: name + phase badge */
.wb-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.wb-name {
    font-family: 'Ari9500', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px #000, 0 0 12px #9b59b6;
    letter-spacing: 1.5px;
}
.wb-phase {
    font-family: 'Ari9500', sans-serif;
    font-size: 10px;
    color: #ddd;
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(155, 89, 182, 0.5);
    text-shadow: 1px 1px 2px #000;
    transition: all 0.3s;
}
.wb-phase.enraged {
    color: #ffaa00;
    border-color: #ff8800;
    background: rgba(255, 136, 0, 0.2);
    animation: phaseGlow 1s ease-in-out infinite;
}
.wb-phase.desperate {
    color: #ff4488;
    border-color: #ff0044;
    background: rgba(255, 0, 68, 0.2);
    animation: phaseGlow 0.6s ease-in-out infinite;
}
@keyframes phaseGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

/* HP bar with overlaid text */
.wb-hp-bar-wrap {
    position: relative;
    width: 100%;
    height: 12px;
    background: linear-gradient(to bottom, #1a1a1a, #0d0d0d);
    border: 1px solid rgba(155, 89, 182, 0.7);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(155, 89, 182, 0.3);
}
.wb-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff3333, #ff6644);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.6);
    animation: worldBossHpPulse 1.5s ease-in-out infinite;
}
@keyframes worldBossHpPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}
.wb-hp-text {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ari9500', sans-serif;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 2px #000, 0 0 4px #000;
    pointer-events: none;
}

/* Info row: map + your damage */
.wb-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-family: 'Ari9500', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}
.wb-map {
    color: rgba(255,255,255,0.5);
}
.wb-dmg {
    color: rgba(255,255,255,0.6);
}
.wb-dmg em {
    font-style: normal;
    color: #2ecc71;
    font-weight: bold;
}

/* World Boss Warp Prompt */
#world-boss-warp-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.world-boss-prompt-content {
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.98), rgba(30, 0, 60, 0.98));
    padding: 30px 50px;
    border-radius: 15px;
    border: 4px solid #9b59b6;
    box-shadow: 0 0 60px rgba(155, 89, 182, 0.9), 0 0 100px rgba(255, 0, 100, 0.4);
    text-align: center;
    max-width: 500px;
    animation: promptPulse 2s ease-in-out infinite;
}

@keyframes promptPulse {
    0%, 100% { box-shadow: 0 0 60px rgba(155, 89, 182, 0.9), 0 0 100px rgba(255, 0, 100, 0.4); }
    50% { box-shadow: 0 0 80px rgba(155, 89, 182, 1), 0 0 120px rgba(255, 0, 100, 0.6); }
}

.world-boss-prompt-icon {
    font-size: 72px;
    display: block;
    margin-bottom: 15px;
    animation: iconBounce 1s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.world-boss-prompt-title {
    font-family: 'Ari9500', sans-serif;
    font-size: 24px;
    color: #f1c40f;
    text-shadow: 2px 2px 4px #000, 0 0 20px #f39c12;
    margin-bottom: 10px;
    letter-spacing: 3px;
    animation: alertFlash 0.5s ease-in-out infinite alternate;
}

@keyframes alertFlash {
    from { color: #f1c40f; }
    to { color: #e74c3c; }
}

.world-boss-prompt-name {
    font-family: 'Ari9500', sans-serif;
    font-size: 32px;
    color: #fff;
    text-shadow: 2px 2px 4px #000, 0 0 15px #9b59b6;
    margin-bottom: 15px;
}

.world-boss-prompt-desc {
    font-family: 'Ari9500', sans-serif;
    font-size: 14px;
    color: var(--theme-text-secondary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.world-boss-prompt-warning {
    font-family: 'Ari9500', sans-serif;
    font-size: 12px;
    color: #f39c12;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.world-boss-prompt-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 15px;
}

.world-boss-join-btn {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    border: 3px solid #fff;
    color: #fff;
    padding: 15px 35px;
    border-radius: 8px;
    font-family: 'Ari9500', sans-serif;
    font-size: 18px;
    cursor: var(--cursor-pointer, pointer);
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
}

.world-boss-join-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.7);
}

.world-boss-decline-btn {
    background: linear-gradient(135deg, var(--theme-text-dim), #555);
    border: 2px solid var(--theme-text-secondary);
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    font-family: 'Ari9500', sans-serif;
    font-size: 14px;
    cursor: var(--cursor-pointer, pointer);
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s;
}

.world-boss-decline-btn:hover {
    background: linear-gradient(135deg, var(--ui-accent), #777);
}

.world-boss-prompt-timer {
    font-family: 'Ari9500', sans-serif;
    font-size: 14px;
    color: #e74c3c;
}

.world-boss-prompt-timer span {
    color: #f1c40f;
    font-weight: bold;
    font-size: 18px;
}

/* World Boss Monster (in-arena sprite) */
.world-boss-monster {
    animation: worldBossIdle 2s ease-in-out infinite;
    transition: transform 0.1s;
}

@keyframes worldBossIdle {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

.world-boss-monster.hit {
    animation: worldBossHit 0.2s ease-out;
}

@keyframes worldBossHit {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 1)) brightness(2);
    }
}

.world-boss-nameplate {
    font-family: 'Ari9500', sans-serif;
    text-align: center;
    z-index: 101;
}

/* World Boss AoE Attack Zones */
.world-boss-aoe-zone {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), inset 0 0 30px rgba(255, 0, 0, 0.3);
}

@keyframes aoeWarningPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes fullMapPulse {
    0% {
        background: radial-gradient(circle, rgba(255,0,0,0.0) 0%, rgba(255,0,0,0.05) 100%);
        border-color: rgba(255,0,0,0.2);
    }
    50% {
        background: radial-gradient(circle, rgba(255,0,0,0.1) 0%, rgba(255,0,0,0.2) 100%);
        border-color: rgba(255,0,0,0.5);
    }
    100% {
        background: radial-gradient(circle, rgba(255,0,0,0.3) 0%, rgba(255,0,0,0.5) 100%);
        border-color: rgba(255,0,0,0.9);
    }
}

@keyframes arrowRainPulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

@keyframes aoeExplosion {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Animation for notification text - fade out without moving position */
@keyframes notificationFadeOut {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

.floating-damage {
    font-family: 'Ari9500', sans-serif;
    animation: floatUp 1s ease-out forwards;
}

/* Rescue System UI */
#downed-ui {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.95), rgba(60, 0, 0, 0.95));
    padding: 25px 40px;
    border-radius: 15px;
    border: 3px solid #e74c3c;
    box-shadow: 0 0 40px rgba(231, 76, 60, 0.8), 0 8px 25px rgba(0, 0, 0, 0.8);
    text-align: center;
    animation: downedPulse 1s ease-in-out infinite;
}

@keyframes downedPulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(231, 76, 60, 0.8), 0 8px 25px rgba(0, 0, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 60px rgba(231, 76, 60, 1), 0 8px 25px rgba(0, 0, 0, 0.8);
    }
}

.downed-header {
    font-family: 'Ari9500', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px #000, 0 0 15px #e74c3c;
    margin-bottom: 10px;
}

.downed-subtext {
    font-family: 'Ari9500', sans-serif;
    font-size: 14px;
    color: var(--theme-text-secondary);
    margin-bottom: 15px;
}

.downed-timer-container {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.downed-timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #f1c40f, #e74c3c);
    transition: width 0.1s linear;
}

.downed-timer-text {
    font-family: 'Ari9500', sans-serif;
    font-size: 12px;
    color: #f1c40f;
}

/* Rescue Progress UI */
#rescue-progress-ui {
    position: fixed;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(46, 204, 113, 0.9);
    padding: 12px 25px;
    border-radius: 8px;
    border: 2px solid #27ae60;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.rescue-progress-text {
    font-family: 'Ari9500', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 8px;
}

.rescue-progress-bar-container {
    width: 200px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
}

.rescue-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fff, #2ecc71);
    border-radius: 4px;
}

/* Downed Player Indicator (shown on other players' screens) */
.downed-player-indicator {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(231, 76, 60, 0.9);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Ari9500', sans-serif;
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
    animation: downedIndicatorPulse 0.5s ease-in-out infinite;
    cursor: var(--cursor-pointer, pointer);
}

@keyframes downedIndicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.rescue-button {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border: none;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'Ari9500', sans-serif;
    font-size: 11px;
    cursor: var(--cursor-pointer, pointer);
    margin-left: 8px;
    transition: transform 0.2s;
}

.rescue-button:hover {
    transform: scale(1.1);
}

.attack-box { 
    position: absolute; 
    z-index: 10;
    pointer-events: none;
    background: rgba(255, 255, 100, 0.3);
    border: 1px solid rgba(255, 255, 100, 0.7);
    border-radius: 5px;
    animation: attack-fade 0.1s forwards;
}
@keyframes attack-fade {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* Debug hitbox mode ("h"): outline skill attack boxes, incl. normally-invisible
   ones. Overrides the .attack-box fade/background so the box stays clearly visible
   for its whole lifetime while debugging. */
.attack-box.debug-attack-box {
    outline: 2px dashed #ff2bd6 !important;
    outline-offset: -1px;
    background: rgba(255, 43, 214, 0.18) !important;
    border: none !important;
    animation: none !important;
    opacity: 1 !important;
    z-index: 30 !important;
}
.projectile {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.item-drop { 
    position: absolute; 
    width: 24px; 
    height: 24px; 
    z-index: 8; 
}

/* Placeholder icon for items without art yet (WIP) */
.wip-icon {
    background: repeating-conic-gradient(#ff00ff 0% 25%, #000 0% 50%) 50% / 4px 4px;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.wip-icon::after {
    content: '?';
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-family: 'Ari9500', sans-serif;
    line-height: 1;
}
/* Scale the ? for ground drops (small) */
.wip-icon-drop::after { font-size: 16px; }
/* Scale the ? for inventory/equip slots */
.wip-icon-slot::after { font-size: 28px; }
/* Scale the ? for hotbar */
.wip-icon-hotbar::after { font-size: 22px; }

/* Rarity glow effects for item drops */
.item-drop-rare {
    filter: drop-shadow(0 0 2px rgba(0, 170, 255, 0.7));
}
.item-drop-epic {
    filter: drop-shadow(0 0 2px rgba(155, 89, 182, 0.8));
}
.item-drop-legendary {
    filter: drop-shadow(0 0 3px rgba(243, 156, 18, 0.8));
    animation: legendary-drop-glow 1.5s ease-in-out infinite;
}
.item-drop-quest {
    filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.7));
}
.item-drop-cosmetic {
    filter: drop-shadow(0 0 2px rgba(46, 204, 113, 0.7));
}
@keyframes legendary-drop-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(243, 156, 18, 0.8)); }
    50% { filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.9)); }
}
.item-drop-mythic {
    filter: drop-shadow(0 0 4px rgba(0, 229, 204, 0.8));
    animation: mythic-drop-glow 1.2s ease-in-out infinite;
}
@keyframes mythic-drop-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 229, 204, 0.8)); }
    50% { filter: drop-shadow(0 0 7px rgba(0, 229, 204, 1)); }
}
.item-drop-prismatic {
    filter: drop-shadow(0 0 5px rgba(240, 234, 255, 0.9));
    animation: prismatic-drop-glow 1s ease-in-out infinite;
}
@keyframes prismatic-drop-glow {
    0% { filter: drop-shadow(0 0 5px rgba(255, 100, 100, 0.9)); }
    16% { filter: drop-shadow(0 0 5px rgba(255, 200, 50, 0.9)); }
    33% { filter: drop-shadow(0 0 5px rgba(100, 255, 100, 0.9)); }
    50% { filter: drop-shadow(0 0 5px rgba(100, 200, 255, 0.9)); }
    66% { filter: drop-shadow(0 0 5px rgba(180, 100, 255, 0.9)); }
    83% { filter: drop-shadow(0 0 5px rgba(255, 100, 200, 0.9)); }
    100% { filter: drop-shadow(0 0 5px rgba(255, 100, 100, 0.9)); }
}

/* Prismatic shared animations */
@keyframes prismaticGlow {
    0% { box-shadow: inset 0 0 8px 3px rgba(255, 100, 100, 0.7); }
    16% { box-shadow: inset 0 0 8px 3px rgba(255, 200, 50, 0.7); }
    33% { box-shadow: inset 0 0 8px 3px rgba(100, 255, 100, 0.7); }
    50% { box-shadow: inset 0 0 8px 3px rgba(100, 200, 255, 0.7); }
    66% { box-shadow: inset 0 0 8px 3px rgba(180, 100, 255, 0.7); }
    83% { box-shadow: inset 0 0 8px 3px rgba(255, 100, 200, 0.7); }
    100% { box-shadow: inset 0 0 8px 3px rgba(255, 100, 100, 0.7); }
}
@keyframes prismaticText {
    0% { color: #ff6464; text-shadow: 0 0 10px rgba(255, 100, 100, 0.6); }
    16% { color: #ffc832; text-shadow: 0 0 10px rgba(255, 200, 50, 0.6); }
    33% { color: #64ff64; text-shadow: 0 0 10px rgba(100, 255, 100, 0.6); }
    50% { color: #64c8ff; text-shadow: 0 0 10px rgba(100, 200, 255, 0.6); }
    66% { color: #b464ff; text-shadow: 0 0 10px rgba(180, 100, 255, 0.6); }
    83% { color: #ff64c8; text-shadow: 0 0 10px rgba(255, 100, 200, 0.6); }
    100% { color: #ff6464; text-shadow: 0 0 10px rgba(255, 100, 100, 0.6); }
}
@keyframes prismaticBorder {
    0% { border-color: #ff6464; }
    16% { border-color: #ffc832; }
    33% { border-color: #64ff64; }
    50% { border-color: #64c8ff; }
    66% { border-color: #b464ff; }
    83% { border-color: #ff64c8; }
    100% { border-color: #ff6464; }
}
.portal {
    position: absolute;
    z-index: 7;
    pointer-events: none; /* Prevents portal from blocking clicks on things behind it */
}
.door-portal {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    image-rendering: pixelated;
}
.portal-flower {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    image-rendering: pixelated;
}
.portal-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: yellow;
    font-size: var(--font-standard);
    text-shadow: 1px 1px #000;
    white-space: nowrap;
}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.scenery {
    position: absolute;
    z-index: 8;
    /* Same layer as foliage background: behind the player (z-index: 10). */
    pointer-events: none;
    /* So it doesn't block clicks */
}
.scenery.scenery-foreground {
    z-index: 11;
    /* In front of the player (z-index: 10), same as foliage foreground. */
}
.damage-number {
    position: absolute;
    font-size: 18px;
    font-size: var(--font-medium, 18px);
    font-weight: bold;
    font-family: 'Ari9500', Arial, sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 2px 3px rgba(0,0,0,0.5);
    animation: damageFloat 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 101;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.damage-number.player { 
    color: #ff4444;
    font-size: 20px;
    font-size: var(--font-medium, 20px);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 6px rgba(255,50,50,0.5);
}
.damage-number.monster { 
    color: #fff176;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 4px rgba(255,241,118,0.4);
}
.damage-number.critical {
    color: #ffaa00;
    font-size: 28px;
    font-size: var(--font-xlarge, 28px);
    font-weight: bold;
    font-family: 'Ari9500', Arial, sans-serif;
    animation: critFloat 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px #ff8800, 0 0 16px rgba(255,136,0,0.5);
    letter-spacing: 1px;
}
.damage-number.miss {
    color: #8e8e8e;
    font-size: 14px;
    font-size: var(--font-small, 14px);
    font-style: italic;
    animation: missFloat 1.05s ease-out forwards;
}
.damage-number.shadow-partner {
    color: #bb86fc;
    font-size: 15px;
    font-size: var(--font-small, 15px);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 6px rgba(187,134,252,0.5);
}
.damage-number.bleed {
    color: #ff6b6b;
    font-size: 14px;
    font-size: var(--font-small, 14px);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 6px rgba(255,50,50,0.5);
}

/* --- Rune Proc Damage Numbers --- */
.damage-number.rune-proc {
    font-size: 16px;
    font-size: var(--font-standard, 16px);
    font-weight: bold;
    animation: runeFloat 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.damage-number.rune-proc.rune-fire {
    color: #ff6f00;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(255,111,0,0.7), 0 0 16px rgba(255,60,0,0.4);
}
.damage-number.rune-proc.rune-blood {
    color: #e53935;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(229,57,53,0.7), 0 0 16px rgba(183,28,28,0.4);
}
.damage-number.rune-proc.rune-frost {
    color: #4fc3f7;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(79,195,247,0.7), 0 0 16px rgba(3,169,244,0.4);
}
.damage-number.rune-proc.rune-poison {
    color: #76ff03;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(118,255,3,0.7), 0 0 16px rgba(51,105,30,0.4);
}
.damage-number.rune-proc.rune-lightning {
    color: #d050ff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(208,80,255,0.8), 0 0 16px rgba(160,40,255,0.5);
}
.damage-number.rune-proc.rune-holy {
    color: #ffe082;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(255,224,130,0.85), 0 0 16px rgba(255,193,7,0.5);
}
.damage-number.rune-proc.critical {
    font-size: 22px;
    font-size: var(--font-large, 22px);
}
/* --- Keystone Proc Damage Numbers --- */
.damage-number.triple-crit {
    color: #ff44ff;
    font-size: 32px;
    font-size: var(--font-xlarge, 32px);
    font-weight: bold;
    animation: critFloat 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 10px rgba(255,68,255,0.8), 0 0 20px rgba(200,40,255,0.5);
    letter-spacing: 1.5px;
}
.damage-number.spellblade {
    color: #40e0ff;
    font-size: 22px;
    font-size: var(--font-large, 22px);
    font-weight: bold;
    animation: critFloat 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(64,224,255,0.7), 0 0 16px rgba(0,180,255,0.4);
}
.damage-number.keystone-proc {
    color: #ffcc00;
    font-size: 16px;
    font-size: var(--font-standard, 16px);
    font-weight: bold;
    animation: runeFloat 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(255,204,0,0.6);
}
/* Secondary procs (echo/retribution/spellblade/shadow partner): subordinate to
   the main hit so a busy burst stays legible. Smaller, a touch translucent, and
   a quicker fade so they clear out fast. Colour still identifies the proc. */
.damage-number.secondary {
    font-size: 15px !important;
    font-size: var(--font-small, 15px) !important;
    opacity: 0.9;
    animation-duration: 1s !important;
    letter-spacing: 0 !important;
}
/* Inline proc/skill name that rides in front of its number ("Echo 1,234").
   Sized in em so it tracks the number's own font-size (crit vs normal vs
   secondary); dimmed and small-cap so the number still reads first. Inherits
   the number's colour so the pair stays visually one unit. */
.damage-number .dmg-label {
    font-size: 0.62em;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-right: 3px;
    vertical-align: 0.08em;
}
.damage-number.has-label {
    white-space: nowrap;
}
.damage-number.heal {
    color: #69f0ae;
    font-size: 20px;
    font-size: var(--font-medium, 20px);
    font-weight: bold;
    animation: healFloat 1.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px rgba(105,240,174,0.6);
}
.damage-number.other-player {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-size: var(--font-small, 13px);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    animation: damageFloat 1.05s ease-out forwards;
}
.damage-number.other-player.critical {
    color: rgba(255, 170, 50, 0.75);
    font-size: 16px;
    font-size: var(--font-standard, 16px);
}

/* --- Damage Number Animations --- */
@keyframes damageFloat {
    0%   { transform: translateY(0) scale(1.15); opacity: 1; }
    15%  { transform: translateY(-8px) scale(1); opacity: 1; }
    100% { transform: translateY(-45px); opacity: 0; }
}
@keyframes critFloat {
    0%   { transform: translateY(0) scale(1.6); opacity: 0.9; }
    12%  { transform: translateY(-6px) scale(1.1); opacity: 1; }
    100% { transform: translateY(-55px); opacity: 0; }
}
@keyframes missFloat {
    0%   { transform: translateY(0); opacity: 0.7; }
    100% { transform: translateY(-25px); opacity: 0; }
}
@keyframes healFloat {
    0%   { transform: translateY(0) scale(1.3); opacity: 1; }
    25%  { transform: translateY(-10px) scale(1); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}
@keyframes floatUpHeal {
    0%   { transform: translateY(0) scale(1.3); opacity: 1; }
    30%  { transform: translateY(-10px) scale(1); opacity: 1; }
    100% { transform: translateY(-45px); opacity: 0; }
}
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes critical-pop {
    0% { transform: scale(2) rotate(-5deg); opacity: 0.8; }
    25% { transform: scale(1.8) rotate(5deg); opacity: 1; }
    50% { transform: scale(1.5) rotate(-3deg); opacity: 1; }
    75% { transform: scale(1.3) rotate(3deg); opacity: 1; }
    100% { transform: scale(1.2) rotate(0deg); opacity: 1; }
}
@keyframes runeFloat {
    0%   { transform: translateY(0) scale(1.3); opacity: 1; }
    15%  { transform: translateY(-10px) scale(1.05); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

/* --- Achievement Popup Toast --- */
#achievement-popup-toast {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 6px;
    z-index: 10000;
    pointer-events: none;
    animation: achievementSlideIn 0.5s ease-out forwards,
               achievementGlow 1.5s ease-in-out 0.5s 2,
               achievementFadeOut 0.8s ease-in 3.7s forwards;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'Ari9500', Arial, sans-serif;
}
.achievement-popup-tier-bronze { background: linear-gradient(135deg, rgba(34,32,52,0.95), rgba(205,127,50,0.35)); border: 2px solid #cd7f32; box-shadow: 0 0 15px rgba(205,127,50,0.3); }
.achievement-popup-tier-silver { background: linear-gradient(135deg, rgba(34,32,52,0.95), rgba(192,192,192,0.35)); border: 2px solid #c0c0c0; box-shadow: 0 0 15px rgba(192,192,192,0.3); }
.achievement-popup-tier-gold   { background: linear-gradient(135deg, rgba(34,32,52,0.95), rgba(255,215,0,0.35));   border: 2px solid #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.achievement-popup-tier-diamond { background: linear-gradient(135deg, rgba(34,32,52,0.95), rgba(185,242,255,0.4)); border: 2px solid #b9f2ff; box-shadow: 0 0 25px rgba(185,242,255,0.5); }

.achievement-popup-icon {
    font-size: 32px;
    animation: achievementIconBounce 0.6s ease-out 0.3s;
}
.achievement-popup-text {
    display: flex;
    flex-direction: column;
}
.achievement-popup-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.achievement-popup-title {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255,255,255,0.3);
}

@keyframes achievementSlideIn {
    0%   { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes achievementGlow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}
@keyframes achievementFadeOut {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}
@keyframes achievementIconBounce {
    0%   { transform: scale(0.5); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@keyframes lootPulse {
    0% { 
        transform: scale(0.8); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 0.8; 
    }
    100% { 
        transform: scale(0.5); 
        opacity: 0; 
    }
}
#inventory .window-content {
    overflow: hidden;
}
.window-content button {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, var(--theme-btn-top) 0%, var(--theme-btn-bottom) 100%);
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    cursor: var(--cursor-pointer, pointer);
    margin-top: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    font-size: var(--font-standard);
    border-radius: 3px;
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.window-content button:hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.window-content button:disabled {
    background: var(--theme-disabled-bg);
    color: var(--theme-disabled-text);
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

#inventory-grid {
    display: grid;
    /* Fixed 45px slots + 5px gaps: identical size and spacing to the
       equipment window's slot grid. */
    grid-template-columns: repeat(8, 45px);
    gap: 5px;
    justify-content: center;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    padding-right: 5px;
    /* Prevent scrollbar from overlapping content */
    box-sizing: border-box;
    position: relative !important;
}

/* =============================================== */
/* ==       FIX FOR UNRESPONSIVE UI BUTTONS     == */
/* =============================================== */

/*
  This rule disables any potential invisible overlays on the item grid
  that could be stealing mouse clicks from the item slots.
*/
#inventory-grid::before,
#inventory-grid::after {
    display: none !important;
    pointer-events: none !important;
}

/*
  This rule forcefully ensures that the inventory tabs and the individual
  item slots are always able to be clicked, overriding any other
  style that might be disabling them.
*/
#inventory-tabs .tab-btn,
#inventory-grid .inventory-slot {
    pointer-events: auto !important;
}

.window {
    position: absolute;
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: none;
    z-index: 10002;
    font-size: var(--font-standard);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Responsive window scaling */
@media (max-width: 1366px) {
    .window {
        font-size: var(--font-standard);
    }
}

@media (max-width: 1024px) {
    .window {
        font-size: var(--font-small);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }
}

@media (max-width: 768px) {
    .window {
        font-size: var(--font-small);
        max-width: calc(100vw - 10px);
        max-height: calc(100vh - 10px);
    }
}

/* Ultra-wide screen support */
@media (min-aspect-ratio: 21/9) {
    #game-container {
        background: radial-gradient(ellipse at center, #111 0%, #000 70%);
    }
}

/* Very narrow screens: no #scaling-container clamp here either — the layout box
   must stay 1366x768 (see the base rule) or bottom-anchored scene elements drift. */

/* High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .pixel-art, canvas, img {
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
    }
}
.window-title {
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    color: var(--theme-text-bright);
    padding: 8px 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    cursor: var(--cursor-resize, grab);
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-header);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.3px;
}

.close-btn {
    background: linear-gradient(180deg, #d45555 0%, #b83a3a 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    font-family: 'Ari9500';
    font-size: var(--font-medium);
    cursor: var(--cursor-pointer, pointer);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.close-btn:hover {
    background: linear-gradient(180deg, #e06060 0%, #cc4545 100%);
    box-shadow: 0 2px 6px rgba(200, 60, 60, 0.4);
}
.window-content {
    padding: 10px;
    overflow: hidden; /* Prevents scrollbars */
    flex-grow:1;
    font-size: var(--font-standard);
    line-height: 1.45;
    color: #c0bed0;
}

.window-content h3 {
    font-size: var(--font-standard);
    margin: 12px 0 8px 0;
    color: var(--exp-color);
    border-bottom: 1px solid rgba(69, 66, 90, 0.2);
    padding-bottom: 5px;
    letter-spacing: 0.3px;
}

.window-content h4 {
    font-size: var(--font-standard);
    margin: 8px 0 6px 0;
    color: var(--theme-text-bright);
    letter-spacing: 0.2px;
}
#inventory {
    /* Slots are fixed at 45px to MATCH the equipment window's slots, so the
       window shrinks to the 8-column grid (8x45 + 7x5 gaps = 395 content).
       The 6 footer buttons (Sort/Enhance/Upgrade/Drop/Dismantle/Socket) fit
       one line via the compact padding/font in
       #inventory-footer .inventory-actions button below. */
    width: 470px;
    height: auto;
    min-height: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#equipment { 
    width: 420px; 
    top: 20px; 
    left: 20px; 
}
#stat-window { 
    width: 520px;
    top: 20px; 
    left: 450px;
}
#stat-window .stat-panels {
    display: flex;
    gap: 10px;
}
#stat-window .stat-panel {
    flex: 1;
    min-width: 0;
}
#skill-tree {
    /* Kept on the top:20 row as Equipment (20-440) and Stats (450-970), but
       pulled left of the bottom-right hotbar (#hotbar-stack, right:10) — at
       left:980 the tall window opened directly over the hotbar, hiding its
       upper rows. left:590 puts the right edge (~970) clear of the hotbar so
       the whole bar stays visible when Skills is open. */
    width: 380px;
    top: 20px;
    left: 590px;
}
#quest-log { 
    top: 150px; 
    left: 480px;
    width: 400px;
    height: 440px;
    transform: none;
}

/* Only apply flex layout when window is visible */
#quest-log[style*="display: block"],
#quest-log[style*="display: flex"] {
    display: flex !important;
    flex-direction: column;
}

#quest-log .window-content {
    flex: 1;
    overflow-y: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#quest-log-footer {
    flex-shrink: 0;
    padding: 10px 5px;
    border-top: 1px solid var(--ui-border);
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

/* Quest Tab Specific Styles */
.quest-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

.quest-tab-button {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
}

.quest-tab-button:last-child {
    border-right: none;
}

.quest-tab-button.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}

.quest-tab-button:hover:not(.active) {
    background: var(--theme-hover-bg);
}

.quest-tab-content {
    display: none;
    padding-right: 10px;
    margin-right: -5px;
    padding-bottom: 10px;
}

.quest-tab-content.active {
    display: block;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Quest Item Styles */
.quest-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #3a374f;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.quest-item.available {
    border-left: 4px solid var(--common-color);
}

.quest-item.active {
    border-left: 4px solid var(--exp-color);
}

.quest-item.completed {
    border-left: 4px solid var(--rare-color);
    opacity: 0.8;
}

.quest-item h4 {
    margin: 0 0 6px 0;
    color: #fff;
    font-size: var(--font-small);
}

.quest-item p {
    margin: 3px 0;
    font-size: var(--font-small);
    line-height: 1.3;
}

.quest-description {
    color: #b0aec5;
    font-style: italic;
}

.quest-objective {
    color: var(--exp-color);
}

.quest-reward {
    color: var(--rare-color);
}

.quest-chain {
    color: var(--legendary-color);
    font-size: var(--font-small);
}

.quest-level {
    color: var(--rare-color);
    font-size: var(--font-small);
    font-weight: bold;
}

/* Quest Count Badges */
.quest-count {
    background: var(--exp-color);
    color: #000;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: var(--font-small);
    margin-left: 5px;
    display: inline-block;
    min-width: 12px;
    text-align: center;
}

/* Progress Bar for Active Quests */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin: 5px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--exp-color), var(--rare-color));
    transition: width 0.3s ease;
}

.quest-tab-content::-webkit-scrollbar,
#quest-helper-content::-webkit-scrollbar {
    width: 6px;
}

.quest-tab-content::-webkit-scrollbar-track,
#quest-helper-content::-webkit-scrollbar-track {
    background: var(--bar-bg);
}

.quest-tab-content::-webkit-scrollbar-thumb,
#quest-helper-content::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

/* Quest Helper Styles */
#quest-helper {
    border: 2px solid var(--ui-border);
    border-radius: 8px;
}

#quest-helper-content {
    padding: 3px;
}

.quest-helper-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #3a374f;
    padding: 4px 6px;
    margin-bottom: 4px;
    border-radius: 3px;
    border-left: 2px solid var(--exp-color);
}

/* Turn-in-ready quests read green at a glance, quietly: a green left edge
   (re-asserted in the pixel-skin overrides, which flatten border-left with
   !important), a faint tint, and a small DONE tag from updateQuestHelperUI */
.quest-helper-item.complete {
    border-left: 2px solid var(--success-color);
    background: rgba(46, 204, 113, 0.06);
}

.quest-helper-done-tag {
    display: inline-block;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--success-color);
    border: 1px solid rgba(46, 204, 113, 0.55);
    padding: 0 3px;
    margin-left: 4px;
    vertical-align: 1px;
}

/* Temp-art tell: mobs rendered as tinted copies of another monster's sprite
   carry a dim asterisk after the nameplate name until they get real art */
.temp-art-mark {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85em;
    margin-left: 2px;
}

/* One-shot flash when a quest first becomes complete (class added only on the
   incomplete -> complete transition, so re-renders don't restart it) */
@keyframes quest-helper-complete-flash {
    0%   { background: rgba(46, 204, 113, 0.35); }
    100% { background: rgba(46, 204, 113, 0.06); }
}
.quest-helper-item.just-completed {
    animation: quest-helper-complete-flash 1.2s ease-out;
}

.quest-helper-item h5 {
    margin: 0 0 2px 0;
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-helper-item p {
    margin: 0;
    font-size: 9px;
    color: #b0aec5;
}

.quest-helper-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    margin-top: 3px;
}

.daily-reset-timer {
    margin: 2px 0 0 0 !important;
    font-size: 8px !important;
    text-align: right;
    font-weight: 600;
    letter-spacing: 0.3px;
}

#dialogue-window {
    width: 400px;
    top: 175px;
    left: 200px;
    content: center;
    transform: none; /* FIXED: Removed transform */
}
#shop-window {
    width: 420px;
    top: 80px;
    left: 200px;
    transform: none;
}
#settings-menu {
    width: 500px;
    height: 620px;          /* tall enough that the Keyboard tab list fits without scrolling */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column; /* applies when shown as flex (see toggleWindow) */
    max-height: 88vh;
    /* Ensure settings menu is above overlays (fade-overlay, loading screen, CRT overlays) */
    z-index: 10003;
    pointer-events: auto;
}
#settings-menu .window-title {
    flex-shrink: 0;
}
#settings-footer {
    flex-shrink: 0;
}
#enhancement-confirm-modal {
    width: 400px;
    top: 200px;
    left: 200px;
    transform: none; /* FIXED: Removed transform */
}

/* --- Enhancement Window Layout --- */
.enhancement-layout {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.enhancement-item-display {
    flex-shrink: 0;
}

#enhancement-item-slot {
    width: 60px;
    height: 60px;
    cursor: default;
}

#enhancement-item-slot .pixel-art {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(7.5);
}

.enhancement-header {
    flex-grow: 1;
}

.enhancement-item-name {
    font-size: 13px;
    font-weight: bold;
    font-family: 'Ari9500';
}

.enhancement-item-sublabel {
    font-size: 10px;
    color: var(--theme-text-dim);
    margin-top: 2px;
}

.enhancement-maxed {
    text-align: center;
    color: var(--success-color);
    font-weight: bold;
    font-size: 13px;
    padding: 10px 0;
}

.enhancement-section-label {
    font-size: 10px;
    color: var(--theme-text-dim);
    margin-bottom: 4px;
}

/* Sections match the standard pixel-UI panel look: square corners, theme
   slot fill + border (same treatment as the bestiary element panels). */
.enhancement-stats-section,
.enhancement-costs-section,
.enhancement-chances-section {
    margin: 8px 0;
    padding: 8px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--ui-border);
    border-radius: 0;
    font-size: 11px;
}

.enhancement-stats-section .stat-line,
.enhancement-costs-section .stat-line,
.enhancement-chances-section .stat-line {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    color: var(--theme-text-dim);
}

.enhancement-stats-section .stat-line .stat-value,
.enhancement-costs-section .stat-line .stat-value,
.enhancement-chances-section .stat-line .stat-value {
    color: var(--theme-text);
}

.enhancement-stats-section .stat-value.has-enough,
.enhancement-costs-section .stat-value.has-enough {
    color: #2ecc71;
}

.enhancement-stats-section .stat-value.not-enough,
.enhancement-costs-section .stat-value.not-enough {
    color: #e74c3c;
}

/* White Scroll row: ALWAYS rendered so the layout never shifts mid-session
   (a row appearing once destruction risk kicks in caused misclicks).
   Greyed out via .inactive until it can actually be used. */
.enhancement-whitescroll-slot {
    margin: 8px 0;
    padding: 8px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(241, 196, 15, 0.45);
    border-radius: 0;
    font-size: 11px;
}
.enhancement-whitescroll-slot.inactive {
    border-color: var(--ui-border);
    opacity: 0.5;
}
.enhancement-whitescroll-slot.inactive .enhancement-whitescroll-label {
    cursor: not-allowed;
}

.enhancement-whitescroll-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: var(--cursor-pointer, pointer);
}
.enhancement-whitescroll-label input[type="checkbox"] {
    accent-color: #f1c40f;
}
.enhancement-whitescroll-title {
    color: #f1c40f;
}

.enhancement-whitescroll-hint {
    color: var(--theme-text-dim);
    font-size: 10px;
}

.enhancement-whitescroll-count {
    color: var(--theme-text-dim);
    font-size: 10px;
    margin: 2px 0 0 22px;
}
.enhancement-whitescroll-none {
    color: var(--fail-color, #e74c3c);
}

.enhancement-chances-section .chance-success {
    color: var(--success-color) !important;
}

.enhancement-chances-section .chance-destroy {
    color: var(--destroy-color, #e74c3c) !important;
}

/* --- Inventory-Specific Fixes --- */
#inventory-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}
.tab-btn {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
}
.tab-btn:last-child {
    border-right: none;
}
.tab-btn.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.tab-btn:hover:not(.active) {
    background: var(--theme-hover-bg);
}

.inventory-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.inventory-actions button {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* This new rule specifically targets the buttons inside the footer */
#inventory-footer .inventory-actions button {
    margin-top: 0;
    /* Compact enough that all 6 actions fit one row in the 470px window
       (each button also carries a 10px skin border per side). */
    padding: 2px 4px !important;
    font-size: 10px !important;
}
#inventory-footer .inventory-actions {
    gap: 4px;
    flex-wrap: nowrap;
}

#inventory-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#inventory-gold { 
    color: var(--exp-color); 
    font-size: var(--font-header);
    font-family: 'Ari9500';
    font-weight: bold;
    white-space: nowrap;
    align-self: flex-start;
}
#enhance-item-btn { margin-top: 0; }
.inventory-slot {
    width: 45px; height: 45px; border: 1px solid var(--ui-border);
    background-color: var(--theme-slot-bg); cursor: var(--cursor-pointer, pointer);
    display: flex; justify-content: center; align-items: center;
    box-sizing: border-box;
    position: relative;
}
/* Inventory slots are fixed 45x45 (the .inventory-slot base) so they match
   the equipment window exactly; icons use their inline scale(6), same as
   equipped item icons. */
.inventory-slot:hover,
.equip-slot:hover {
    background-color: var(--theme-hover-bg);
}
.inventory-slot.selected,
.equip-slot.selected {
    border: 2px solid var(--exp-color);
}
/* --- Find these existing rules and add the new selectors --- */

.inventory-slot.rare,
.equip-slot.rare,
.gachapon-item.rare,
.gachapon-result-item.rare {
    box-shadow: inset 0 0 5px 2px var(--rare-color);
}

.inventory-slot.epic,
.equip-slot.epic,
.gachapon-item.epic,
.gachapon-result-item.epic {
    box-shadow: inset 0 0 5px 2px var(--epic-color);
}

.inventory-slot.legendary,
.equip-slot.legendary,
.gachapon-item.legendary,
.gachapon-result-item.legendary {
    box-shadow: inset 0 0 5px 2px var(--legendary-color);
}

.inventory-slot.mythic,
.equip-slot.mythic,
.gachapon-item.mythic,
.gachapon-result-item.mythic {
    box-shadow: inset 0 0 6px 3px var(--mythic-color);
}

.inventory-slot.prismatic,
.equip-slot.prismatic,
.gachapon-item.prismatic,
.gachapon-result-item.prismatic {
    box-shadow: inset 0 0 8px 3px var(--prismatic-color);
    animation: prismaticGlow 2s ease-in-out infinite;
}

.inventory-slot.quest,
.equip-slot.quest,
.gachapon-item.quest,
.gachapon-result-item.quest {
    box-shadow: inset 0 0 5px 2px var(--quest-color);
}

.inventory-slot.cosmetic,
.equip-slot.cosmetic,
.gachapon-item.cosmetic,
.gachapon-result-item.cosmetic {
    box-shadow: inset 0 0 5px 2px var(--cosmetic-color);
}
.inventory-slot .pixel-art, .equip-slot .pixel-art { 
    transform: scale(3) !important; 
    image-rendering: pixelated;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}
.inventory-slot svg, .equip-slot svg { width: 25% !important; height: 25% !important; }
.inventory-slot.unequippable {
    opacity: 0.4;
    box-shadow: inset 0 0 5px 2px rgba(255, 60, 60, 0.4);
}
.item-quantity {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px #000;
}

#inventory-dismantle-btn:not(:disabled) {
    background: linear-gradient(135deg, rgba(80, 60, 20, 0.6), rgba(160, 120, 40, 0.4));
    border-color: #b8860b;
}
#inventory-dismantle-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(160, 120, 40, 0.7), rgba(218, 165, 32, 0.5));
    border-color: #daa520;
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
}
#equipment-layout {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.equipment-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.equipment-section h4 {
    margin: 0 0 10px 0;
    text-align: center;
}
#equipment-display, #cosmetic-equipment-display { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    justify-items: center;
}
.equip-slot {
    width: 45px; height: 45px; border: 1px dashed var(--theme-text-dim);
    background-color: var(--theme-slot-bg);
    display: flex; justify-content: center; align-items: center;
    position: relative;
    box-sizing: border-box;
    cursor: var(--cursor-pointer, pointer);
}
.equip-slot.cosmetic-slot {
     border-color: var(--cosmetic-color);
}
.equip-slot.drag-over {
    background-color: rgba(76, 175, 80, 0.3);
    border-color: #4CAF50;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
.equip-slot.drag-invalid {
    background-color: rgba(180, 40, 30, 0.2);
    border-color: #e74c3c;
    border-style: solid;
    border-width: 2px;
}

/* Discrete slot-type labels shown in EMPTY equipment slots */
.equip-slot-label {
    font-family: 'Ari9500';
    font-size: 8px;
    color: var(--theme-text-dim);
    opacity: 0.6;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.equip-slot svg { 
    width: 25% !important; 
    height: 25% !important; 
}

/* Fixed height + internal scroll (matches #achievement-list/#medals-list)
   instead of growing to fit — keeps the window a consistent size no matter
   how many skills a class/tab has, rather than relying on open floor space
   below the window's top position. */
#skill-tree-content {
    margin-top: 10px;
    height: 360px;
    overflow-y: auto;
    padding-right: 5px; /* scrollbar spacing, matches achievement/medal lists */
    contain: layout paint;
    transform: translateZ(0);
    will-change: scroll-position;
}

#skill-tree-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}

.skill-tab-btn {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
}
.skill-tab-btn:last-child {
    border-right: none;
}
.skill-tab-btn.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.skill-tab-btn:hover:not(.active) {
    background: var(--theme-hover-bg);
}
.skill-node {
    background-color: var(--theme-slot-bg);
    border: 1px solid var(--theme-btn-hover-top);
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    box-sizing: border-box;
    /* Grab cursor comes from the [draggable="true"] rule below — passives
       aren't hotbar-placeable, so they shouldn't advertise dragging. */
    cursor: default;
}
.skill-node.locked {
    opacity: 0.5;
}
/* Left side: icon + text. min-width:0 lets it shrink so the + button is never clipped */
.skill-node-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.skill-node-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skill-node-info {
    flex: 1 1 auto;
    min-width: 0;
}
.skill-node h4 {
    margin: 0 0 4px 0;
    font-size: var(--font-small);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    line-height: 1.3;
}
.skill-node-lvl {
    color: var(--theme-text-dim, #9aa);
    font-weight: normal;
}
.skill-node p {
    margin: 0;
    font-size: var(--font-small);
    line-height: 1.35;
    overflow-wrap: break-word;
    color: var(--theme-text-body);
}
/* + level-up button: fixed square, never shrinks or gets clipped */
.skill-node button,
.skill-node .skill-add-btn {
    flex-shrink: 0;
    margin: 0;
}
.skill-add-btn {
    border: none;
    cursor: var(--cursor-pointer, pointer);
    transition: transform 0.1s ease, filter 0.1s ease;
}
.skill-add-btn:hover {
    transform: scale(1.12);
    filter: brightness(1.15);
}
.passive-badge {
    display: inline-block;
    background-color: #4a90e2;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Passive Tree Window */
#passive-tree-window {
    width: 1040px;
    height: 560px;
    min-width: 400px;
    min-height: 300px;
}
#passive-tree-window .window-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
}
#passive-tree-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
#passive-tree-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--font-small);
    color: var(--legendary-color);
    font-weight: bold;
}
#passive-tree-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#passive-tree-loadout-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}
.pt-loadout-label {
    font-size: 10px;
    color: rgba(200, 200, 200, 0.55);
    white-space: nowrap;
    margin-right: 2px;
    font-weight: normal;
}
.pt-loadout-slot {
    display: flex;
    align-items: center;
    gap: 2px;
}
.pt-slot-btn {
    font-family: 'Ari9500', sans-serif;
    font-size: 10px;
    background: rgba(40, 40, 60, 0.8);
    border: 1px solid rgba(100, 100, 130, 0.45);
    color: rgba(170, 170, 195, 0.7);
    padding: 2px 6px;
    cursor: var(--cursor-pointer, pointer);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    min-width: 58px;
    transition: background 0.12s, border-color 0.12s;
}
.pt-slot-btn:hover {
    background: rgba(60, 60, 90, 0.9);
    border-color: rgba(200, 200, 225, 0.65);
    color: rgba(210, 210, 230, 0.95);
}
.pt-slot-btn.pt-slot-occupied {
    border-color: rgba(255, 215, 0, 0.55);
    color: rgba(255, 215, 0, 0.9);
    background: rgba(40, 34, 8, 0.85);
}
.pt-slot-btn.pt-slot-occupied:hover {
    background: rgba(60, 52, 14, 0.95);
    border-color: rgba(255, 225, 60, 0.85);
}
.pt-slot-btn.pt-slot-active {
    border-color: rgba(100, 255, 100, 0.8);
    box-shadow: 0 0 6px rgba(100, 255, 100, 0.4);
    background: rgba(14, 40, 14, 0.9);
    color: rgba(140, 255, 140, 0.95);
}
.pt-slot-btn small {
    font-size: 9px;
    opacity: 0.72;
}
.pt-slot-clear {
    font-family: 'Ari9500', sans-serif;
    font-size: 11px;
    background: rgba(55, 18, 18, 0.8);
    border: 1px solid rgba(140, 55, 55, 0.5);
    color: rgba(220, 110, 110, 0.85);
    padding: 1px 4px;
    cursor: var(--cursor-pointer, pointer);
    border-radius: 3px;
    line-height: 1.4;
    transition: background 0.12s;
}
.pt-slot-clear:hover {
    background: rgba(100, 28, 28, 0.95);
    border-color: rgba(220, 90, 90, 0.75);
    color: rgba(255, 140, 140, 0.95);
}
#passive-tree-canvas {
    flex: 1;
    min-width: 0;
    cursor: var(--cursor-resize, grab);
    image-rendering: auto;
}
#passive-tree-canvas:active {
    cursor: var(--cursor-resize, grabbing);
}
#passive-tree-stats-panel {
    width: 155px;
    min-width: 155px;
    flex-shrink: 0;
    background: rgba(10, 10, 20, 0.95);
    border-left: 1px solid rgba(255, 215, 0, 0.3);
    padding: 8px 6px;
    overflow-y: auto;
    font-family: 'Ari9500', sans-serif;
    font-size: 11px;
    color: rgba(220, 220, 230, 0.95);
}
#passive-tree-stats-panel .stats-title {
    color: rgba(255, 215, 0, 0.9);
    font-weight: bold;
    text-align: center;
    margin-bottom: 6px;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 4px;
}
#passive-tree-stats-panel .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#passive-tree-stats-panel .stat-label {
    color: rgba(180, 180, 200, 0.8);
}
#passive-tree-stats-panel .stat-value {
    color: rgba(100, 255, 100, 0.9);
    font-weight: bold;
}
#passive-tree-reset-btn {
    background: rgba(200, 50, 50, 0.3);
    border: 1px solid rgba(200, 50, 50, 0.5);
    color: #ff8888;
}
#passive-tree-reset-btn:hover {
    background: rgba(200, 50, 50, 0.5);
}
#skill-tree-footer:not(:empty) {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
}
.passive-tree-open-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,140,0,0.15));
    border: 2px solid rgba(255,215,0,0.5);
    border-radius: 5px;
    color: #fff;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-medium);
    cursor: var(--cursor-pointer, pointer);
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}
.passive-tree-open-btn:hover {
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,140,0,0.3));
    border-color: rgba(255,215,0,0.8);
}

#stat-window-content {
    font-size: var(--font-small);
}

/* New styles for the reorganized layout */
.stat-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--font-standard);
}

/* Tooltip-hoverable stat rows (stat window) used to hardcode inline
   cursor:default, which overrides the custom pixel cursor set on <html> back
   to the browser's native arrow — the "wrong cursor over stats" bug. They
   show a tooltip on hover, so the custom hand cursor is correct here anyway. */
.stat-tt-hoverable,
.stat-crit-hoverable,
.stat-heavystrike-hoverable {
    cursor: var(--cursor-pointer, pointer);
}

.stat-row span:first-child {
    color: var(--theme-text-secondary); /* Lighter color for the label */
    font-size: var(--font-standard);
    font-weight: bold;
    min-width: 50px;
}

.stat-row > div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-standard);
}

.stat-row > div > span:first-child {
    font-size: var(--font-standard);
    font-weight: bold;
    color: white;
    min-width: 30px;
    text-align: right;
}

.ap-display {
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
    font-size: var(--font-standard);
}

.stat-add-btn {
    padding: 0 4px;
    font-size: var(--font-small);
    line-height: 1;
    margin: 0;
    cursor: var(--cursor-pointer, pointer);
    border: 1px solid #fff;
    background: var(--theme-hover-bg);
}
.stat-bonus { 
    color: cyan !important; 
    text-align: left !important; 
    font-size: var(--font-standard);
    white-space: nowrap;
    flex-shrink: 0;
}

#level-up-notification-container {
    position: absolute;
    /* --- MODIFIED: Positioned above the player's head --- */
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    /* Give it a fixed width for centering */
    /* --- END MODIFIED --- */
    z-index: 250;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#global-notification-container {
    position: absolute;
    top: 40%;
    /* A little above true center often looks better */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 250;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.delete-char-btn {
    background-color: var(--hp-color);
    border: 1px solid white;
    color: white;
    padding: 8px 16px;
    font-size: var(--font-standard);
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    margin-left: 10px;
}
.delete-char-btn:hover {
    background-color: #a03020;
}

#buff-container {
    position: absolute;
    top: 80px;
    right: 20px;
    left: auto;
    z-index: 101;
    display: flex;
    gap: 5px;
}
.buff-icon {
    width: 48px;
    height: 48px;
    border: 2px solid var(--ui-border);
    background-color: var(--bar-bg);
    position: relative;
    /* Add these three lines for centering */
    display: flex;
    justify-content: center;
    align-items: center;
}
.buff-timer {
    position: absolute;
    bottom: 0;
    right: 2px;
    font-size: var(--font-small);
    text-shadow: 1px 1px #000;
}


.quest-item {
    padding: 8px;
    margin-bottom: 8px;
    background: var(--bar-bg);
    border-left: 3px solid var(--exp-color);
}
.quest-item.completed {
     border-left: 3px solid #2ecc71;
     opacity: 0.7;
}
.quest-item h4 { margin: 0 0 5px; }
.quest-item p { margin: 0; font-size: var(--font-standard); }

/* ── Shop Item Cards ── */
.shop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bar-bg);
    margin-bottom: 4px;
    border-radius: 4px;
    border-left: 3px solid var(--ui-border);
    transition: background 0.15s ease, border-color 0.15s ease;
    /* The row has a tooltip attached (addTooltipEvents) even though the actual
       Buy/Sell click target is the nested <button> — same "hovers but shows
       the wrong cursor" bug as the stat rows / gear inspect rows. */
    cursor: var(--cursor-pointer, pointer);
}
.shop-item:hover {
    background: rgba(255,255,255,0.06);
}
.shop-item.rarity-common  { border-left-color: #aaa; }
.shop-item.rarity-uncommon { border-left-color: #2ecc71; }
.shop-item.rarity-rare     { border-left-color: #3498db; }
.shop-item.rarity-epic     { border-left-color: #9b59b6; }
.shop-item.rarity-legendary { border-left-color: #f39c12; }
.shop-item.rarity-mythic { border-left-color: #00e5cc; }
.shop-item.rarity-prismatic { border-left-color: #f0eaff; animation: prismaticBorder 2s ease-in-out infinite; }
.shop-item.rarity-cosmetic { border-left-color: #e91e63; }
.shop-item.rarity-quest    { border-left-color: #e67e22; }

.shop-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shop-item-name {
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    color: var(--theme-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-item-price {
    font-family: 'Ari9500';
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}
.shop-item-price.cant-afford {
    color: var(--fail-color);
}
.shop-item button {
    margin-top: 0;
    padding: 5px 12px;
    font-size: var(--font-small);
    flex-shrink: 0;
    border-radius: 3px;
}

/* ── Shop Currency Footer ── */
.shop-currency-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid var(--ui-border);
    border-radius: 0 0 4px 4px;
    margin-top: 8px;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
}
.shop-currency-bar .currency-label {
    color: var(--theme-text-secondary);
}
.shop-currency-bar .currency-amount {
    color: var(--exp-color);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Shop List Scrollable Area ── */
.shop-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Shop list scrollbar — handled by universal rule */

.shop-empty-msg {
    text-align: center;
    color: var(--theme-text-secondary);
    padding: 20px;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
}

.npc-interaction-prompt {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid white;
    font-size: var(--font-small);
    display: none;
    z-index: 100;
    white-space: nowrap;
}

.shop-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}
.tab-button {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
}
.tab-button:last-child {
    border-right: none;
}
.tab-button.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.tab-button:hover:not(.active) {
    background: var(--theme-hover-bg);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Settings window scroll: the content area flexes to fill the fixed-height window,
   the tab bar + footer stay put, and only the ACTIVE tab-content scrolls — so the
   long Video tab gets a scrollbar without the window changing size between tabs. */
#settings-menu .window-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* the tab-content scrolls, not this */
}
#settings-content .shop-tabs {
    flex-shrink: 0;
}
/* The visible tab (display:block/active) flexes to fill and scrolls; hidden tabs
   are display:none so flex ignores them. Targeting all .tab-content (not just
   .active) covers the gamepad/keyboard reset path that sets display without .active. */
#settings-content .tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}
#settings-content .tab-content::-webkit-scrollbar {
    width: 6px;
}
#settings-content .tab-content::-webkit-scrollbar-track {
    background: var(--bar-bg);
}
#settings-content .tab-content::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

/* Quest Tab Specific Styles */
.quest-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}
.quest-tab-button {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
}
.quest-tab-button:last-child {
    border-right: none;
}
.quest-tab-button.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}
.quest-tab-button:hover:not(.active) {
    background: var(--theme-hover-bg);
}
.quest-tab-content { 
    display: none; 
    max-height: 320px;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -5px;
    padding-bottom: 10px;
}
.quest-tab-content.active { display: block; }

/* Quest Item Styles */
.quest-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #3a374f;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.quest-item.available {
    border-left: 4px solid var(--common-color);
}

.quest-item.active {
    border-left: 4px solid var(--exp-color);
}

.quest-item.completed {
    border-left: 4px solid var(--rare-color);
    opacity: 0.8;
}

.quest-item h4 {
    margin: 0 0 6px 0;
    color: #fff;
    font-size: var(--font-small);
}

.quest-item p {
    margin: 3px 0;
    font-size: var(--font-small);
    line-height: 1.3;
}

.quest-description {
    color: #b0aec5;
    font-style: italic;
}

.quest-objective {
    color: var(--exp-color);
}

.quest-reward {
    color: var(--rare-color);
}

.quest-chain {
    color: var(--legendary-color);
    font-size: var(--font-small);
}

.quest-level {
    color: var(--rare-color);
    font-size: var(--font-small);
    font-weight: bold;
}

/* Quest Count Badges */
.quest-count {
    background: var(--exp-color);
    color: #000;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: var(--font-small);
    margin-left: 5px;
    display: inline-block;
    min-width: 12px;
    text-align: center;
}

/* Progress Bar for Active Quests */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin: 5px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--exp-color), var(--rare-color));
    transition: width 0.3s ease;
}

/* Quest Complete Screen */
.quest-complete-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
}

.qc-header {
    font-size: 16px;
    font-weight: bold;
    color: var(--legendary-color);
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.qc-title {
    font-size: 13px;
    color: var(--theme-text-bright);
    text-align: center;
    margin-bottom: 4px;
}

.qc-rewards {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 8px;
}

.qc-rewards-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--theme-text-dim);
    text-align: center;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.qc-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qc-reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.qc-reward-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qc-reward-name {
    font-size: 12px;
    color: var(--theme-text-bright);
}

.qc-reward-name.common { color: var(--common-color, #b0b0b0); }
.qc-reward-name.rare { color: var(--rare-color); }
.qc-reward-name.epic { color: var(--epic-color); }
.qc-reward-name.legendary { color: var(--legendary-color); }

.qc-close-btn {
    margin-top: 4px;
    width: 100%;
}

.sell-item-details { display: flex; justify-content: space-between; align-items: center; }
.item-name.common { color: var(--common-color); }
.item-name.rare { color: var(--rare-color); }
.item-name.epic { color: var(--epic-color); }
.item-name.legendary { color: var(--legendary-color); }
.item-name.cosmetic { color: var(--cosmetic-color); }
.item-name.quest { color: var(--quest-color); }

.controls-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0 auto;
    max-width: 320px;
    font-size: var(--font-standard);
}
.controls-list li { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 6px; 
    padding: 2px 0;
}
.controls-list li span:first-child { 
    color: var(--exp-color); 
    margin-right: 15px; 
    font-weight: bold;
    min-width: 60px;
}

/* Key Mapping Styles */
/* No max-height/overflow here: the parent .tab-content (#settings-controls-content)
   already scrolls the whole Keyboard tab. A second scrollable container here caused
   two stacked scrollbars. */
.key-mapping-container {
    padding-right: 0;
}

.key-mapping-group {
    margin-bottom: 20px;
}

.key-mapping-group h4 {
    color: var(--exp-color);
    margin-bottom: 10px;
    font-size: var(--font-standard);
    border-bottom: 1px solid var(--ui-border);
    padding-bottom: 5px;
}

.key-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.key-mapping-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.action-name {
    color: #fff;
    font-size: var(--font-standard);
    flex: 1;
}

.key-mapping-button {
    background-color: var(--bar-bg);
    border: 1px solid var(--ui-border);
    color: #fff;
    padding: 8px 16px;
    min-width: 80px;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
}

.key-mapping-button:hover {
    background-color: var(--ui-border);
    border-color: var(--exp-color);
}

.key-mapping-button.capturing {
    background-color: var(--exp-color);
    border-color: #fff;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.key-mapping-controls {
    margin-top: 20px;
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid var(--ui-border);
}

#enhancement-confirm-modal .window-content { text-align: center; }

#upgrade-confirm-modal {
    width: 400px;
    top: 200px;
    left: 200px;
    transform: none;
}
#upgrade-confirm-modal .window-content { text-align: center; }

.upgrade-rarity-arrow {
    font-size: 16px;
    color: var(--theme-text);
    margin: 0 6px;
}

.upgrade-stat-diff {
    color: var(--success-color);
}
/* No extra box: --ui-bg-dark was never defined, so this always fell back to
   a hardcoded dark blue that ignored the active theme. The inner sections
   carry their own themed panels; the window fill shows through here. */
#enhancement-info,
#upgrade-info {
    padding: 0 0 8px;
    margin-bottom: 4px;
    text-align: left;
}
#enhancement-confirm-buttons { display: flex; justify-content: space-around; gap: 8px; }

.enhancement-bonus {
    color: #f39c12; /* Orange-yellow color for enhancement bonuses */
    font-weight: bold;
}

#minimap-container {
    position: absolute;
    top: 25px;
    left: 10px;
    width: 200px;
    /* Same skin as .window so it matches the rest of the UI */
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    z-index: 150;
    color: #fff;
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    display: none;
}

/* Party Overlay - under minimap */
#party-overlay {
    position: absolute;
    /* Clears the minimap (bottom edge measured at 222px with the standard
       x2 window frame at default minimap height) */
    top: 232px;
    left: 10px;
    width: 152px; /* was 200px — a slim HUD strip, not a full panel */
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 149;
    color: #fff;
    font-family: 'Ari9500';
    font-size: var(--font-small);
    overflow: hidden;
}
#party-overlay-header {
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    padding: 2px 6px;
    border-bottom: 1px solid var(--ui-border);
    font-weight: bold;
    font-size: var(--font-small);
    cursor: var(--cursor-resize, move);
    user-select: none;
}
#party-overlay-members {
    padding: 3px;
    max-height: 128px;
    overflow-y: auto;
}
.party-overlay-member {
    padding: 2px 4px;
    margin: 1px 0;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.party-overlay-member .member-info {
    display: flex;
    align-items: center;
    gap: 4px;
}
.party-overlay-member .member-bars {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 12px;
}
.party-overlay-member .member-bar {
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
}
.party-overlay-member .member-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.party-overlay-member .hp-bar .member-bar-fill {
    background: linear-gradient(to bottom, #ff6b6b, #c0392b);
}
.party-overlay-member .exp-bar .member-bar-fill {
    background: linear-gradient(to bottom, #f1c40f, #d68910);
}
.party-overlay-member .hp-bar.low .member-bar-fill {
    background: linear-gradient(to bottom, #e74c3c, #922b21);
    animation: pulse-hp 1s infinite;
}
@keyframes pulse-hp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.party-overlay-member .member-level {
    font-size: 9px;
    color: #f1c40f;
    margin-left: auto;
}
.party-overlay-member.same-map {
    background: rgba(46, 204, 113, 0.3);
    border-left: 3px solid #2ecc71;
}
.party-overlay-member.different-map {
    background: rgba(149, 165, 166, 0.2);
    border-left: 3px solid var(--theme-text-dim);
    opacity: 0.7;
}
.party-overlay-member .member-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.party-overlay-member .member-map {
    font-size: 10px;
    color: var(--theme-text-secondary);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.party-overlay-member.same-map .member-map {
    color: #2ecc71;
}
.party-overlay-member .leader-crown {
    color: #f1c40f;
}

/* Colosseum Queue Overlay - matches party-overlay styling */
#colosseum-queue-overlay {
    position: absolute;
    /* Below the Quest Helper's full extent (top 157 + title + 200px content
       ≈ 395) — the two share the right column and used to overlap */
    top: 405px;
    right: 10px;
    width: 200px;
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-top: 1px solid var(--theme-window-accent-border);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 1px var(--theme-window-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 200;
    color: #fff;
    font-family: 'Ari9500';
    font-size: var(--font-small);
    overflow: hidden;
}
@keyframes colosseum-powerup-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
#colosseum-queue-overlay-header {
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    padding: 4px 8px;
    border-bottom: 1px solid var(--ui-border);
    font-weight: bold;
    font-size: var(--font-standard);
    cursor: default;
    user-select: none;
}
#colosseum-queue-overlay-content {
    padding: 8px;
    text-align: center;
}
#minimap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    padding: 3px 5px;
    border-bottom: 1px solid var(--ui-border);
}
#map-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Ari9500';
    font-weight: bold;
    font-size: var(--font-standard);
}
#toggle-minimap-btn {
    background: none;
    border: 1px solid var(--ui-border);
    color: #fff;
    cursor: var(--cursor-pointer, pointer);
    padding: 4px 8px;
    font-family: 'Ari9500';
    font-size: var(--font-small);
    pointer-events: auto;
}
#minimap {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    transition: height 0.2s ease;
}
#minimap.collapsed {
    height: 0;
    padding: 0;
}

#minimap-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: -2px;
    right: -2px;
    cursor: var(--cursor-resize, se-resize);
    border-bottom: 2px solid var(--ui-border);
    border-right: 2px solid var(--ui-border);
    pointer-events: auto;
    z-index: 200;
}

#minimap-player, .minimap-npc, .minimap-monster, .minimap-portal, .minimap-platform, .minimap-boss, .minimap-remote-player {
    position: absolute; 
}
#minimap-player { 
    width: 4px; height: 4px; border-radius: 50%; background-color: yellow; z-index: 3; 
}
.minimap-remote-player {
    width: 4px; height: 4px; border-radius: 50%; background-color: #00bfff; z-index: 2;
}
.minimap-npc { 
    width: 4px; height: 4px; border-radius: 50%; background-color: #2ecc71; z-index: 2; 
} 
.minimap-monster { 
    width: 4px; height: 4px; border-radius: 50%; background-color: #e74c3c; z-index: 1; 
} 
.minimap-portal { 
    width: 6px; height: 6px; border-radius: 50%; background-color: #3498db; z-index: 1; 
} 
.minimap-platform {
    background-color: #8B4513; z-index: 0;
}
.minimap-boss {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f39c12; /* Legendary Orange */
    border: 1px solid white;
    z-index: 2; /* Ensure it draws on top of other monsters */
    animation: pulse 1s infinite;
}
.minimap-ladder {
    background-color: rgba(200, 200, 200, 0.6); /* A light grey color */
    z-index: 0; /* Behind other dots */
}
.minimap-quest-indicator {
    position: absolute;
    top: 50px;
    font-size: var(--font-standard); /* Make it larger than other dots */
    font-weight: bold;
    z-index: 4; /* On top of everything else */
    text-shadow: 1px 1px #000;
    pointer-events: none;
}
.minimap-quest-available {
    color: var(--exp-color); /* Yellow ! */
}
.minimap-quest-complete {
    color: var(--success-color); /* Green ? */
}
.monster-death {
    transition: opacity 0.5s linear;
    opacity: 0;
    pointer-events: none;
}

/* ======================== */
/* TREASURE CHEST SYSTEM    */
/* ======================== */
.chest {
    pointer-events: none;
    transition: opacity 0.8s ease-out;
}

.chest.epic-chest {
    filter: drop-shadow(0 0 6px #ffdd44) drop-shadow(0 0 12px #ffaa00);
    animation: epicChestGlow 1.5s ease-in-out infinite alternate;
}

@keyframes epicChestGlow {
    0% {
        filter: drop-shadow(0 0 4px #ffdd44) drop-shadow(0 0 8px #ffaa00);
    }
    100% {
        filter: drop-shadow(0 0 8px #ffee66) drop-shadow(0 0 16px #ffcc00);
    }
}

#gm-window {
    width: 600px;
    max-width: calc(100vw - 40px);
    top: 8px;
    left: 460px;
    /* Sized in DESIGN-SPACE pixels, not vh: windows live inside the scaled
       #windows-overlay, so vh units get multiplied by the game scale and the
       panel overflowed the screen. The overlay's design height is 768px. */
    max-height: 748px;
    transform: none;
}
/* The pixel skin makes every button bulkier, so this dense two-column dev panel
   outgrew the viewport. Cap its height and let the content scroll instead. */
#gm-window-content {
    max-height: 690px;
    overflow-y: auto;
    overflow-x: hidden;
}
.gm-two-col {
    display: flex;
    gap: 14px;
    margin-bottom: 4px;
}
.gm-col {
    flex: 1;
    min-width: 0;
}
.gm-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.gm-row select,
.gm-row input {
    flex: 1;
    width: auto !important;
    min-width: 0;
    margin-bottom: 0 !important;
}
.gm-row button {
    flex-shrink: 0;
    white-space: nowrap;
}
.gm-bottom-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
}
.gm-bottom-row button {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}
#gm-item-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px !important;
}
#gm-item-select[size] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    height: auto;
}
#gm-spawn-qty {
    max-width: 58px;
}
.gm-control-group {
    margin-bottom: 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ui-border);
}

.gm-control-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#gm-window-content label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-small);
}

#gm-window-content select,
#gm-window-content input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

#gm-window-content button {
    margin-top: 0;
}

/* --- Enhanced CRT Shader Effect --- */
/* Fixed CRT settings - always enabled with specific values */
.crt-shader {
    position: relative;
    --crt-intensity: 1; /* Light intensity */
    --crt-scanlines: 0; /* 0% scanlines */
    --crt-curvature: 10; /* 10% curvature */
}

/* Main CRT container styling - always active */
.crt-shader #game-container {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #000000 100%);
    border-radius: calc(var(--crt-curvature) * 0.3px);
    overflow: hidden;
    position: relative;
}

/* Scanlines overlay - always active */
.crt-shader::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
    
    /* Dynamic scanlines - dark lines for authentic CRT look */
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, calc(var(--crt-scanlines) * 0.003 * var(--crt-intensity))) 2px,
        rgba(0, 0, 0, calc(var(--crt-scanlines) * 0.003 * var(--crt-intensity))) 3px,
        transparent 4px
    );
    
    /* Screen curvature and vignette */
    border-radius: calc(var(--crt-curvature) * 0.5px);
    box-shadow: 
        inset 0 0 calc(var(--crt-curvature) * 3px) rgba(0, 0, 0, calc(var(--crt-intensity) * 0.3)),
        inset 0 0 calc(var(--crt-curvature) * 6px) rgba(0, 0, 0, calc(var(--crt-intensity) * 0.2)),
        inset 0 0 calc(var(--crt-curvature) * 12px) rgba(0, 0, 0, calc(var(--crt-intensity) * 0.15));
}

/* Screen glow and subtle effects - always active with phosphor glow */
.crt-shader::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10001;
    
    /* Subtle screen glow - warm white instead of green */
    background: 
        radial-gradient(ellipse at center, 
            transparent 60%, 
            rgba(255, 255, 255, calc(var(--crt-intensity) * 0.008)) 80%,
            rgba(200, 200, 255, calc(var(--crt-intensity) * 0.015)) 100%);
    
    border-radius: calc(var(--crt-curvature) * 0.5px);
    mix-blend-mode: overlay;
}

/* CRT flicker animation - disabled as requested */
/* Flicker effect removed per user request */

@keyframes crt-flicker {
    0% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    96% {
        opacity: calc(1 - var(--crt-intensity) * 0.05);
    }
    97% {
        opacity: 1;
    }
    98% {
        opacity: calc(1 - var(--crt-intensity) * 0.03);
    }
    100% {
        opacity: 1;
    }
}

/* Enhanced CRT effects on the game canvas - always active */
.crt-shader #game-canvas {
    filter: 
        brightness(calc(1.05 + var(--crt-intensity) * 0.05))
        contrast(calc(1.1 + var(--crt-intensity) * 0.1))
        saturate(calc(0.95 + var(--crt-intensity) * 0.1))
        sepia(calc(var(--crt-intensity) * 0.02));
    
    /* Add subtle barrel distortion */
    transform: perspective(1000px) rotateX(calc(var(--crt-curvature) * 0.02deg)) rotateY(calc(var(--crt-curvature) * 0.01deg));
}

/* Subtle glow on UI elements - can be toggled */
/* Phosphor glow effect - always enabled as requested */
.crt-shader.crt-glow .window {
    box-shadow: 
        0 0 calc(var(--crt-intensity) * 8px) rgba(255, 255, 255, calc(var(--crt-intensity) * 0.08)),
        0 0 calc(var(--crt-intensity) * 16px) rgba(200, 220, 255, calc(var(--crt-intensity) * 0.04)),
        0 2px 4px rgba(0, 0, 0, 0.4);
    
    border: 1px solid rgba(255, 255, 255, calc(var(--crt-intensity) * 0.1));
}

/* Phosphor glow on text - always active as requested */
.crt-shader.crt-glow .window-title {
    text-shadow: 
        0 0 calc(var(--crt-intensity) * 2px) rgba(255, 255, 255, calc(var(--crt-intensity) * 0.3)),
        0 0 calc(var(--crt-intensity) * 4px) rgba(200, 220, 255, calc(var(--crt-intensity) * 0.15));
}

/* Phosphor glow on buttons - always active as requested */
.crt-shader.crt-glow button {
    box-shadow: 
        0 0 calc(var(--crt-intensity) * 4px) rgba(255, 255, 255, calc(var(--crt-intensity) * 0.06));
    
    border: 1px solid rgba(255, 255, 255, calc(var(--crt-intensity) * 0.08));
}

/* Phosphor glow on button hover - always active as requested */
.crt-shader.crt-glow button:hover {
    box-shadow: 
        0 0 calc(var(--crt-intensity) * 6px) rgba(255, 255, 255, calc(var(--crt-intensity) * 0.12)),
        0 0 calc(var(--crt-intensity) * 12px) rgba(200, 220, 255, calc(var(--crt-intensity) * 0.06));
    
    text-shadow: 0 0 calc(var(--crt-intensity) * 1px) rgba(255, 255, 255, calc(var(--crt-intensity) * 0.2));
}

/* Enhanced text glow for CRT effect - always active as requested */
.crt-shader.crt-glow {
    text-shadow: 0 0 calc(var(--crt-intensity) * 1px) rgba(255, 255, 255, calc(var(--crt-intensity) * 0.15));
}

/* Global Tab System Styling - Unified Design */
/* All tab containers should use this consistent styling */
.tabs, .bestiary-tabs, .quest-tabs, .shop-tabs, #inventory-tabs, #skill-tree-tabs, .achievement-tabs, .cj-tab-bar {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(69, 66, 90, 0.4);
    gap: 1px;
}

/* All tab buttons should use this consistent styling */
.tab-btn, .tab-button, .quest-tab-button, .skill-tab-btn, .bestiary-tab-button, .achievement-tab-button, .cj-tab {
    flex: 1;
    padding: 7px 6px;
    background: var(--ui-bg);
    color: var(--theme-text-secondary);
    border: none;
    outline: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid rgba(69, 66, 90, 0.15);
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.tab-btn:last-child, .tab-button:last-child, .quest-tab-button:last-child, 
.skill-tab-btn:last-child, .bestiary-tab-button:last-child,
.achievement-tab-button:last-child, .cj-tab:last-child {
    border-right: none;
}

.tab-btn.active, .tab-button.active, .quest-tab-button.active, 
.skill-tab-btn.active, .bestiary-tab-button.active,
.achievement-tab-button.active, .cj-tab.active {
    background: linear-gradient(180deg, var(--ui-accent-dim) 0%, rgba(0, 0, 0, 0.1) 100%);
    color: var(--theme-text-bright);
    border-bottom: 2px solid var(--ui-accent);
    text-shadow: 0 0 8px var(--ui-accent-dim);
}

.tab-btn:hover:not(.active), .tab-button:hover:not(.active), .quest-tab-button:hover:not(.active),
.skill-tab-btn:hover:not(.active), .bestiary-tab-button:hover:not(.active),
.achievement-tab-button:hover:not(.active), .cj-tab:hover:not(.active) {
    background: var(--theme-hover-bg);
    color: var(--theme-text-body);
}

/* Intensity-based presets */
.crt-shader[data-intensity="1"] {
    --crt-intensity: 1;
}

.crt-shader[data-intensity="2"] {
    --crt-intensity: 2;
}

.crt-shader[data-intensity="3"] {
    --crt-intensity: 3;
}

/* Additional visual noise for higher intensities */
.crt-shader[data-intensity="3"]::before {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, calc(var(--crt-scanlines) * 0.003 * var(--crt-intensity))) 2px,
            rgba(0, 0, 0, calc(var(--crt-scanlines) * 0.003 * var(--crt-intensity))) 3px,
            transparent 4px
        ),
        /* Add subtle vertical lines for authentic CRT look */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.015) 2px,
            transparent 3px
        );
}

/* RGB chromatic aberration for highest intensity */
.crt-shader[data-intensity="3"] #game-canvas {
    position: relative;
}

.crt-shader[data-intensity="3"] #game-canvas::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    transform: translateX(0.5px);
    filter: 
        hue-rotate(180deg) 
        saturate(1.5) 
        brightness(0.8)
        contrast(1.2);
    opacity: 0.08;
    pointer-events: none;
}

/* CRT Options Panel Styling */
#crt-options {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 8px;
    margin-top: 8px;
    margin-left: 15px;
}

#crt-options .option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

#crt-options .option-item:last-child {
    margin-bottom: 0;
}

#crt-options label {
    flex: 1;
    min-width: 80px;
    font-size: var(--font-small);
}

#crt-options input[type="range"] {
    flex: 2;
    min-width: 60px;
    height: 4px;
}

#crt-options span {
    flex: 0 0 auto;
    min-width: 40px;
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
    text-align: right;
}

/* Enhanced slider styling for CRT options */
#crt-options input[type="range"] {
    background: linear-gradient(to right, #333, #666);
    border-radius: 2px;
    height: 4px;
}

#crt-options input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(45deg, #dddddd, #aaaaaa);
    border: 1px solid var(--theme-btn-hover-top);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

#crt-options input[type="range"]::-moz-range-thumb {
    background: linear-gradient(45deg, #dddddd, #aaaaaa);
    border: 1px solid var(--theme-btn-hover-top);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Checkbox styling for CRT options */
#crt-options input[type="checkbox"] {
    accent-color: #4a9eff;
}

#crt-options input[type="checkbox"]:checked {
    box-shadow: 0 0 3px rgba(74, 158, 255, 0.4);
}

/* --- Appearance Window Styles --- */
#appearance-window {
    max-height: 720px;
}

#appearance-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    max-height: 520px;
}

#appearance-footer {
    padding: 10px;
    border-top: 1px solid var(--ui-border);
    text-align: center;
    background-color: #1c2833;
}

#appearance-footer p {
    margin: 0 0 10px 0;
    font-size: var(--font-small);
    color: var(--exp-color);
    font-weight: bold;
}

.appearance-actions {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

#appearance-apply-btn {
    background-color: var(--success-color);
}

#appearance-cancel-btn {
    background-color: var(--fail-color);
}

/* Coin animation for gold drops */
@keyframes coin-spin {
    0% { background-position: 0px 0px; }
    25% { background-position: -24px 0px; }
    50% { background-position: -48px 0px; }
    75% { background-position: -72px 0px; }
    100% { background-position: 0px 0px; }
}

/* Monster Killer Medal Display */
.monster-killer-medal-display {
    position: relative; /* Changed from absolute to work with flex container */
    font-family: 'Ari9500' !important;
    font-size: var(--font-small) !important;
    font-weight: bold !important;
    color: white !important;
    text-shadow: 1px 1px 2px #000000 !important;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1;
    text-align: center; /* Center text within each medal */
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(40, 40, 50, 0.85);
    /* Force crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
}

/* Bronze — warm solid background with subtle copper border */
.monster-killer-medal-display.bronze { 
    background: linear-gradient(135deg, #cd7f32 0%, #a0622a 100%);
    border: 1px solid #e8a050;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Silver — metallic sheen with silver border and subtle shine */
.monster-killer-medal-display.silver { 
    background: linear-gradient(135deg, #d0d0d0 0%, #a8a8a8 50%, #c0c0c0 100%);
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 2px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.monster-killer-medal-display.silver::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: nameplateShine 4s infinite;
    pointer-events: none;
}

/* Gold — rich golden gradient with warm glow and shine sweep */
.monster-killer-medal-display.gold { 
    background: linear-gradient(135deg, #ffd700 0%, #f0a500 50%, #ffc800 100%);
    border: 1px solid #ffe066;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.monster-killer-medal-display.gold::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: nameplateShine 3s infinite;
    pointer-events: none;
}

/* Diamond — icy gradient with crystalline glow and bright shine */
.monster-killer-medal-display.diamond { 
    background: linear-gradient(135deg, #b9f2ff 0%, #7dd8ec 50%, #a0eaff 100%);
    border: 1px solid #d4f7ff;
    box-shadow: 0 0 8px rgba(120, 220, 255, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
    color: #1a3a4a !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.6), 1px 1px 1px rgba(0, 0, 0, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.monster-killer-medal-display.diamond::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: nameplateShine 2.5s infinite;
    pointer-events: none;
}

/* Epic/Purple tier for special medals (Beta Tester, Founding Player) */
.monster-killer-medal-display.epic { 
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #6c3483 100%);
    position: relative;
    overflow: hidden;
    border: 1px solid #bb8fce;
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.2);
}

.monster-killer-medal-display.epic::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        rgba(200, 150, 255, 0.3),
        transparent
    );
    animation: nameplateShine 2s infinite;
    pointer-events: none;
}

/* Vanquisher — rainbow prismatic with animated border and background */
.monster-killer-medal-display.vanquisher {
    background: linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0088);
    background-size: 400% 400%;
    animation: vanquisherNameplateBg 3s ease infinite;
    position: relative;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(255, 100, 200, 0.7), 0 0 20px rgba(100, 200, 255, 0.4), inset 0 0 6px rgba(255, 255, 255, 0.3);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 1px 1px 2px #000000 !important;
}

.monster-killer-medal-display.vanquisher::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        rgba(255, 200, 255, 0.3),
        transparent
    );
    animation: nameplateShine 1.5s infinite;
    pointer-events: none;
}

@keyframes vanquisherNameplateBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes nameplateShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.monster-killer-medal-display:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    z-index: 1001; /* Ensure hovered medal appears above others */
}

/* Stat medal indicator - shows which medal gives stats */
.monster-killer-medal-display.stat-medal {
    border-width: 2px;
    font-weight: bold;
}

.monster-killer-medal-display.stat-medal::after {
    margin-left: 4px;
    font-size: 10px;
}

/* Monster Killer Medal Toggle Section in Bestiary */
.monster-killer-medal-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    margin: 5px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    gap: 5px;
}

.monster-killer-medal-section .medal-status {
    display: flex;
    align-items: center;
    color: #ffd700;
    font-size: var(--font-small);
}

.monster-killer-medal-section .medal-text {
    font-weight: bold;
    text-align: center;
}

.medal-toggle-btn {
    padding: 4px 8px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    border: 1px solid var(--theme-btn-hover-top);
    border-radius: 3px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s ease;
}

.medal-toggle-btn.visible {
    background: #4CAF50;
    color: white;
    border-color: #45a049;
}

.medal-toggle-btn.visible:hover {
    background: #45a049;
    border-color: #3d8b40;
}

.medal-toggle-btn.hidden {
    background: #f44336;
    color: white;
    border-color: #da190b;
}

.medal-toggle-btn.hidden:hover {
    background: #da190b;
    border-color: #c0392b;
}

/* Bestiary Medals Tab Styles */
.bestiary-medals-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--ui-border);
}

.bestiary-medals-header h3 {
    margin: 0 0 10px 0;
    color: #ffd700;
}

.medals-progress {
    margin: 10px 0;
}

.medals-progress .progress-bar {
    width: 100%;
    height: 20px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    overflow: hidden;
    margin: 8px 0;
}

.medals-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transition: width 0.3s ease;
}

.medals-progress p {
    margin: 5px 0;
    font-size: var(--font-standard);
    color: var(--theme-text-secondary);
}

.medals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.medal-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
}

.medal-card.regular-medal {
    border-color: #4CAF50;
}

.medal-card.boss-medal {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.medal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.medal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.medal-header h4 {
    margin: 0;
    color: #ffd700;
    font-size: var(--font-standard);
}

.medal-type {
    font-size: var(--font-small);
    padding: 2px 6px;
    border-radius: 12px;
    color: white;
    font-weight: bold;
}

.medal-card.regular-medal .medal-type {
    background: #4CAF50;
}

.medal-card.boss-medal .medal-type {
    background: #ff6b6b;
}

.medal-info {
    margin: 10px 0;
}

.medal-info p {
    margin: 5px 0;
    font-size: var(--font-standard);
    color: var(--theme-text-secondary);
}

.medal-actions {
    text-align: center;
    margin-top: 10px;
}

.no-medals {
    text-align: center;
    padding: 40px;
    color: var(--theme-text-secondary);
    font-style: italic;
    grid-column: 1 / -1;
}

.medals-info {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.medals-info h4 {
    margin: 0 0 10px 0;
    color: var(--theme-text-bright);
}

.medals-info ul {
    margin: 0;
    padding-left: 20px;
}

.medals-info li {
    margin: 5px 0;
    font-size: var(--font-standard);
    color: var(--theme-text-secondary);
}

/* Monster Medal Icon in Bestiary Tabs */
.monster-medal-icon {
    display: inline-block;
    margin-left: 5px;
    font-size: var(--font-standard);
    animation: medalGlow 2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 2px #ffd700);
}

@keyframes medalGlow {
    0% { 
        transform: scale(1);
        filter: drop-shadow(0 0 2px #ffd700);
    }
    100% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 4px #ffd700);
    }
}

/* === Enhanced Polish & Responsive Design Improvements === */

/* Loading screen improvements */
#loading-screen {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Smooth window animations */
.window {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    will-change: transform, opacity;
}

.window.opening {
    animation: windowOpen 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.window.closing {
    animation: windowClose 0.15s ease-in forwards;
}

/* Fade+slide only — NO scale(): fractional transform scale shimmers the
   9-slice border-image frames while the animation runs. */
@keyframes windowOpen {
    from {
        transform: translateY(8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes windowClose {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(6px);
        opacity: 0;
    }
}

/* Fullscreen mode optimizations */
:fullscreen #game-container,
:-webkit-full-screen #game-container,
:-moz-full-screen #game-container {
    background: #000;
}

:fullscreen #scaling-container,
:-webkit-full-screen #scaling-container,
:-moz-full-screen #scaling-container {
    background: transparent;
}

/* Enhanced cursor states */
.draggable {
    cursor: var(--cursor-resize, grab);
}

.draggable:active {
    cursor: var(--cursor-resize, grabbing);
}

.window-header, .window-title {
    cursor: var(--cursor-resize, move);
}

/* Better button interactions */
button:not(.close-btn):hover {
    transform: translateY(-1px);
    transition: all 0.15s ease;
}

button:not(.close-btn):active {
    transform: translateY(0px);
    filter: brightness(0.92);
    transition: all 0.05s ease;
}

/* Performance optimizations */
canvas {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

#scaling-container * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Enhanced game container styling */
#game-container {
    overflow: hidden;
    position: relative;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ── Universal scrollbar style (matches quest helper) ── */
*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: var(--bar-bg);
}

*::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

/* Prevent text selection on UI elements */
.hotbar, .ui-element, .window-title, .tabs {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Smooth transitions for responsive scaling */
#scaling-container {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Font Face Declarations ---
   font-display: block — briefly invisible text beats a flash of the ugly
   default font; combined with the <link rel="preload"> tags in index.html
   the fonts are normally ready before first paint anyway. */
@font-face {
    font-family: 'Ari9500';
    src: url('./assets/fonts/ari-w9500.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Ari9500';
    src: url('./assets/fonts/ari-w9500-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Ari9500Display';
    src: url('./assets/fonts/ari-w9500-display.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* --- Global Styles --- */
body {
    background-color: #000;
    color: #fff;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-standard); /* Base font size */
    display: flex; /* ADDED */
    justify-content: center; /* ADDED */
    align-items: center; /* ADDED */
    height: 100vh;
    margin: 0;
    overflow: hidden;
    user-select: none;
}

#loading-screen, #character-name, #game-clock, #start-screen button {
    font-family: 'Ari9500', sans-serif;
}

/* --- Account Storage Window --- */
#account-storage-window {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#account-storage-window .window-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

#account-storage-sections {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.account-storage-section {
    flex: 1;
    min-width: 0;
}

.account-storage-section h4 {
    text-align: center;
    margin-bottom: 6px;
    color: var(--theme-text-primary);
    font-size: 13px;
}

.account-storage-grid {
    display: grid;
    grid-template-columns: repeat(4, 45px);
    gap: 5px;
    justify-content: center;
    padding: 6px;
    background: var(--theme-panel-bg);
    border-radius: 4px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

.account-storage-slot {
    width: 45px;
    height: 45px;
    background: var(--theme-slot-bg);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-pointer, pointer);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: background 0.15s;
}

.account-storage-slot:hover {
    background: var(--theme-slot-hover);
}

.account-storage-slot .slot-item {
    image-rendering: pixelated;
    transform: scale(3) !important;
}

.account-storage-slot[data-rarity="Common"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.account-storage-slot[data-rarity="Uncommon"] { box-shadow: inset 0 0 6px rgba(0,180,0,0.4); }
.account-storage-slot[data-rarity="Rare"] { box-shadow: inset 0 0 6px rgba(0,100,255,0.5); }
.account-storage-slot[data-rarity="Epic"] { box-shadow: inset 0 0 6px rgba(160,0,255,0.5); }
.account-storage-slot[data-rarity="Legendary"] { box-shadow: inset 0 0 6px rgba(255,165,0,0.6); }

/* --- Gachapon Window --- */
#gachapon-window {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#gachapon-machine {
    position: relative;
    width: 100%;
    height: 100px;
    background: var(--bar-bg);
    border: 2px solid var(--ui-border);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
}

#gachapon-ticker {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--exp-color);
    z-index: 3;
    filter: drop-shadow(0 1px 1px #000);
}

#gachapon-wheel {
    width: 100%;
    height: 100%;
    position: relative;
}

#gachapon-wheel-items {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    /* This will be animated */
    transform: translateX(0);
    transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.gachapon-item {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3a374f;
    margin: 0 5px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 5px;
}

.gachapon-item .pixel-art {
    transform-origin: center;
}

.gachapon-item-name {
    font-size: var(--font-small);
    color: white;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#gachapon-controls {
    margin-bottom: 15px;
}

#gachapon-ticket-count {
    margin: 0 0 10px 0;
    color: var(--exp-color);
    font-weight: bold;
}

#gachapon-spin-btn {
    margin-top: 0;
}

#gachapon-result {
    display: none;
    /* Hidden until a prize is won */
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
}

#gachapon-result-item {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

/* Rankings window: a flex column (toggleWindow opens it with display:flex,
   the settings-menu pattern) so the title bar takes its natural height,
   the content fills the rest, and the list scrolls inside the content
   WITHOUT the footer being pushed past the window's overflow:hidden edge
   and clipped. A prior fixed 400px list / calc height guessed the title
   height wrong under the pixel theme and cut off the bottom entries. */
#rankings-window {
    flex-direction: column;
}
#rankings-window > .window-title {
    flex-shrink: 0;
}
#rankings-window .window-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#rankings-window .rankings-header,
#rankings-window .rankings-tabs,
#rankings-window .rankings-footer {
    flex-shrink: 0;
}

/* Head-and-shoulders portrait in ranking rows */
.ranking-portrait {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex-shrink: 0;
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    background: var(--theme-slot-bg);
    image-rendering: pixelated;
}

/* Pull rate shown next to the won item, so players know how rare it was */
.gachapon-pull-rate {
    font-size: var(--font-small);
    color: var(--theme-text-dim);
    white-space: nowrap;
}
.gachapon-pull-rate-rare {
    color: var(--legendary-color);
    text-shadow: 0 0 4px rgba(255, 180, 0, 0.35);
}

/* ========================================================================
   VIRTUAL MOUSE HOVER EFFECTS
   These rules mirror :hover styles for gamepad virtual mouse cursor
   ======================================================================== */

/* Buttons */
#start-screen button.virtual-mouse-hover {
    background-color: var(--theme-btn-hover-top);
}

#character-creation button.virtual-mouse-hover,
#character-selection-screen button.virtual-mouse-hover {
    background: var(--theme-btn-hover-top);
}

#settings-footer button.virtual-mouse-hover {
    background: var(--theme-btn-hover-top);
}

.window-content button.virtual-mouse-hover { 
    background: var(--theme-btn-hover-top);
}

.window-content-button.virtual-mouse-hover,
.option-item button.virtual-mouse-hover {
    background: var(--ui-accent);
}

/* Close button */
.close-btn.virtual-mouse-hover {
    background: #dd6666;
    border-color: #bb4444;
}

/* Hotbar */
.hotbar-slot-btn.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.15);
}

.hotkey.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.hotkey.settings-btn.virtual-mouse-hover {
    background: rgba(150, 150, 150, 0.2);
}

/* Tabs */
.tab-btn.virtual-mouse-hover:not(.active) {
    background: #3a5f7d;
}

.tab-button.virtual-mouse-hover:not(.active) {
    background: #3a5f7d;
}

.skill-tab-btn.virtual-mouse-hover:not(.active) {
    background: #3a5f7d;
}

.quest-tab-button.virtual-mouse-hover:not(.active) {
    background: #3a5f7d;
    border-color: #4a7ba7;
}

.bestiary-tab-button.virtual-mouse-hover:not(.active) {
    background: #3a5f7d;
    border-color: #4a7ba7;
}

/* Inventory and Equipment */
.inventory-slot.virtual-mouse-hover,
.equip-slot.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4a7ba7;
    box-shadow: 0 0 8px rgba(74, 123, 167, 0.6);
}

#inventory-dismantle-btn.virtual-mouse-hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(160, 120, 40, 0.7), rgba(218, 165, 32, 0.5));
    border-color: #daa520;
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
}

/* Character selection */
.character-slot.virtual-mouse-hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.delete-char-btn.virtual-mouse-hover {
    background: #e74c3c;
}

/* Job selection */
.job-option.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--ui-accent);
    box-shadow: 0 0 10px rgba(108, 104, 149, 0.5);
}

.job-select-btn.virtual-mouse-hover:not(:disabled) {
    background: var(--ui-accent);
}

/* World map */
.world-map-node.discovered.virtual-mouse-hover {
    transform: translate(-50%, -50%) scale(1.25);
    background: #e05848;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3);
}

/* Bestiary */
.bestiary-monster.clickable.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4a7ba7;
}

/* Radial menu */
.radial-menu-item.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Gamepad settings */
.gamepad-action-select.virtual-mouse-hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: #4a7ba7;
}

.key-mapping-button.virtual-mouse-hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Medal toggle buttons */
.medal-toggle-btn.visible.virtual-mouse-hover {
    background: #45a049;
    border-color: #3d8b40;
}

.medal-toggle-btn.hidden.virtual-mouse-hover {
    background: #da190b;
    border-color: #c0392b;
}

/* === VFX Bloom Post-Processing Effects === */
/* Subtle bloom effect for VFX elements */

.hitsquib-vfx,
.game-effect,
.loot-effect {
    filter: 
        brightness(1.1) 
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.4))
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

/* Quest VFX bloom (subtle yellow glow) */
.quest-vfx {
    filter: 
        brightness(1.15) 
        drop-shadow(0 0 2px rgba(241, 196, 15, 0.5))
        drop-shadow(0 0 4px rgba(241, 196, 15, 0.3));
}

/* Portal effect bloom (subtle cyan glow) */
.portal {
    filter: 
        brightness(1.1) 
        drop-shadow(0 0 2px rgba(192, 245, 255, 0.4))
        drop-shadow(0 0 4px rgba(125, 221, 240, 0.3));
}

/* Attack box bloom (subtle red glow) */
.attack-box {
    filter: 
        brightness(1.1) 
        drop-shadow(0 0 2px rgba(255, 100, 100, 0.3))
        drop-shadow(0 0 4px rgba(255, 50, 50, 0.2));
}

/* Level up effect canvas bloom (subtle gold glow) */
#player-levelup-effect-canvas {
    filter: 
        brightness(1.15) 
        drop-shadow(0 0 2px rgba(241, 196, 15, 0.5))
        drop-shadow(0 0 4px rgba(241, 196, 15, 0.3));
}

/* === Prevent Browser Zoom === */
html {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}

body {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}

#game-container,
#scaling-container {
    touch-action: none;
    -ms-touch-action: none;
}

/* === Ghost Players === */
.ghost-player {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 10; /* Same as real player */
    transition: none;
    overflow: visible;
}

.ghost-player canvas {
    position: absolute;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.ghost-nameplate {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    image-rendering: pixelated;
    line-height: 1;
    pointer-events: none;
    z-index: 13; /* above foliage-foreground (z-11); escapes the entity element which is now z-index:auto */
    /* Force crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    will-change: transform;
}

.ghost-chat-bubble {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #1c2833;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: var(--font-small);
    font-family: 'Ari9500';
    max-width: 200px;
    min-width: 30px;
    width: max-content;
    text-align: center;
    z-index: 100;
    display: none;
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
}

.ghost-chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.9);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.ghost-attack-effect {
    animation: ghostAttackPulse 0.2s ease-out;
}

@keyframes ghostAttackPulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Pet Window Styles - Consistent with Bestiary/Achievements */
#pet-window {
    width: 560px;
    max-height: 500px;
}

#pet-window .window-content {
    padding: 8px 12px;
    overflow-y: auto;
    max-height: 450px;
}

/* Top bar: status + toggles on one row */
.pet-top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pet-status-display {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--theme-slot-bg);
    border-radius: 6px;
    padding: 6px 10px;
}

.pet-status-display .pet-status-active {
    color: var(--legendary-color);
    font-weight: bold;
    font-size: var(--font-small);
    white-space: nowrap;
}

.pet-status-display .pet-status-info {
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
    white-space: nowrap;
}

.pet-loot-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--theme-slot-bg);
    border-radius: 6px;
    padding: 4px 8px;
}

.pet-loot-toggles h4 {
    display: none;
}

.pet-list {
    margin-bottom: 4px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 3px;
}

/* Pet list scrollbar — handled by universal rule */

.pet-entry {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--theme-slot-bg);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pet-entry:hover {
    border-color: var(--ui-border);
}

.pet-entry.active {
    border-color: var(--legendary-color);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.pet-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pet-entry-sprite {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-slot-bg);
    border-radius: 4px;
    overflow: visible;
}

.pet-entry-info {
    min-width: 70px;
}

.pet-entry-name {
    color: var(--theme-text-bright);
    font-weight: bold;
    font-size: var(--font-small);
    line-height: 1.2;
}

.pet-entry.active .pet-entry-name {
    color: var(--legendary-color);
}

.pet-entry-status {
    color: var(--theme-text-secondary);
    font-size: 9px;
}

.pet-entry-status.active-status {
    color: var(--legendary-color);
}

.pet-entry-controls {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.pet-entry-controls input {
    width: 100px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-slot-bg);
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-size: 9px;
}

.pet-entry-controls input:focus {
    outline: none;
    border-color: var(--rare-color);
}

.pet-entry-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pet-entry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.pet-entry-actions input {
    flex: 1;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-slot-bg);
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-family: 'Ari9500';
    font-size: var(--font-small);
}

.pet-entry-actions input:focus {
    outline: none;
    border-color: var(--rare-color);
}

.pet-action-btn {
    padding: 3px 10px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: 9px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pet-action-btn:hover {
    background: var(--theme-hover-bg);
    border-color: var(--theme-hover-bg);
}

.pet-action-btn.spawn-btn {
    background: var(--rare-color);
    border-color: var(--rare-color);
}

.pet-action-btn.despawn-btn {
    background: var(--epic-color);
    border-color: var(--epic-color);
}

/* Shiny pet toggle in pet entry */
.pet-shiny-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pet-shiny-label {
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.pet-shiny-switch.active {
    background: linear-gradient(90deg, #b8860b, #ffd700);
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.pet-toggle-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pet-toggle-label {
    color: var(--theme-text-secondary);
    font-size: 9px;
    white-space: nowrap;
}

.pet-toggle-switch {
    position: relative;
    width: 32px;
    height: 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    cursor: var(--cursor-pointer, pointer);
    transition: background 0.3s;
    border: 1px solid var(--theme-slot-bg);
}

.pet-toggle-switch.active {
    background: var(--theme-hover-bg);
    border-color: var(--theme-hover-bg);
}

.pet-toggle-switch::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: var(--theme-text-bright);
    border-radius: 50%;
    transition: transform 0.3s;
}

.pet-toggle-switch.active::after {
    transform: translateX(16px);
}

.pet-equipment-section {
    background: linear-gradient(135deg, var(--ui-bg), var(--ui-bg-light));
    border: 2px solid var(--theme-slot-bg);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.pet-equipment-section h4 {
    color: var(--theme-text-bright);
    margin: 0 0 10px 0;
    font-weight: bold;
}

.pet-no-pets {
    color: var(--theme-text-secondary);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

.pet-preview-icon {
    animation: petIconFloat 2s ease-in-out infinite;
}

@keyframes petIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* ===========================================
   ANNOUNCEMENT SYSTEM
   =========================================== */

#announcement-container {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.announcement-banner {
    background: linear-gradient(135deg, rgba(20, 30, 40, 0.95) 0%, rgba(30, 45, 60, 0.95) 100%);
    border: 2px solid;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Pixel Font', monospace;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announcement-banner.show {
    opacity: 1;
    transform: translateY(0);
}

.announcement-icon {
    margin-right: 8px;
    font-size: 16px;
}

/* Level Up Announcement */
.announcement-levelup {
    border-color: var(--exp-color);
    background: linear-gradient(135deg, rgba(30, 50, 30, 0.95) 0%, rgba(40, 70, 40, 0.95) 100%);
    animation: announcementGlow 2s ease-in-out infinite;
}

.announcement-levelup .announcement-icon {
    animation: bounceIcon 0.5s ease infinite;
}

/* Job Advancement Announcement */
.announcement-job {
    border-color: var(--legendary-color);
    background: linear-gradient(135deg, rgba(50, 40, 20, 0.95) 0%, rgba(70, 55, 30, 0.95) 100%);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Achievement Announcement */
.announcement-achievement {
    border-color: var(--rare-color);
    background: linear-gradient(135deg, rgba(30, 40, 60, 0.95) 0%, rgba(40, 55, 80, 0.95) 100%);
}

/* Medal Announcement */
.announcement-medal {
    border-color: var(--epic-color);
    background: linear-gradient(135deg, rgba(50, 30, 50, 0.95) 0%, rgba(70, 45, 70, 0.95) 100%);
}

/* Enhancement +10 Announcement */
.announcement-enhancement {
    border-color: #ff4444;
    background: linear-gradient(135deg, rgba(60, 20, 20, 0.95) 0%, rgba(80, 30, 30, 0.95) 100%);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: enhancementPulse 1s ease-in-out infinite;
}

@keyframes announcementGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 4px 25px rgba(100, 200, 100, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes bounceIcon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes enhancementPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 4px 30px rgba(255, 68, 68, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* ============================================= */
/* Equipment Window Tabs & Medals Section        */
/* ============================================= */

.equipment-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.equipment-tab-button {
    flex: 1;
    padding: 10px 15px;
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid #3a374f;
    border-radius: 5px;
    color: var(--theme-text-secondary);
    font-size: var(--font-standard);
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s ease;
    font-family: 'Ari9500', cursive;
}

.equipment-tab-button:hover {
    background: rgba(70, 70, 70, 0.9);
    color: #fff;
}

.equipment-tab-button.active {
    background: linear-gradient(180deg, #4a6fa5 0%, #3a5a80 100%);
    border-color: #6a9fd5;
    color: #fff;
    box-shadow: 0 2px 8px rgba(74, 111, 165, 0.4);
}

.equipment-tab-content {
    display: none;
}

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

/* Equipment Medals Container */
.equipment-medals-container {
    padding: 10px;
    max-height: 500px;
    overflow-y: auto;
}

/* Section Headers */
.medals-section {
    margin-bottom: 20px;
}

.medals-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(90deg, rgba(50, 50, 70, 0.9) 0%, rgba(40, 40, 55, 0.8) 100%);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--ui-border);
    border-bottom: none;
}

.medals-section-header h3 {
    margin: 0;
    color: #ffd700;
    font-size: var(--font-header);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.medals-count {
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 12px;
    border-radius: 15px;
    color: #4CAF50;
    font-weight: bold;
    font-size: var(--font-standard);
}

.medals-progress-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar-small {
    width: 80px;
    height: 8px;
    background: var(--bar-bg);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #3a374f;
}

.progress-bar-small .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #66ff66);
    transition: width 0.3s ease;
}

.medals-subtitle {
    margin: 0;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-top: none;
    border-bottom: none;
    font-size: var(--font-small);
    color: var(--theme-text-dim);
}

/* Special Medals Grid */
.special-medals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 0 0 8px 8px;
}

.special-medal-card {
    text-align: center;
    padding: 15px 10px;
    border-radius: 8px;
    background: rgba(30, 30, 40, 0.8);
    border: 2px solid #3a374f;
    transition: all 0.3s ease;
    cursor: default;
}

.special-medal-card.earned {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.special-medal-card.earned:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5);
}

.special-medal-card.locked {
    opacity: 0.5;
    border-color: var(--theme-slot-bg);
}

.special-medal-card .medal-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.special-medal-card .medal-name {
    font-size: var(--font-standard);
    color: #fff;
    font-weight: bold;
    margin-bottom: 4px;
}

.special-medal-card .medal-category {
    font-size: var(--font-small);
    color: var(--theme-text-dim);
}

/* Special Medal Tiers */
.special-medal-card.legendary {
    background: linear-gradient(135deg, rgba(80, 50, 10, 0.9), rgba(120, 80, 20, 0.9));
    border-color: #ff9900;
    animation: legendaryGlow 2s ease-in-out infinite;
}

.special-medal-card.epic {
    background: linear-gradient(135deg, rgba(60, 30, 60, 0.9), rgba(90, 50, 90, 0.9));
    border-color: #9932CC;
}

.special-medal-card.rare {
    background: linear-gradient(135deg, rgba(30, 40, 60, 0.9), rgba(50, 70, 100, 0.9));
    border-color: #4488ff;
}

@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 153, 0, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 153, 0, 0.7); }
}

/* Monster Medals Grid */
.monster-medals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 0 0 8px 8px;
}

.monster-medal-card {
    padding: 12px;
    border-radius: 6px;
    background: rgba(30, 30, 40, 0.8);
    border: 2px solid var(--ui-border);
    transition: all 0.2s ease;
}

.monster-medal-card:hover {
    transform: translateY(-2px);
}

.monster-medal-card.boss-medal {
    border-color: #ff6b6b;
    background: rgba(80, 30, 30, 0.6);
}

.monster-medal-card.regular-medal {
    border-color: #4CAF50;
}

/* Medal Tier Colors */
.monster-medal-card.bronze { border-left: 4px solid #cd7f32; }
.monster-medal-card.silver { border-left: 4px solid #c0c0c0; }
.monster-medal-card.gold { border-left: 4px solid #ffd700; }
.monster-medal-card.diamond { 
    border-left: 4px solid #b9f2ff; 
    box-shadow: 0 0 10px rgba(185, 242, 255, 0.3);
}

.medal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.medal-title {
    font-size: var(--font-standard);
    color: #ffd700;
    font-weight: bold;
}

.medal-type-badge {
    font-size: var(--font-header);
}

.medal-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
    margin-bottom: 8px;
}

.medal-visibility.visible { color: #4CAF50; }
.medal-visibility.hidden { color: var(--theme-text-dim); }

.medal-toggle-btn {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: rgba(50, 50, 50, 0.8);
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s ease;
    font-family: 'Ari9500', cursive;
}

.medal-toggle-btn:hover {
    background: rgba(70, 70, 70, 0.9);
    color: #fff;
}

.medal-toggle-btn.active {
    background: rgba(76, 175, 80, 0.3);
    border-color: #4CAF50;
    color: #4CAF50;
}

/* Medal Info Section */
.medals-info-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 15px;
}

.medals-info-section h4 {
    margin: 0 0 12px 0;
    color: #ffd700;
    font-size: var(--font-standard);
}

.medal-tiers-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tier-item {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: var(--font-small);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #3a374f;
}

.tier-item.bronze { border-left: 3px solid #cd7f32; color: #cd7f32; }
.tier-item.silver { border-left: 3px solid #c0c0c0; color: #c0c0c0; }
.tier-item.gold { border-left: 3px solid #ffd700; color: #ffd700; }
.tier-item.diamond { border-left: 3px solid #b9f2ff; color: #b9f2ff; }

.medal-tip {
    margin: 0;
    padding: 10px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
    font-size: var(--font-small);
    color: #8bc34a;
}

/* Player Online/Offline Notification Toast */
#player-notification-container {
    position: fixed;
    bottom: var(--above-hotbar-keyboard);
    right: var(--left-of-hotbar-keyboard); /* Position to the left of hotbar */
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    transition: bottom 0.3s ease, right 0.3s ease;
}

/* Adjust player notification position for gamepad mode */
body.gamepad-active #player-notification-container {
    bottom: var(--above-hotbar-gamepad);
    right: var(--left-of-hotbar-gamepad);
}

.player-notification-toast {
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 1px solid #2ecc71;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 8px rgba(46, 204, 113, 0.15);
    animation: playerToastIn 0.3s ease-out, playerToastOut 0.3s ease-in 1.7s forwards;
    min-width: 220px;
    max-width: 320px;
    font-family: 'Ari9500', cursive;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

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

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

.player-notification-toast.offline {
    border-color: var(--theme-text-dim);
}

.player-notification-toast.buddy {
    border-color: #f1c40f;
}

.player-notification-toast.guild {
    border-color: #9b59b6;
}

.player-notification-toast.guild .player-notification-name {
    color: #9b59b6;
}

.player-notification-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.player-notification-content {
    flex: 1;
}

.player-notification-name {
    font-weight: bold;
    color: #fff;
    font-size: var(--font-standard);
    margin-bottom: 2px;
}

.player-notification-toast.buddy .player-notification-name {
    color: #f1c40f;
}

.player-notification-status {
    font-size: var(--font-small);
    color: var(--theme-text-secondary);
}

.player-notification-status.online {
    color: #2ecc71;
}

.player-notification-status.offline {
    color: var(--theme-text-dim);
}

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

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

/* =============================================
   ACCOUNT SYSTEM STYLES
   ============================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content {
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 2px solid var(--ui-border);
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-family: 'Ari9500', cursive;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
}

.modal-header h2 {
    margin: 0;
    color: var(--theme-text-bright);
    font-size: var(--font-header);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.modal-close {
    background: #cc5555;
    border: 1px solid #aa3333;
    color: white;
    font-size: var(--font-standard);
    cursor: var(--cursor-pointer, pointer);
    padding: 4px 8px;
    border-radius: 2px;
    transition: background 0.2s;
}

.modal-close:hover {
    background: #dd6666;
}

.modal-body {
    padding: 15px;
}

.account-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--ui-border);
}

.account-tab {
    flex: 1;
    padding: 8px;
    background: var(--ui-bg-light);
    border: none;
    border-right: 1px solid var(--ui-border);
    color: var(--theme-text-secondary);
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
}

.account-tab:last-child {
    border-right: none;
}

.account-tab:hover:not(.active) {
    background: var(--theme-hover-bg);
}

.account-tab.active {
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    color: var(--theme-text-bright);
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-input {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    transition: border-color 0.2s;
}

.account-input:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 5px rgba(108, 104, 149, 0.35);
}

.account-input::placeholder {
    color: var(--theme-text-dim);
}

.account-btn {
    padding: 10px 20px;
    background: #27ae60;
    border: 1px solid #2ecc71;
    border-radius: 3px;
    color: white;
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    font-weight: bold;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
}

.account-btn:hover {
    background: #2ecc71;
}

.account-btn.secondary {
    background: var(--theme-text-dim);
    border-color: var(--theme-text-secondary);
}

.account-btn.secondary:hover {
    background: var(--ui-accent);
}

.account-btn.danger {
    background: #7a2020;
    border-color: #e74c3c;
    color: #ff9999;
}

.account-btn.danger:hover {
    background: #c0392b;
    color: white;
}

.keep-logged-in-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
    cursor: var(--cursor-pointer, pointer);
    user-select: none;
}

.keep-logged-in-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #27ae60;
    cursor: var(--cursor-pointer, pointer);
}

.delete-cloud-confirm-input {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #e74c3c;
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 100%;
    box-sizing: border-box;
}

.delete-cloud-confirm-input:focus {
    outline: none;
    border-color: #ff0000;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
}

.delete-cloud-confirm-input::placeholder {
    color: var(--theme-text-dim);
    text-transform: none;
    letter-spacing: normal;
}

.account-error {
    color: #e74c3c;
    font-size: var(--font-standard);
    margin-top: 10px;
    padding: 10px;
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.5);
    border-radius: 4px;
    display: none;
}

.account-error.show {
    display: block;
}

.cloud-save-section {
    margin: 15px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.cloud-save-section h3 {
    margin: 0 0 10px 0;
    color: var(--exp-color);
    font-size: var(--font-standard);
    border-bottom: 1px solid rgba(160, 176, 192, 0.3);
    padding-bottom: 5px;
}

#cloud-saves-list {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.cloud-save-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: linear-gradient(135deg, var(--ui-bg), var(--ui-bg-light));
    border: 2px solid var(--theme-slot-bg);
    border-radius: 4px;
    margin-bottom: 5px;
    transition: all 0.2s;
}

.cloud-save-item:hover {
    border-color: var(--ui-border);
    background: linear-gradient(135deg, var(--ui-bg-light), rgba(74, 103, 65, 0.6));
}

.cloud-save-info {
    flex: 1;
}

.cloud-save-name {
    color: var(--exp-color);
    font-weight: bold;
}

.cloud-save-details {
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
}

.recovery-section {
    margin-bottom: 15px;
}

.recovery-section h3 {
    color: var(--exp-color);
    font-size: var(--font-standard);
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(160, 176, 192, 0.3);
    padding-bottom: 5px;
}

.recovery-char-option {
    padding: 10px 15px;
    margin: 5px 0;
    background: linear-gradient(135deg, var(--ui-bg), var(--ui-bg-light));
    border: 2px solid var(--theme-slot-bg);
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s ease;
}

.recovery-char-option:hover {
    border-color: var(--ui-border);
    background: linear-gradient(135deg, var(--ui-bg-light), rgba(74, 103, 65, 0.6));
}

.recovery-char-option strong {
    color: var(--exp-color);
}

/* =============================================
   UNIFIED GAME MODAL/POPUP STYLES
   Use these classes for consistent UI across the game
   ============================================= */

/* Standard game modal - matches bestiary/window styling */
.game-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.3s ease-out;
    font-family: 'Ari9500', cursive;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
}

.game-modal-title {
    background: var(--ui-border);
    color: var(--theme-text-body);
    padding: 6px 12px;
    font-size: var(--font-header);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.game-modal-content {
    padding: 15px;
    color: var(--theme-text-bright);
    font-size: var(--font-standard);
}

.game-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px 15px 15px;
}

/* Standard game button - use for all modal buttons */
.game-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    color: var(--theme-text-body);
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    transition: all 0.2s;
    background: var(--theme-slot-bg);
    border: 1px solid var(--ui-border-glow);
}

.game-btn:hover {
    background: var(--theme-hover-bg);
    border-color: var(--ui-accent);
}

.game-btn.primary {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}

.game-btn.primary:hover {
    background: var(--ui-accent);
}

.game-btn.success {
    background: #27ae60;
    border-color: #2ecc71;
}

.game-btn.success:hover {
    background: #2ecc71;
}

.game-btn.danger {
    background: #c0392b;
    border-color: #e74c3c;
}

.game-btn.danger:hover {
    background: #e74c3c;
}

.game-btn.cancel {
    background: var(--theme-text-dim);
    border-color: var(--theme-text-secondary);
}

.game-btn.cancel:hover {
    background: var(--ui-accent);
}

/* Subtle inline warning message */
.name-taken-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 8px 0;
    background: rgba(192, 57, 43, 0.2);
    border: 1px solid #c0392b;
    border-radius: 4px;
    color: #e74c3c;
    font-size: var(--font-standard);
    animation: warningSlideIn 0.3s ease-out;
}

.name-taken-warning .warning-icon {
    color: #e74c3c;
    font-size: var(--font-large);
}

.name-taken-warning strong {
    color: #f1c40f;
}

/* Input error state */
.input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5) !important;
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Standard game tabs - matches bestiary tabs */
.game-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ui-border);
}

.game-tab-btn {
    flex: 1;
    padding: 6px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-bright);
    border: none;
    cursor: var(--cursor-pointer, pointer);
    font-family: 'Ari9500';
    font-size: var(--font-standard);
    border-right: 1px solid var(--ui-border);
    transition: all 0.2s;
}

.game-tab-btn:last-child {
    border-right: none;
}

.game-tab-btn.active {
    background: var(--ui-border);
    color: var(--theme-text-body);
}

.game-tab-btn:hover:not(.active) {
    background: var(--theme-hover-bg);
}

/* Standard game list item - matches bestiary monster style */
.game-list-item {
    background: linear-gradient(135deg, var(--ui-bg), var(--ui-bg-light));
    border: 2px solid var(--theme-slot-bg);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    cursor: var(--cursor-pointer, pointer);
}

.game-list-item:hover {
    border-color: var(--ui-border);
    background: linear-gradient(135deg, var(--ui-bg-light), rgba(74, 103, 65, 0.6));
}

.game-list-item.selected {
    border-color: var(--ui-border);
    background: linear-gradient(135deg, rgba(74, 103, 65, 0.8), var(--ui-bg-light));
}

/* Standard game input */
.game-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-family: 'Ari9500', cursive;
    font-size: var(--font-standard);
    box-sizing: border-box;
}

.game-input:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 5px rgba(108, 104, 149, 0.5);
}

.game-input::placeholder {
    color: var(--theme-text-dim);
}

/* Standard game section header */
.game-section-header {
    font-size: var(--font-standard);
    margin: 10px 0 8px 0;
    color: var(--exp-color);
    border-bottom: 1px solid rgba(160, 176, 192, 0.3);
    padding-bottom: 4px;
}

/* Standard scroll container */
.game-scroll-container {
    overflow-y: auto;
    padding-right: 5px;
}

/* Game scroll container scrollbar — handled by universal rule */

/* =============================================
   AUCTION HOUSE STYLES
   ============================================= */

#auction-house-window {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
}

#auction-house-window .window-content {
    overflow-y: auto;
}

#auction-sell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

#auction-sell-items {
    flex: 1;
    min-height: 0;
}

#auction-sell-confirm {
    flex-shrink: 0;
}

#auction-house-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Auction listing item row */
.auction-listing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(69, 66, 90, 0.1);
    transition: background 0.12s ease;
}

.auction-listing:hover {
    background: rgba(108, 104, 149, 0.08);
}

.auction-listing:last-child {
    border-bottom: none;
}

.auction-listing-icon {
    flex-shrink: 0;
}

.auction-listing-info {
    flex: 1;
    min-width: 0;
}

.auction-listing-name {
    font-weight: bold;
    color: var(--theme-text-body);
    font-size: var(--font-standard);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auction-listing-name.common { color: var(--common-color); }
.auction-listing-name.rare { color: var(--rare-color); }
.auction-listing-name.epic { color: var(--epic-color); }
.auction-listing-name.legendary { color: var(--legendary-color); }
.auction-listing-name.mythic { color: var(--mythic-color); text-shadow: 0 0 6px rgba(0,229,204,0.5); }
.auction-listing-name.prismatic { color: var(--prismatic-color); animation: prismaticText 2s ease-in-out infinite; }
.auction-listing-name.cosmetic { color: var(--cosmetic-color); }

.auction-listing-details {
    font-size: var(--font-medium);
    color: var(--theme-text-secondary);
    margin-top: 2px;
}

.auction-listing-seller {
    font-size: var(--font-small);
    color: var(--theme-text-dim);
    margin-top: 1px;
}

.auction-listing-price {
    font-weight: bold;
    color: var(--exp-color);
    font-size: var(--font-standard);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 80px;
    text-align: right;
}

.auction-listing-actions {
    flex-shrink: 0;
}

.auction-listing-actions button {
    padding: 5px 12px;
    font-size: var(--font-medium);
    margin: 0;
}

/* Auction sell item selection */
.auction-sell-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(69, 66, 90, 0.08);
    cursor: var(--cursor-pointer, pointer);
    transition: background 0.12s ease;
    border-radius: 3px;
}

.auction-sell-item:hover {
    background: rgba(108, 104, 149, 0.1);
}

.auction-sell-item.selected {
    background: rgba(108, 104, 149, 0.18);
    border: 1px solid rgba(108, 104, 149, 0.35);
}

.auction-sell-item-name {
    flex: 1;
    color: #c0bed0;
    font-size: var(--font-standard);
}

.auction-sell-item-name.common { color: var(--common-color); }
.auction-sell-item-name.rare { color: var(--rare-color); }
.auction-sell-item-name.epic { color: var(--epic-color); }
.auction-sell-item-name.legendary { color: var(--legendary-color); }
.auction-sell-item-name.mythic { color: var(--mythic-color); text-shadow: 0 0 6px rgba(0,229,204,0.5); }
.auction-sell-item-name.prismatic { color: var(--prismatic-color); animation: prismaticText 2s ease-in-out infinite; }
.auction-sell-item-name.cosmetic { color: var(--cosmetic-color); }

/* My listings - listed item with cancel */
.auction-my-listing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(69, 66, 90, 0.1);
}

.auction-my-listing:last-child {
    border-bottom: none;
}

.auction-my-listing-info {
    flex: 1;
    min-width: 0;
}

.auction-my-listing .auction-listing-price {
    min-width: 70px;
}

/* Auction house empty state */
.auction-empty {
    text-align: center;
    color: #667788;
    padding: 40px 20px;
    font-size: var(--font-standard);
}

.auction-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* Auction house loading */
.auction-loading {
    text-align: center;
    color: #8899aa;
    padding: 30px;
    font-size: var(--font-standard);
}

/* ============================================= */
/* DAILY CHALLENGES / BOUNTY BOARD               */
/* ============================================= */
#daily-challenges-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-height: 620px;
    z-index: 10002; /* Match standard .window so it sits above the bottom HUD */
    background: linear-gradient(170deg, var(--theme-window-top) 0%, var(--theme-window-bottom) 100%);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#daily-challenges-panel .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(180deg, var(--theme-title-top) 0%, var(--theme-title-bottom) 100%);
    border-bottom: 2px solid var(--ui-border);
    color: var(--theme-text-bright);
    font-size: var(--font-standard);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Bounty board close button inherits standard .close-btn styling */

.daily-challenges-content {
    padding: 10px;
    overflow-y: auto;
    max-height: 560px;
}

.daily-challenges-header {
    text-align: center;
    padding: 4px 0 8px 0;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 10px;
}

.daily-challenges-date {
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
}

.daily-challenge-card {
    background: var(--theme-slot-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: border-color 0.3s;
}

.daily-challenge-card:hover {
    border-color: var(--theme-btn-hover-top);
}

.daily-challenge-card.daily-tier-bronze { border-left: 3px solid #CD7F32; }
.daily-challenge-card.daily-tier-silver { border-left: 3px solid #C0C0C0; }
.daily-challenge-card.daily-tier-gold { border-left: 3px solid #FFD700; }
.daily-challenge-card.daily-tier-diamond { border-left: 3px solid #b9f2ff; }

/* Featured challenge (4th slot) */
.daily-challenge-card.daily-featured {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--theme-slot-bg) 40%);
    border: 1px solid rgba(255, 215, 0, 0.25);
}
.daily-featured-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 3px;
    padding: 1px 6px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.daily-challenge-card.daily-completed {
    border-color: var(--success-color);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.15);
}

.daily-challenge-card.daily-claimed {
    opacity: 0.5;
    border-color: var(--ui-border);
}

.daily-challenge-title {
    color: var(--theme-text-bright);
    font-weight: bold;
    font-size: var(--font-standard);
    margin-bottom: 3px;
}

.daily-challenge-desc {
    color: var(--theme-text-secondary);
    font-size: var(--font-small);
    margin-bottom: 6px;
}

.daily-challenge-progress-bar {
    height: 6px;
    background: var(--bar-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.daily-challenge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--status-info), var(--rare-color));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.daily-completed .daily-challenge-progress-fill {
    background: linear-gradient(90deg, var(--success-color), #88ff88);
}

.daily-challenge-progress-text {
    color: var(--theme-text-dim);
    font-size: 10px;
    text-align: right;
    margin-bottom: 4px;
}

.daily-challenge-reward {
    color: var(--exp-color);
    font-size: var(--font-small);
    padding: 2px 0;
}

.daily-challenge-claim-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 6px 0;
    background: linear-gradient(180deg, var(--theme-btn-top) 0%, var(--theme-btn-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--theme-text-bright);
    font-weight: bold;
    cursor: var(--cursor-pointer, pointer);
    font-size: var(--font-standard);
    animation: claimPulse 1.5s ease-in-out infinite;
}

.daily-challenge-claim-btn:hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
    box-shadow: 0 0 10px var(--theme-window-glow);
}

.daily-challenge-claimed-text {
    text-align: center;
    color: var(--success-color);
    font-size: var(--font-small);
    margin-top: 4px;
}

@keyframes claimPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(68, 255, 68, 0.3); }
    50% { box-shadow: 0 0 12px rgba(68, 255, 68, 0.6); }
}

.daily-challenge-empty {
    text-align: center;
    color: var(--theme-text-dim);
    padding: 20px;
}

/* Weekly Reward Track */
.weekly-track-container {
    background: var(--theme-slot-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.weekly-track-label {
    color: var(--theme-text-bright);
    font-weight: bold;
    font-size: var(--font-small);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.weekly-track-count {
    color: var(--theme-text-dim);
    font-weight: normal;
    font-size: 10px;
}
.weekly-track-bar {
    position: relative;
    height: 10px;
    background: var(--bar-bg);
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 8px;
}
.weekly-track-fill {
    height: 100%;
    background: linear-gradient(90deg, #4488ff, #88ccff);
    border-radius: 5px;
    transition: width 0.4s ease;
}
.weekly-track-marker {
    position: absolute;
    top: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-slot-bg);
    border: 2px solid var(--ui-border);
    font-size: 8px;
    font-weight: bold;
    color: var(--theme-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 1;
}
.weekly-track-marker.unlocked {
    border-color: #4488ff;
    color: #4488ff;
    background: rgba(68, 136, 255, 0.15);
}
.weekly-track-marker.claimed {
    border-color: var(--success-color);
    color: var(--success-color);
    background: rgba(46, 204, 113, 0.15);
}
.weekly-track-tiers {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.weekly-track-tier {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--theme-text-dim);
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.02);
}
.weekly-track-tier.unlocked {
    color: var(--theme-text-secondary);
    background: rgba(68, 136, 255, 0.05);
}
.weekly-track-tier.claimed {
    opacity: 0.5;
}
.weekly-tier-name {
    min-width: 60px;
    font-weight: bold;
}
.weekly-tier-reward {
    flex: 1;
    color: var(--exp-color);
}
.weekly-tier-claim-btn {
    padding: 2px 10px;
    background: linear-gradient(180deg, var(--theme-btn-top) 0%, var(--theme-btn-bottom) 100%);
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    color: var(--theme-text-bright);
    font-weight: bold;
    cursor: var(--cursor-pointer, pointer);
    font-size: 10px;
    animation: claimPulse 1.5s ease-in-out infinite;
}
.weekly-tier-claim-btn:hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top) 0%, var(--theme-btn-hover-bottom) 100%);
}
.weekly-tier-claimed {
    color: var(--success-color);
    font-size: 10px;
}

/* ============================================= */
/* JUMP QUEST TIMER UI                           */
/* ============================================= */
#jq-timer-ui {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(170deg, var(--theme-window-top), var(--theme-window-bottom));
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px 22px;
    z-index: 900;
    min-width: 200px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px var(--theme-window-glow);
    animation: timerAppear 0.3s ease-out;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@keyframes timerAppear {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.jq-timer-title {
    color: var(--theme-text-secondary);
    font-size: 13px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.jq-timer-time {
    color: var(--achievement-gold);
    font-size: 36px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin: 4px 0;
}

.jq-timer-tiers {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
}

.jq-tier-gold { color: var(--achievement-gold); }
.jq-tier-silver { color: var(--achievement-silver); }
.jq-tier-bronze { color: var(--achievement-bronze); }

.jq-timer-pb {
    color: var(--rare-color);
    font-size: 12px;
    margin-top: 4px;
}

/* ============================================= */
/* SHINY MONSTER EFFECTS                         */
/* ============================================= */
/* Shiny monsters use per-type hue-shifted sprites instead of golden glow */
/* The .shiny-monster class is kept for nameplate styling only */

.shiny-monster .nameplate,
.shiny-monster .monster-nameplate {
    color: #FFD700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 4px #000 !important;
}

/* Bounty Board toggle button for menu bar */
.bounty-board-btn {
    background: linear-gradient(180deg, var(--theme-btn-top), var(--theme-btn-bottom));
    border: 1px solid var(--ui-border);
    color: var(--theme-text-bright);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    font-size: var(--font-small);
    font-weight: bold;
}

.bounty-board-btn:hover {
    background: linear-gradient(180deg, var(--theme-btn-hover-top), var(--theme-btn-hover-bottom));
    box-shadow: 0 0 8px var(--theme-window-glow);
}

/* Party Quest Pressure Plate — rendered from the game's pixel-art spawn glow
   (artAssets.spawnEffect) as a CSS sprite-sheet animation. 16px frames × 4,
   scaled ×6 → 96px display; background-image is set inline in JS. */
.pq-pressure-plate {
    position: absolute;
    width: 96px;
    height: 96px;
    z-index: 5;
    pointer-events: none;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-size: 384px 96px; /* 4 frames × 96px wide */
    animation: pqPlateFrames 0.55s steps(4) infinite;
    transition: filter 0.25s ease;
}

@keyframes pqPlateFrames {
    from { background-position: 0 0; }
    to { background-position: -384px 0; } /* advance through all 4 frames */
}

/* Inactive: dim with a cool blue aura */
.pq-pressure-plate.inactive {
    opacity: 0.9;
    filter: brightness(0.8) saturate(0.6)
        drop-shadow(0 0 6px rgba(120, 120, 255, 0.85))
        drop-shadow(0 0 14px rgba(90, 90, 255, 0.4));
}

/* Active: bright with a green "synchronized" aura */
.pq-pressure-plate.active {
    opacity: 1;
    filter: brightness(1.35) saturate(1.3)
        drop-shadow(0 0 10px rgba(80, 255, 120, 0.95))
        drop-shadow(0 0 22px rgba(50, 220, 80, 0.55));
}

/* Locked: not part of this round's live set — dim, desaturated, no call-to-action */
.pq-pressure-plate.locked {
    opacity: 0.35;
    filter: brightness(0.45) saturate(0.15) grayscale(0.6);
}
.pq-pressure-plate.locked .pq-plate-label {
    color: rgba(180, 180, 200, 0.5);
    text-shadow: none;
}

.pq-plate-label {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(220, 220, 255, 1);
    font-size: 12px;
    font-weight: bold;
    font-family: 'Ari9500', sans-serif;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(100, 100, 255, 0.8), 0 0 16px rgba(100, 100, 255, 0.4);
    letter-spacing: 1px;
}

.pq-pressure-plate.active .pq-plate-label {
    color: rgba(130, 255, 160, 0.95);
    text-shadow: 0 0 8px rgba(80, 255, 120, 0.8), 0 0 16px rgba(50, 220, 80, 0.4);
}

/* ============================
   CRAFTING JOURNAL STYLES
   ============================ */
#crafting-journal-window {
    max-height: 85vh;
}

#crafting-journal-content {
    overflow-y: auto;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
}

/* Tab bar — now uses shared tab override */
.cj-tab-bar {
    padding: 0;
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
    margin-bottom: 0;
}

.cj-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
}

.cj-tab-icon {
    font-size: 14px;
}

.cj-tab-label {
    font-size: 11px;
    letter-spacing: 0.5px;
}

.cj-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 400px;
}

/* Crafting level / exp bar */
.cj-level-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}
.cj-level-label {
    font-size: 11px;
    font-weight: bold;
    color: var(--ui-accent);
    white-space: nowrap;
    font-family: 'Ari9500';
}
.cj-exp-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    border: 1px solid rgba(100,180,255,0.2);
    overflow: hidden;
}
.cj-exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3a7bd5, #64b4ff);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.cj-exp-text {
    font-size: 10px;
    color: var(--theme-text-dim);
    white-space: nowrap;
    font-family: 'Ari9500';
}

/* Locked recipe entries */
.crafting-item-entry.locked {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.5);
}
.crafting-lock-icon {
    margin-left: auto;
    font-size: 10px;
    color: #e74c3c;
    white-space: nowrap;
    font-family: 'Ari9500';
}

.crafting-layout {
    display: flex;
    gap: 12px;
}

.crafting-item-list {
    flex: 1;
    max-height: 450px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 4px;
    background: var(--ui-bg-dark);
}

.crafting-item-list-inner {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Search bar */
.crafting-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 6px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 4px;
}

.crafting-search-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--theme-text);
    font-size: 11px;
    outline: none;
}
.crafting-search-input:focus { border-color: rgba(100,180,255,0.5); }
.crafting-search-input::placeholder { color: var(--theme-text-dim); }

.crafting-filter-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--theme-text-dim);
    cursor: var(--cursor-pointer, pointer);
    white-space: nowrap;
}
.crafting-filter-toggle input { accent-color: #b388ff; cursor: var(--cursor-pointer, pointer); }

/* Collapsible group headers */
.crafting-group-header {
    padding: 5px 8px;
    font-size: 10px;
    color: var(--theme-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    cursor: var(--cursor-pointer, pointer);
    user-select: none;
    border-radius: 3px;
    transition: background 0.15s;
}
.crafting-group-header:hover { background: rgba(255,255,255,0.04); }
.crafting-group-header.collapsed { opacity: 0.7; }
.crafting-group-arrow { font-size: 8px; margin-right: 2px; }
.crafting-group-count { font-size: 9px; opacity: 0.6; }

.crafting-item-entry {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 2px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.15s ease;
}

.crafting-item-entry:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--ui-border);
}

.crafting-item-entry.selected {
    background: rgba(100, 180, 255, 0.12);
    border-color: rgba(100, 180, 255, 0.4);
}

.crafting-item-entry .item-name {
    flex: 1;
    font-size: 12px;
    color: var(--theme-text);
}

.crafting-item-entry .item-level {
    display: none;
}

.crafting-item-entry .item-level-inline {
    font-size: 10px;
    color: var(--theme-text-dim);
    margin-left: 4px;
    font-weight: normal;
}

.crafting-item-entry .crafting-req-lv {
    font-size: 9px;
    color: #64b4ff;
    margin-left: auto;
    white-space: nowrap;
    opacity: 0.7;
}

.crafting-detail-panel {
    flex: 1.6;
    padding: 10px;
    background: var(--ui-bg-dark);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    min-width: 0;
}

.crafting-detail-columns {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.crafting-detail-left {
    flex: 1.2;
    min-width: 0;
}

.crafting-detail-right {
    flex: 0.8;
    min-width: 0;
}

.crafting-tier-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.crafting-tier-tab {
    flex: 1;
    padding: 5px 8px;
    font-size: 11px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    color: var(--theme-text-dim);
    transition: all 0.15s;
    text-align: center;
    font-family: 'Ari9500';
}

.crafting-tier-tab:hover {
    background: rgba(255,255,255,0.05);
}

.crafting-tier-tab.active {
    background: rgba(100, 180, 255, 0.15);
    border-color: rgba(100, 180, 255, 0.5);
    color: var(--theme-text);
}

/* Prismatic crafting tab — rainbow cycle */
.crafting-tier-tab.prismatic-tab-active {
    animation: prismaticText 2s ease-in-out infinite, prismaticBorder 2s ease-in-out infinite;
    background: rgba(180, 100, 255, 0.1);
}

/* Prismatic crafting title — rainbow cycle */
.prismatic-craft-title {
    animation: prismaticText 2s ease-in-out infinite;
}

.crafting-stats-preview {
    margin: 8px 0;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 11px;
}

.crafting-stats-preview .stat-line {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    color: var(--theme-text-dim);
}

.crafting-stats-preview .stat-line .stat-value {
    color: var(--theme-text);
}

.crafting-materials-list {
    margin: 8px 0;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.crafting-material-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
}

.crafting-material-row .mat-name {
    display: flex;
    align-items: center;
    color: var(--theme-text-dim);
}

.crafting-material-row .mat-count {
    font-weight: bold;
}

.crafting-material-row .mat-count.has-enough {
    color: #2ecc71;
}

.crafting-material-row .mat-count.not-enough {
    color: #e74c3c;
}

.crafting-catalyst-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px dashed rgba(138,162,184,0.3);
    border-radius: 6px;
    min-height: 40px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
}

.crafting-catalyst-slot:hover {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.05);
}

.crafting-catalyst-slot.has-catalyst {
    border-style: solid;
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.08);
}

.crafting-catalyst-slot .catalyst-placeholder {
    color: var(--theme-text-dim);
    font-size: 11px;
    font-style: italic;
}

.crafting-catalyst-slot .catalyst-info {
    flex: 1;
    font-size: 11px;
}

.crafting-catalyst-slot .catalyst-name {
    color: #FFD700;
    font-weight: bold;
}

.crafting-catalyst-slot .catalyst-bonus {
    color: #2ecc71;
    font-size: 10px;
}

.crafting-catalyst-slot .remove-catalyst {
    color: #e74c3c;
    cursor: var(--cursor-pointer, pointer);
    font-size: 14px;
    padding: 2px 6px;
}

.crafting-catalyst-slot .remove-catalyst:hover {
    color: #ff4444;
}

.crafting-gold-cost {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    margin: 0 0 4px 0;
    font-size: 11px;
    color: var(--theme-text-dim);
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.crafting-gold-cost .gold-amount {
    color: #FFD700;
    font-weight: bold;
}

.crafting-gold-cost .gold-amount.not-enough {
    color: #e74c3c;
}

.craft-button {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Ari9500';
    background: linear-gradient(180deg, rgba(100,180,255,0.3), rgba(60,120,200,0.3));
    border: 1px solid rgba(100,180,255,0.5);
    border-radius: 6px;
    color: var(--theme-text);
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
}

.craft-button:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(100,180,255,0.5), rgba(60,120,200,0.5));
    box-shadow: 0 0 12px rgba(100,180,255,0.3);
}

.craft-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.crafting-rarity-label {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.crafting-catalyst-picker {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.catalyst-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin: 2px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.15s;
    font-size: 11px;
}

.catalyst-option:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
}

.catalyst-option .cat-name {
    color: #FFD700;
}

.catalyst-option .cat-bonus {
    color: #2ecc71;
    font-size: 10px;
}

.catalyst-option .cat-qty {
    color: var(--theme-text-dim);
    font-size: 10px;
}

/* Crafting success animation */
@keyframes craftSuccess {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.craft-success-flash {
    animation: craftSuccess 0.5s ease-out;
}

/* Rarity colors for crafting tier labels */
.rarity-common { color: #aaaaaa; }
.rarity-rare { color: #4488ff; }
.rarity-epic { color: #a855f7; }
.rarity-legendary { color: #FFD700; }
.rarity-mythic { color: #ff6600; }
.rarity-prismatic { color: #ff44ff; text-shadow: 0 0 6px rgba(255,68,255,0.5); }

/* ========================================
   RUNE FORGE (inside Crafting Journal)
   ======================================== */

/* Rarity sections */
.rune-forge-section {
    margin-bottom: 6px;
    transition: opacity 0.15s;
}

.rune-forge-section.locked {
    opacity: 0.25;
    pointer-events: none;
}

.rune-forge-section-header {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 4px;
    margin-bottom: 2px;
}

/* Compact inventory-style grid */
.rune-forge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 45px);
    gap: 3px;
}

.rune-forge-cell {
    width: 45px;
    height: 45px;
    border: 1px solid var(--ui-border);
    background-color: var(--theme-slot-bg);
    cursor: var(--cursor-pointer, pointer);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.1s;
    image-rendering: pixelated;
    overflow: hidden;
}

.rune-forge-cell .pixel-art {
    transform: scale(3) !important;
    image-rendering: pixelated;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

.rune-forge-cell:hover {
    background-color: var(--theme-hover-bg);
}

.rune-forge-cell.selected {
    border: 2px solid #b388ff;
    background: rgba(179,136,255,0.12);
}

.rune-forge-cell.locked {
    cursor: not-allowed;
}

/* Rarity glow — matches inventory slots */
.rune-forge-cell.rare { box-shadow: inset 0 0 5px 2px var(--rare-color); }
.rune-forge-cell.epic { box-shadow: inset 0 0 5px 2px var(--epic-color); }
.rune-forge-cell.legendary { box-shadow: inset 0 0 5px 2px var(--legendary-color); }
.rune-forge-cell.mythic { box-shadow: inset 0 0 5px 2px var(--mythic-color); }
.rune-forge-cell.prismatic { box-shadow: inset 0 0 5px 2px var(--prismatic-color); }

.rune-forge-cell-check {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 10px;
    color: #b388ff;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(179,136,255,0.8);
    line-height: 1;
}

/* Rune Forge detail panel elements */
.rf-detail-slots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 16px 0;
}

.rf-slot {
    width: 45px;
    height: 45px;
    border: 1px solid var(--ui-border);
    background: var(--theme-slot-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    overflow: hidden;
}

.rf-slot .pixel-art {
    transform: scale(3) !important;
    image-rendering: pixelated;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

.rf-slot.empty {
    border-style: dashed;
    opacity: 0.4;
}

.rf-slot.rare { box-shadow: inset 0 0 5px 2px var(--rare-color); }
.rf-slot.epic { box-shadow: inset 0 0 5px 2px var(--epic-color); }
.rf-slot.legendary { box-shadow: inset 0 0 5px 2px var(--legendary-color); }
.rf-slot.mythic { box-shadow: inset 0 0 5px 2px var(--mythic-color); }

.rf-detail-odds {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 8px;
    margin: 12px 0;
}

.rf-odds-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 2px 0;
    color: var(--theme-text-dim);
}

.rf-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.rf-detail-actions .craft-button {
    flex: 1;
}

.rf-clear-btn {
    padding: 6px 12px;
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 4px;
    background: rgba(255, 100, 100, 0.08);
    color: #ff6666;
    font-size: 11px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.15s;
    font-family: 'Ari9500';
}

.rf-clear-btn:hover {
    background: rgba(255, 100, 100, 0.18);
    border-color: rgba(255, 100, 100, 0.5);
}

/* Rune Altar — type/rarity picker buttons */
.ra-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ra-type-btn, .ra-rarity-btn {
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 10px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.15s;
    font-family: 'Ari9500';
}
.ra-type-btn:hover, .ra-rarity-btn:hover {
    filter: brightness(1.4);
}

/* Rune Forge result display */
.rf-result {
    text-align: center;
    padding: 20px 10px;
}

.rf-result-header {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.rf-result-icon {
    width: 60px;
    height: 60px;
    border: 2px solid;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    background: var(--theme-slot-bg);
    image-rendering: pixelated;
    overflow: hidden;
}

.rf-result-icon .pixel-art {
    transform: scale(4) !important;
    image-rendering: pixelated;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

.rf-result-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.rf-result-rarity {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.rf-result-stats {
    text-align: left;
    font-size: 11px;
    max-width: 280px;
    margin: 0 auto 16px auto;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 8px 12px;
}

/* --- Bulk Dismantle --- */
.bulk-dismantle-panel {
    width: 500px;
    max-height: 600px;
    display: flex;
    flex-direction: column;
}

.bulk-dismantle-panel .window-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.bulk-dismantle-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    min-height: 0;
}

.bulk-dismantle-section {
    margin-bottom: 6px;
}

.bulk-dismantle-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 2px;
    cursor: var(--cursor-pointer, pointer);
}

.bulk-dismantle-section-header input[type="checkbox"] {
    accent-color: #b388ff;
    cursor: var(--cursor-pointer, pointer);
}

.bulk-dismantle-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 18px;
    cursor: var(--cursor-pointer, pointer);
    border-radius: 3px;
    font-size: 12px;
    transition: background 0.1s;
}

.bulk-dismantle-item:hover {
    background: var(--theme-hover-bg);
}

.bulk-dismantle-item input[type="checkbox"] {
    accent-color: #b388ff;
    cursor: var(--cursor-pointer, pointer);
    flex-shrink: 0;
}

.bulk-dismantle-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulk-dismantle-footer {
    border-top: 1px solid var(--ui-border);
    padding: 6px 10px;
    background: rgba(0,0,0,0.3);
}

.bulk-dismantle-summary {
    font-size: 11px;
    color: var(--theme-text-dim);
    margin-bottom: 6px;
    line-height: 1.4;
}

.bulk-dismantle-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* --- Rune Forge Animation Overlay --- */
.rune-forge-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: forgeOverlayIn 0.4s ease-out;
}

@keyframes forgeOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rune-forge-overlay.forge-fade-out {
    animation: forgeOverlayOut 0.3s ease-in forwards;
}

@keyframes forgeOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.rune-forge-anim {
    text-align: center;
    position: relative;
    padding: 40px 60px;
    animation: forgeReveal 0.6s ease-out;
    max-width: 400px;
}

@keyframes forgeReveal {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.forge-particles {
    position: absolute;
    top: 50%; left: 50%;
    pointer-events: none;
}

.forge-particle {
    position: absolute;
    border-radius: 50%;
    animation: forgeParticle 1.2s ease-out forwards;
}

@keyframes forgeParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--px), var(--py)) scale(0);
        opacity: 0;
    }
}

.forge-header {
    font-size: 16px;
    color: #b388ff;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.forge-result-upgrade .forge-header {
    color: #ffd740;
    text-shadow: 0 0 12px rgba(255, 215, 64, 0.5);
    animation: forgeHeaderPulse 1s ease-in-out infinite alternate;
}

.forge-result-super .forge-header {
    color: #00ffe5;
    text-shadow: 0 0 20px rgba(0, 255, 229, 0.6), 0 0 40px rgba(255, 68, 255, 0.3);
    font-size: 20px;
    animation: forgeSuperPulse 0.5s ease-in-out infinite alternate;
}

@keyframes forgeHeaderPulse {
    from { text-shadow: 0 0 8px rgba(255, 215, 64, 0.4); }
    to { text-shadow: 0 0 20px rgba(255, 215, 64, 0.8); }
}

@keyframes forgeSuperPulse {
    from { text-shadow: 0 0 12px rgba(0, 255, 229, 0.5), 0 0 30px rgba(255, 68, 255, 0.2); transform: scale(1); }
    to { text-shadow: 0 0 30px rgba(0, 255, 229, 0.9), 0 0 60px rgba(255, 68, 255, 0.5); transform: scale(1.05); }
}

.forge-rune-icon {
    width: 80px;
    height: 80px;
    border: 3px solid #b388ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    position: relative;
    animation: forgeIconSpin 2s ease-out;
    overflow: hidden;
}

.forge-result-super .forge-rune-icon {
    width: 100px;
    height: 100px;
    animation: forgeIconSpin 1.5s ease-out, forgeIconGlow 1s ease-in-out infinite alternate;
}

@keyframes forgeIconSpin {
    0% { transform: rotate(-540deg) scale(0); opacity: 0; }
    60% { transform: rotate(20deg) scale(1.15); }
    80% { transform: rotate(-5deg) scale(0.95); }
    100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes forgeIconGlow {
    from { filter: brightness(1); }
    to { filter: brightness(1.3); }
}

.forge-rune-glow {
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 50%;
    animation: forgeGlowPulse 1.5s ease-in-out infinite alternate;
}

@keyframes forgeGlowPulse {
    from { opacity: 0.3; transform: scale(0.9); }
    to { opacity: 0.8; transform: scale(1.2); }
}

.forge-rune-drop-icon {
    position: relative;
    z-index: 1;
    image-rendering: pixelated;
}

.forge-result-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
    animation: forgeNameIn 0.8s ease-out 0.3s both;
}

@keyframes forgeNameIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.forge-result-rarity {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
    animation: forgeNameIn 0.8s ease-out 0.5s both;
}

.forge-result-stats {
    text-align: left;
    font-size: 11px;
    max-width: 280px;
    margin: 0 auto 16px auto;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 8px 12px;
    animation: forgeNameIn 0.8s ease-out 0.6s both;
}

.forge-result-stats p {
    margin: 2px 0;
}

.forge-continue-btn {
    padding: 8px 30px;
    border: 1px solid rgba(179, 136, 255, 0.4);
    border-radius: 6px;
    background: rgba(179, 136, 255, 0.12);
    color: #b388ff;
    font-size: 13px;
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.2s;
    animation: forgeNameIn 0.6s ease-out 0.8s both;
}

.forge-continue-btn:hover {
    background: rgba(179, 136, 255, 0.25);
    border-color: rgba(179, 136, 255, 0.7);
}

/* ============================================
   COLOSSEUM PvP STYLES
   ============================================ */

#colosseum-content {
    text-align: center;
    padding: 10px;
}

.colosseum-status {
    font-size: var(--font-large);
    color: var(--legendary-color);
    margin-bottom: 15px;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}

.colosseum-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 1px solid var(--ui-border-glow);
}

.colosseum-stat-label {
    color: #aaa;
    text-align: right;
    font-size: var(--font-small);
}

.colosseum-stat-value {
    color: var(--theme-text-body);
    text-align: left;
    font-size: var(--font-small);
}

.colosseum-queue-btn {
    padding: 12px 30px;
    font-size: var(--font-standard);
    font-family: 'Ari9500', cursive;
    border: 2px solid var(--legendary-color);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(241, 196, 15, 0.3), rgba(241, 196, 15, 0.1));
    color: var(--legendary-color);
    cursor: var(--cursor-pointer, pointer);
    transition: all 0.3s;
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
    margin: 5px;
}

.colosseum-queue-btn:hover {
    background: linear-gradient(180deg, rgba(241, 196, 15, 0.5), rgba(241, 196, 15, 0.2));
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.3);
}

.colosseum-queue-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.colosseum-queue-btn.cancel {
    border-color: var(--hp-color);
    color: var(--hp-color);
    background: linear-gradient(180deg, rgba(231, 76, 60, 0.3), rgba(231, 76, 60, 0.1));
}

.colosseum-queue-btn.cancel:hover {
    background: linear-gradient(180deg, rgba(231, 76, 60, 0.5), rgba(231, 76, 60, 0.2));
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
}

.colosseum-searching {
    color: var(--legendary-color);
    font-size: var(--font-standard);
    animation: colosseum-pulse 1.5s ease-in-out infinite;
}

@keyframes colosseum-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.colosseum-match-found {
    padding: 15px;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid var(--legendary-color);
    border-radius: 5px;
    margin: 10px 0;
}

.colosseum-vs {
    font-size: 24px;
    color: var(--legendary-color);
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

.colosseum-player-name {
    font-size: var(--font-standard);
    color: var(--theme-text-body);
}

.colosseum-timer {
    font-size: var(--font-small);
    color: #aaa;
    margin-top: 5px;
}

/* PvP HUD overlay during arena match */
.pvp-hud {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10001;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--legendary-color);
    border-radius: 5px;
    backdrop-filter: blur(5px);
}

.pvp-hud-player {
    text-align: center;
    min-width: 120px;
}

.pvp-hud-name {
    font-size: var(--font-small);
    color: var(--theme-text-body);
    margin-bottom: 4px;
}

.pvp-hud-hp-bar {
    width: 120px;
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    border-radius: 3px;
    overflow: hidden;
}

.pvp-hud-hp-fill {
    height: 100%;
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    transition: width 0.3s;
}

.pvp-hud-vs {
    font-size: 18px;
    color: var(--legendary-color);
    font-weight: bold;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}

/* Match result overlay */
.colosseum-result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100001;
    animation: fadeIn 0.5s;
}

.colosseum-result-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 0 20px;
}

.colosseum-result-title.victory {
    color: var(--legendary-color);
}

.colosseum-result-title.defeat {
    color: var(--hp-color);
}

.colosseum-result-details {
    font-size: var(--font-standard);
    color: var(--theme-text-body);
    margin-bottom: 10px;
}

.colosseum-result-reward {
    font-size: var(--font-standard);
    color: #2ecc71;
    margin-bottom: 20px;
}
/* =============================================
   PATCH UPDATE NOTIFICATION
   ============================================= */

#patch-notify {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(12, 14, 22, 0.97);
    border: 1px solid var(--mythic-color);
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(0, 229, 204, 0.3), 0 4px 20px rgba(0, 0, 0, 0.6);
    font-family: 'Ari9500', sans-serif;
    max-width: 340px;
    animation: patch-notify-in 0.3s ease-out;
}

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

#patch-notify-icon {
    font-size: 22px;
    color: var(--mythic-color);
    flex-shrink: 0;
    line-height: 1;
    text-shadow: 0 0 8px rgba(0, 229, 204, 0.7);
}

#patch-notify-body {
    flex: 1;
    min-width: 0;
}

#patch-notify-title {
    font-size: var(--font-medium);
    color: var(--mythic-color);
    font-weight: bold;
    margin-bottom: 3px;
    text-shadow: 0 0 6px rgba(0, 229, 204, 0.5);
}

#patch-notify-msg {
    font-size: var(--font-small);
    color: rgba(216, 222, 230, 0.8);
    line-height: 1.4;
}

#patch-notify-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

#patch-notify-refresh {
    padding: 5px 12px;
    background: var(--mythic-color);
    color: #0a0c14;
    border: none;
    border-radius: 3px;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-small);
    font-weight: bold;
    cursor: var(--cursor-pointer, pointer);
    white-space: nowrap;
    transition: opacity 0.15s;
}

#patch-notify-refresh:hover { opacity: 0.85; }

#patch-notify-dismiss {
    padding: 4px 12px;
    background: transparent;
    color: rgba(216, 222, 230, 0.5);
    border: 1px solid rgba(216, 222, 230, 0.2);
    border-radius: 3px;
    font-family: 'Ari9500', sans-serif;
    font-size: var(--font-small);
    cursor: var(--cursor-pointer, pointer);
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

#patch-notify-dismiss:hover {
    color: rgba(216, 222, 230, 0.8);
    border-color: rgba(216, 222, 230, 0.4);
}









/* ============================================================
   FRONT-END PIXEL SKIN — 9-slice frames from assets/ui/
   Scoped to the pre-game screens plus the account / recovery /
   confirmation modals and the settings window.

   Seam-proof: each framed element carries a SOLID background in the
   frame's body colour with default border-box clip, so the fill sits
   UNDER the whole frame (gaps between 9-slice regions at fractional
   UI scale show the body colour, not the game behind).

   Corner-proof: clip-path staircase polygons (--px-clip-*) trace the
   art's EXACT stepped corner silhouette (measured from the _x2 pixel
   alpha), so the square background can never poke out past the art's
   rounded corners. border-radius cannot do this: a smooth circle
   either bulges outside the pixel staircase at the 45° diagonal or,
   if inscribed, uncovers the slice seams near the corners — every
   radius value fails one way or the other. The clip scales with the
   UI transform exactly like the border-image, so it stays aligned at
   fractional scale. Assets are PRE-SCALED (_x2/_x3);
   slice == border-width; border-radius stays 0.
   ============================================================ */
:root {
    /* Window frame corner: 10px staircase (rows 0-1 cut to x10, 2-3 to x6,
       4-5 to x4, 6-9 to x2) — from ui_window_9slice_x2 alpha. */
    --px-clip-window: polygon(
        10px 0, calc(100% - 10px) 0,
        calc(100% - 10px) 2px, calc(100% - 6px) 2px,
        calc(100% - 6px) 4px, calc(100% - 4px) 4px,
        calc(100% - 4px) 6px, calc(100% - 2px) 6px,
        calc(100% - 2px) 10px, 100% 10px,
        100% calc(100% - 10px),
        calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) calc(100% - 6px),
        calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px),
        calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px),
        calc(100% - 10px) calc(100% - 2px), calc(100% - 10px) 100%,
        10px 100%,
        10px calc(100% - 2px), 6px calc(100% - 2px),
        6px calc(100% - 4px), 4px calc(100% - 4px),
        4px calc(100% - 6px), 2px calc(100% - 6px),
        2px calc(100% - 10px), 0 calc(100% - 10px),
        0 10px,
        2px 10px, 2px 6px, 4px 6px, 4px 4px,
        6px 4px, 6px 2px, 10px 2px
    );
    /* Button frame corner: 4px staircase (rows 0-1 cut to x4, 2-3 to x2) —
       same silhouette on the up and down sheets. */
    --px-clip-btn: polygon(
        4px 0, calc(100% - 4px) 0,
        calc(100% - 4px) 2px, calc(100% - 2px) 2px,
        calc(100% - 2px) 4px, 100% 4px,
        100% calc(100% - 4px),
        calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px),
        calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
        4px 100%,
        4px calc(100% - 2px), 2px calc(100% - 2px),
        2px calc(100% - 4px), 0 calc(100% - 4px),
        0 4px,
        2px 4px, 2px 2px, 4px 2px
    );
    /* Title strip + slot frame corner: single 2px notch. */
    --px-clip-slot: polygon(
        2px 0, calc(100% - 2px) 0,
        calc(100% - 2px) 2px, 100% 2px,
        100% calc(100% - 2px),
        calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
        2px 100%,
        2px calc(100% - 2px), 0 calc(100% - 2px),
        0 2px,
        2px 2px
    );
    /* 1x ("small") frame corners for dense UI — half the x2 staircases. */
    --px-clip-window-sm: polygon(
        5px 0, calc(100% - 5px) 0,
        calc(100% - 5px) 1px, calc(100% - 3px) 1px,
        calc(100% - 3px) 2px, calc(100% - 2px) 2px,
        calc(100% - 2px) 3px, calc(100% - 1px) 3px,
        calc(100% - 1px) 5px, 100% 5px,
        100% calc(100% - 5px),
        calc(100% - 1px) calc(100% - 5px), calc(100% - 1px) calc(100% - 3px),
        calc(100% - 2px) calc(100% - 3px), calc(100% - 2px) calc(100% - 2px),
        calc(100% - 3px) calc(100% - 2px), calc(100% - 3px) calc(100% - 1px),
        calc(100% - 5px) calc(100% - 1px), calc(100% - 5px) 100%,
        5px 100%,
        5px calc(100% - 1px), 3px calc(100% - 1px),
        3px calc(100% - 2px), 2px calc(100% - 2px),
        2px calc(100% - 3px), 1px calc(100% - 3px),
        1px calc(100% - 5px), 0 calc(100% - 5px),
        0 5px,
        1px 5px, 1px 3px, 2px 3px, 2px 2px,
        3px 2px, 3px 1px, 5px 1px
    );
    --px-clip-btn-sm: polygon(
        2px 0, calc(100% - 2px) 0,
        calc(100% - 2px) 1px, calc(100% - 1px) 1px,
        calc(100% - 1px) 2px, 100% 2px,
        100% calc(100% - 2px),
        calc(100% - 1px) calc(100% - 2px), calc(100% - 1px) calc(100% - 1px),
        calc(100% - 2px) calc(100% - 1px), calc(100% - 2px) 100%,
        2px 100%,
        2px calc(100% - 1px), 1px calc(100% - 1px),
        1px calc(100% - 2px), 0 calc(100% - 2px),
        0 2px,
        1px 2px, 1px 1px, 2px 1px
    );
    --px-clip-slot-sm: polygon(
        1px 0, calc(100% - 1px) 0,
        calc(100% - 1px) 1px, 100% 1px,
        100% calc(100% - 1px),
        calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 100%,
        1px 100%,
        1px calc(100% - 1px), 0 calc(100% - 1px),
        0 1px,
        1px 1px
    );
    /* Bar-trough pill: 3px stepped caps matching the ui_bar_* art taper. */
    --px-clip-bar: polygon(
        3px 0, calc(100% - 3px) 0,
        calc(100% - 3px) 1px, calc(100% - 2px) 1px,
        calc(100% - 2px) 2px, calc(100% - 1px) 2px,
        calc(100% - 1px) 3px, 100% 3px,
        100% calc(100% - 3px),
        calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) calc(100% - 2px),
        calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 1px),
        calc(100% - 3px) calc(100% - 1px), calc(100% - 3px) 100%,
        3px 100%,
        3px calc(100% - 1px), 2px calc(100% - 1px),
        2px calc(100% - 2px), 1px calc(100% - 2px),
        1px calc(100% - 3px), 0 calc(100% - 3px),
        0 3px,
        1px 3px, 1px 2px, 2px 2px, 2px 1px, 3px 1px
    );
    --px-frame-window: url('assets/ui/ui_window_9slice_x2.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2.png');
    --px-xbtn: url('assets/ui/ui_xbutton_x3.png');
    /* 1x ("small") frames for dense UI: tab strips, hotkeys, item slots,
       minimap. Theme variants are 2:1 downsamples of the x2 art. */
    --px-frame-window-sm: url('assets/ui/ui_window_9slice.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down.png');
    /* Pill-shaped bar fills (split from ui_hpmpexp_9slice.png): complete
       art with outline/highlight/shadow baked in; slice 3 keeps the caps. */
    --px-bar-hp: url('assets/ui/ui_bar_hp.png');
    --px-bar-mp: url('assets/ui/ui_bar_mp.png');
    --px-bar-exp: url('assets/ui/ui_bar_exp.png');
    --px-window-bg: #252337;
    --px-btn-bg: #3b3a4c;
    --px-title-bg: #3b3a4c;
    --px-slot-bg: #252337;
}
html[data-theme="ocean"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_ocean.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_ocean.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_ocean.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_ocean.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_ocean.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_ocean.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_ocean.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_ocean.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_ocean.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_ocean.png');
    --px-window-bg: #232d37; --px-btn-bg: #3a434c; --px-title-bg: #3a434c; --px-slot-bg: #232d37;
}
html[data-theme="emerald"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_emerald.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_emerald.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_emerald.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_emerald.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_emerald.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_emerald.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_emerald.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_emerald.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_emerald.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_emerald.png');
    --px-window-bg: #23372b; --px-btn-bg: #3a4c41; --px-title-bg: #3a4c41; --px-slot-bg: #23372b;
}
html[data-theme="ember"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_ember.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_ember.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_ember.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_ember.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_ember.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_ember.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_ember.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_ember.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_ember.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_ember.png');
    --px-window-bg: #372d23; --px-btn-bg: #4c433a; --px-title-bg: #4c433a; --px-slot-bg: #372d23;
}

html[data-theme="onyx"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_onyx.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_onyx.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_onyx.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_onyx.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_onyx.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_onyx.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_onyx.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_onyx.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_onyx.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_onyx.png');
    --px-window-bg: #15141f; --px-btn-bg: #21202a; --px-title-bg: #21202a; --px-slot-bg: #15141f;
}

html[data-theme="gold"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_gold.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_gold.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_gold.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_gold.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_gold.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_gold.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_gold.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_gold.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_gold.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_gold.png');
    --px-window-bg: #332b13; --px-btn-bg: #4c4322; --px-title-bg: #4c4322; --px-slot-bg: #332b13;
}
/* Gachapon themes: additive sheen swept diagonally across every window so
   the exclusive skins read as polished metal/crystal/ice, not just recolors.
   screen-blended and pointer-inert, clipped to the window's staircase shape. */
html[data-theme="gold"] .window::after,
html[data-theme="rose"] .window::after,
html[data-theme="glacier"] .window::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    clip-path: inherit;
    mix-blend-mode: screen;
}
html[data-theme="gold"] .window::after {
    background: linear-gradient(155deg,
        rgba(255, 226, 130, 0.16) 0%,
        rgba(255, 200, 70, 0.05) 30%,
        transparent 52%,
        rgba(255, 208, 90, 0.07) 78%,
        rgba(255, 230, 150, 0.13) 100%);
}
html[data-theme="rose"] .window::after {
    background: linear-gradient(155deg,
        rgba(255, 170, 215, 0.16) 0%,
        rgba(230, 120, 180, 0.05) 30%,
        transparent 52%,
        rgba(240, 140, 195, 0.07) 78%,
        rgba(255, 185, 225, 0.13) 100%);
}
html[data-theme="glacier"] .window::after {
    background: linear-gradient(155deg,
        rgba(175, 225, 255, 0.17) 0%,
        rgba(110, 180, 230, 0.05) 30%,
        transparent 52%,
        rgba(130, 195, 240, 0.07) 78%,
        rgba(190, 235, 255, 0.14) 100%);
}

html[data-theme="rose"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_rose.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_rose.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_rose.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_rose.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_rose.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_rose.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_rose.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_rose.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_rose.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_rose.png');
    --px-window-bg: #331b28; --px-btn-bg: #4c2c3e; --px-title-bg: #4c2c3e; --px-slot-bg: #331b28;
}

html[data-theme="glacier"] {
    --px-frame-window: url('assets/ui/ui_window_9slice_x2_glacier.png');
    --px-frame-title: url('assets/ui/ui_titlebarstrip_9slice_x2_glacier.png');
    --px-frame-slot: url('assets/ui/ui_slot_9slice_x2_glacier.png');
    --px-btn-up: url('assets/ui/ui_button_up_x2_glacier.png');
    --px-btn-down: url('assets/ui/ui_button_down_x2_glacier.png');
    --px-frame-window-sm: url('assets/ui/ui_window_9slice_glacier.png');
    --px-frame-title-sm: url('assets/ui/ui_titlebarstrip_9slice_glacier.png');
    --px-frame-slot-sm: url('assets/ui/ui_slot_9slice_glacier.png');
    --px-btn-up-sm: url('assets/ui/ui_button_up_glacier.png');
    --px-btn-down-sm: url('assets/ui/ui_button_down_glacier.png');
    --px-window-bg: #16262f; --px-btn-bg: #263c48; --px-title-bg: #263c48; --px-slot-bg: #16262f;
}

/* -- Windows / panels / framed modals -> window frame (border 12, staircase clip) -- */
#main-menu-screen .menu-auth-panel,
#character-creation .create-panel,
#character-selection-screen #character-list,
#account-modal .modal-content,
#recovery-modal .modal-content,
.modal-overlay > .modal-content,
#confirmation-modal,
#settings-menu {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Character cards use the window frame WITHOUT fill: the card interior is fully
   covered by its own children (portrait / name / meta), so there's no seam to
   backstop, and skipping fill lets the selected inset glow show (a fill centre
   would paint over an inset box-shadow). Staircase clip, so no peek. */
#character-selection-screen .char-card {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window) !important;
    box-shadow: none !important;
}

/* Selected character: soft gold glow on the INSIDE of the frame + lift (base
   keeps the translateY lift). No outer stroke. */
#character-selection-screen .char-card.selected {
    box-shadow: inset 0 0 26px 4px rgba(241, 196, 15, .55), inset 0 0 0 2px rgba(241, 196, 15, .3) !important;
    filter: brightness(1.04);
}

/* Character name strip: drop the purple banner — sit the name on the card body */
#character-selection-screen .card-name-banner {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Class / level / time played -> inset slot panel so it stands out on the card */
#character-selection-screen .card-meta {
    background: var(--px-slot-bg) !important;
    border: 8px solid transparent !important;
    border-image: var(--px-frame-slot) 8 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    margin: 4px 10px 10px !important;
    padding: 6px 10px !important;
}

/* Character delete button -> the same pixel X sprite as window close buttons.
   Native 36px so only the left (up) frame of the 72x36 sheet shows; :active
   swaps to the right (down) frame. transition:none so the swap is an instant
   frame change, not a slide across the sheet. */
#character-selection-screen .card-delete {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--px-xbtn) no-repeat 0 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    transition: none !important;
}
#character-selection-screen .card-delete:hover { filter: brightness(1.2); transform: none !important; }
#character-selection-screen .card-delete:active { background-position: -36px 0 !important; filter: none; transform: none !important; }

/* -- Title bars -> title-strip frame (border 6, notch clip) -- */
#account-modal .modal-header,
#recovery-modal .modal-header,
#confirmation-modal .window-title,
#settings-menu .window-title {
    background: var(--px-title-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-title) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    box-shadow: none !important;
    padding: 0 6px !important;
    min-height: 24px;
}

/* -- X close button -> sprite swap, no animation. Full 36px sprite with
   negative vertical margins so it spans the slim (6+24+6 = 36px) header
   edge-to-edge instead of inflating it -- */
#account-modal .modal-close,
#recovery-modal .modal-close,
#confirmation-modal .close-btn,
#settings-menu .close-btn {
    width: 36px !important;
    height: 36px !important;
    margin: -6px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--px-xbtn) no-repeat 0 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    flex-shrink: 0;
    transition: none !important;
}
#account-modal .modal-close:hover,
#recovery-modal .modal-close:hover,
#confirmation-modal .close-btn:hover,
#settings-menu .close-btn:hover { filter: brightness(1.2); }
#account-modal .modal-close:active,
#recovery-modal .modal-close:active,
#confirmation-modal .close-btn:active,
#settings-menu .close-btn:active { background-position: -36px 0 !important; filter: none; }

/* Generic info/confirm popups (showInfoModal / showTypeConfirmation): the body
   now carries the window frame (added to the framed-modal group above). Drop the
   old gradient header strip so the big centred title sits directly on the pixel
   body — the slim title frame would stretch awkwardly around a tall <h2>. The
   specific #account-modal/#recovery-modal header rules out-specify this, so those
   keep their framed title bars. */
.modal-overlay > .modal-content > .modal-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 4px !important;
}

/* -- Buttons -> bevel-up, bevel-down on press (border 10, staircase clip) -- */
#main-menu-screen .pixel-btn,
#main-menu-screen .menu-auth-submit,
#character-selection-screen .pixel-btn,
#character-creation .pixel-btn,
#character-creation .roll-btn,
#character-creation .randomize-btn,
#character-creation .dice-btn,
#character-creation .arrow,
#account-modal .account-btn,
#recovery-modal .account-btn,
#confirmation-modal .window-content-button,
#settings-menu .window-content-button,
#settings-menu .option-item button,
#settings-footer button,
.modal-overlay > .modal-content .window-content-button,
.modal-overlay > .modal-content .account-btn {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
    transition: filter 0.1s ease !important;
}
#main-menu-screen .pixel-btn:not(:disabled):hover,
#main-menu-screen .menu-auth-submit:not(:disabled):hover,
#character-selection-screen .pixel-btn:not(:disabled):hover,
#character-creation .pixel-btn:not(:disabled):hover,
#character-creation .roll-btn:not(:disabled):hover,
#character-creation .randomize-btn:not(:disabled):hover,
#character-creation .dice-btn:not(:disabled):hover,
#character-creation .arrow:not(:disabled):hover,
#account-modal .account-btn:not(:disabled):hover,
#recovery-modal .account-btn:not(:disabled):hover,
#confirmation-modal .window-content-button:not(:disabled):hover,
#settings-menu .window-content-button:not(:disabled):hover,
#settings-menu .option-item button:not(:disabled):hover,
#settings-footer button:not(:disabled):hover,
.modal-overlay > .modal-content .window-content-button:not(:disabled):hover,
.modal-overlay > .modal-content .account-btn:not(:disabled):hover {
    border-image: var(--px-btn-up) 10 fill stretch !important;
    filter: brightness(1.15) !important;
    opacity: 1 !important;
    transform: none !important;
}
#main-menu-screen .pixel-btn:not(:disabled):active,
#main-menu-screen .menu-auth-submit:not(:disabled):active,
#character-selection-screen .pixel-btn:not(:disabled):active,
#character-creation .pixel-btn:not(:disabled):active,
#character-creation .roll-btn:not(:disabled):active,
#character-creation .randomize-btn:not(:disabled):active,
#character-creation .dice-btn:not(:disabled):active,
#character-creation .arrow:not(:disabled):active,
#account-modal .account-btn:not(:disabled):active,
#recovery-modal .account-btn:not(:disabled):active,
#confirmation-modal .window-content-button:not(:disabled):active,
#settings-menu .window-content-button:not(:disabled):active,
#settings-menu .option-item button:not(:disabled):active,
#settings-footer button:not(:disabled):active,
.modal-overlay > .modal-content .window-content-button:not(:disabled):active,
.modal-overlay > .modal-content .account-btn:not(:disabled):active {
    border-image: var(--px-btn-down) 10 fill stretch !important;
    filter: none !important;
    transform: none !important;
}
#main-menu-screen .pixel-btn:disabled,
#character-selection-screen .pixel-btn:disabled,
#character-creation .pixel-btn:disabled,
#account-modal .account-btn:disabled,
#settings-menu .window-content-button:disabled,
.modal-overlay > .modal-content .window-content-button:disabled,
.modal-overlay > .modal-content .account-btn:disabled {
    border-image: var(--px-btn-up) 10 fill stretch !important;
    background: var(--px-btn-bg) !important;
    filter: grayscale(0.6) brightness(0.6) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
/* Primary actions keep warm gold text so they still read as "the" action */
#main-menu-screen .pixel-btn.primary,
#character-selection-screen .pixel-btn.primary,
#character-creation .pixel-btn.primary {
    color: #ffe27a !important;
}

/* -- Account pill (top-right sign-in/status chip): same button frame as the
   rest of the front end, no more flat rectangle + hard drop shadow. Padding
   is trimmed so the framed pill doesn't balloon in size. -- */
#main-menu-screen .account-pill,
#character-selection-screen .account-pill {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    padding: 1px 6px !important;
    box-shadow: none !important;
}
#main-menu-screen .account-pill:hover,
#character-selection-screen .account-pill:hover {
    border-image: var(--px-btn-up) 10 fill stretch !important;
    filter: brightness(1.15);
}

/* -- Tabs (auth / account / settings): active sits pressed -- */
#main-menu-screen .menu-auth-tab,
#account-modal .account-tab {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    box-shadow: none !important;
}
#main-menu-screen .menu-auth-tab.active,
#account-modal .account-tab.active {
    border-image: var(--px-btn-down) 10 fill stretch !important;
    filter: brightness(1.08);
}
#main-menu-screen .menu-auth-tab:hover:not(.active),
#account-modal .account-tab:hover:not(.active) { filter: brightness(1.15); }
#main-menu-screen .menu-auth-tabs,
#account-modal .account-tabs,
#settings-menu .shop-tabs { border-bottom: none !important; }

/* -- Text fields & stat dice -> slot frame (border 8, notch clip) -- */
#main-menu-screen .menu-auth-input,
#character-creation .field-input,
#character-creation .stat-die,
#account-modal .account-input,
#recovery-modal .account-input {
    background: var(--px-slot-bg) !important;
    border: 8px solid transparent !important;
    border-image: var(--px-frame-slot) 8 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    box-shadow: none !important;
}

/* Create screen: reclaim vertical space so both panels fit with NO scrollbar
   and nothing clipped. Keep enough top padding that the header clears the stamp. */
#character-creation .create-root { padding: 24px 20px 8px !important; }
#character-creation .create-header { margin-bottom: 4px !important; }
#character-creation .create-panel {
    padding: 2px 8px !important;
    gap: 4px !important;
    overflow: hidden !important;
}

/* Settings: only the active tab scrolls, and every tab gets the SAME single,
   thin scrollbar. scrollbar-gutter:stable reserves the track space on all tabs
   so a short tab (Video) and a long one (Keyboard) keep identical width/inset —
   no layout shift, and no dark track bar showing on one tab but not another. */
#settings-menu .window-content { overflow: hidden !important; }
#settings-content .tab-content {
    padding-right: 8px !important;
    scrollbar-gutter: stable !important;
}
/* Section headers on the option-list tabs (Audio/Video/Game) used the generic
   .window-content h3 divider, which is nearly invisible (0.2 alpha). Match the
   Keyboard tab's .key-mapping-group h4 divider so every tab reads consistently. */
#settings-content .tab-content h3 {
    border-bottom: 1px solid var(--ui-border) !important;
    padding-bottom: 5px !important;
}
#settings-content .tab-content::-webkit-scrollbar { width: 8px !important; }
#settings-content .tab-content::-webkit-scrollbar-track { background: transparent !important; border: none !important; }
#settings-content .tab-content::-webkit-scrollbar-thumb {
    background: var(--ui-border) !important;
    border-radius: 4px !important;
    border: none !important;
}

/* Version stamp: tuck tight into the very top-left corner on every screen. */
.corner-stamp.tl { top: 5px !important; left: 8px !important; }

/* ============================================================
   IN-GAME PIXEL SKIN — the same 9-slice frames applied to every
   in-game .window (all windows share the class), their title bars,
   close buttons, content buttons, tabs, and text inputs.

   Same invariants as the front-end section above: solid body-colour
   background + `fill` for seam-proofing at fractional UI scale,
   --px-clip-* staircase corner clips (border-radius can NOT do
   this), no transform scaling on framed elements (open/close
   keyframes are fade+slide only for the same reason).

   Dense UI (tab strips, hotkey bar, item/skill slots, minimap,
   party/queue overlays) uses the finer 1x "-sm" frames (button 5,
   slot 4, window 6, title 3) with the matching -sm staircase clips.

   Deliberately NOT framed: chat log (stays glassy by design) and
   #main-ui-bar (fixed bottom-bar layout).
   ============================================================ */
.window {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.window > .window-title {
    background: var(--px-title-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-title) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    box-shadow: none !important;
    padding: 0 8px !important;
    min-height: 24px;
}

/* Title text never wraps to two lines (Quest Helper was breaking into
   "Quest" / "Helper"); ellipsize only as a last resort. */
.window > .window-title > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Narrow passive panel: one font step down so "Quest Helper" fits beside
   the full-size X in its 200px-wide bar */
#quest-helper > .window-title > span {
    font-size: var(--font-standard);
}

/* X close button -> sprite swap, no animation (matches front-end modals).
   Full 36px sprite, but negative vertical margins keep it from driving the
   title bar's height: the slim strip is exactly 6+24+6 = 36px, so the X
   spans the bar edge-to-edge instead of inflating it. */
.window .close-btn {
    width: 36px !important;
    height: 36px !important;
    margin: -6px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--px-xbtn) no-repeat 0 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    flex-shrink: 0;
    transition: none !important;
    clip-path: none !important;
}
.window .close-btn:hover { filter: brightness(1.2); }
.window .close-btn:active { background-position: -36px 0 !important; filter: none; }

/* Content buttons -> bevel-up, bevel-down on press. Compact padding: the
   10px frame already provides visual bulk, so interior padding stays slim.
   Tab strips are NOT in this group — they get the small 1x frame below.
   .pixel-art buttons (stat +, other sprite-icon buttons) are excluded:
   their whole face is an inline sprite background that `background:
   !important` would wipe (v0.8.95 bug — empty stat + buttons). :where()
   keeps the selector's specificity unchanged. */
.window .window-content-button,
.window .window-content button:where(:not(.pixel-art):not(.palette-chip):not(.arrow)),
.window .option-item button {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: var(--theme-text-bright);
    padding: 3px 10px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
    transition: filter 0.1s ease !important;
}
.window .window-content-button:not(:disabled):hover,
.window .window-content button:where(:not(.pixel-art):not(.palette-chip):not(.arrow)):not(:disabled):hover,
.window .option-item button:not(:disabled):hover {
    border-image: var(--px-btn-up) 10 fill stretch !important;
    background: var(--px-btn-bg) !important;
    filter: brightness(1.15) !important;
    transform: none !important;
}
.window .window-content-button:not(:disabled):active,
.window .window-content button:where(:not(.pixel-art):not(.palette-chip):not(.arrow)):not(:disabled):active,
.window .option-item button:not(:disabled):active {
    border-image: var(--px-btn-down) 10 fill stretch !important;
    filter: none !important;
    transform: none !important;
}
.window .window-content-button:disabled,
.window .window-content button:where(:not(.pixel-art):not(.palette-chip):not(.arrow)):disabled {
    border-image: var(--px-btn-up) 10 fill stretch !important;
    background: var(--px-btn-bg) !important;
    filter: grayscale(0.6) brightness(0.6) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Colour swatches (beautician / character colour pickers) are excluded from the
   pixel button skin above (their whole face is an inline background colour, like
   .pixel-art sprite buttons). Neutralise the generic .window-content button
   padding/shape so they stay 20x20 chips with their colour showing through. */
.window .window-content button.palette-chip {
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    border: 1px solid #000 !important;
    border-image: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.window .window-content button.palette-chip.selected {
    outline: 2px solid var(--exp-color) !important;
    outline-offset: 1px;
}

/* Tab strips -> SMALL (1x) button frame so a row of 14 tabs (rankings)
   doesn't balloon. Buttons need `button.` in the selector to out-rank the
   generic content-button rule above; .cj-tab / .crafting-tier-tab are divs. */
.window button.tab-button,
.window button.tab-btn,
.window button.ranking-tab-button,
.window button.achievement-tab-button,
.window button.bestiary-tab-button,
.window button.quest-tab-button,
.window button.guild-member-tab,
.window button.world-map-tab,
.window button.medal-sub-tab,
.window .cj-tab,
.window .crafting-tier-tab {
    background: var(--px-btn-bg) !important;
    border: 5px solid transparent !important;
    border-image: var(--px-btn-up-sm) 5 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn-sm) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: var(--theme-text-bright);
    padding: 2px 8px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
    transition: filter 0.1s ease !important;
}
.window button.tab-button:hover:not(.active),
.window button.tab-btn:hover:not(.active),
.window button.ranking-tab-button:hover:not(.active),
.window button.achievement-tab-button:hover:not(.active),
.window button.bestiary-tab-button:hover:not(.active),
.window button.quest-tab-button:hover:not(.active),
.window button.guild-member-tab:hover:not(.active),
.window button.world-map-tab:hover:not(.active),
.window button.medal-sub-tab:hover:not(.active),
.window .cj-tab:hover:not(.active),
.window .crafting-tier-tab:hover:not(.active) {
    border-image: var(--px-btn-up-sm) 5 fill stretch !important;
    background: var(--px-btn-bg) !important;
    filter: brightness(1.15) !important;
    transform: none !important;
}
.window button.tab-button.active,
.window button.tab-btn.active,
.window button.ranking-tab-button.active,
.window button.achievement-tab-button.active,
.window button.bestiary-tab-button.active,
.window button.quest-tab-button.active,
.window button.guild-member-tab.active,
.window button.world-map-tab.active,
.window button.medal-sub-tab.active,
.window .cj-tab.active,
.window .crafting-tier-tab.active {
    border-image: var(--px-btn-down-sm) 5 fill stretch !important;
    background: var(--px-btn-bg) !important;
    filter: brightness(1.08) !important;
    transform: none !important;
}

/* Text fields / selects -> inset slot frame */
.window input[type="text"],
.window input[type="number"],
.window input[type="password"],
.window select,
.window textarea {
    background: var(--px-slot-bg) !important;
    border: 8px solid transparent !important;
    border-image: var(--px-frame-slot) 8 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    box-shadow: none !important;
}

/* -- Bottom-right hotkey buttons -> small button frame carried by ::before
   so the notification badges (.hotkey-notification, offset outside the
   button box) aren't clipped by the frame's corner clip-path. isolation
   keeps the z-index:-1 pseudo inside the button, behind its content but
   above the bar. The settings gear stays a bare icon. -- */
.hotkey:not(.settings-btn) {
    background: transparent !important;
    border: 5px solid transparent !important;
    border-image: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    isolation: isolate;
    box-shadow: none !important;
    padding: 4px 2px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    transform: none !important;
    transition: filter 0.1s ease !important;
}
.hotkey:not(.settings-btn)::before {
    content: '';
    position: absolute;
    inset: -5px;
    z-index: -1;
    background: var(--px-btn-bg);
    border: 5px solid transparent;
    border-image: var(--px-btn-up-sm) 5 fill stretch;
    clip-path: var(--px-clip-btn-sm);
    pointer-events: none;
}
.hotkey:not(.settings-btn):hover {
    background: transparent !important;
    filter: brightness(1.15);
    transform: none !important;
    box-shadow: none !important;
}
.hotkey:not(.settings-btn):active {
    background: transparent !important;
    filter: none;
    transform: none !important;
    box-shadow: none !important;
}
.hotkey:not(.settings-btn):active::before {
    border-image: var(--px-btn-down-sm) 5 fill stretch;
}

/* -- Skill hotbar slots -> full x2 slot frame (the 1x frame read as a bare
   thin border at 48px). Border adds outside the 48px content box so skill
   icons keep their exact size. -- */
.skill-slot {
    background: var(--px-slot-bg) !important;
    border: 8px solid transparent !important;
    /* NO fill: a fill centre paints over inset box-shadows (cooldown/rarity
       feedback); the solid background covers the interior instead. */
    border-image: var(--px-frame-slot) 8 stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
}

/* -- Inventory / equipment / trade slots -> small slot frame. Rarity stays
   an inset glow (renders inside the frame); selected + drag-over become
   inset rings because a coloured border can't coexist with border-image. -- */
.inventory-slot,
.equip-slot {
    background: var(--px-slot-bg) !important;
    border: 4px solid transparent !important;
    /* NO fill: a fill centre paints over the inset rarity glow (same trap
       as the char-card select glow); the solid background covers instead. */
    border-image: var(--px-frame-slot-sm) 4 stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot-sm) !important;
}
.inventory-slot:hover,
.equip-slot:hover {
    background: var(--px-slot-bg) !important;
    filter: brightness(1.25);
}
/* border-image re-declared: the border shorthand resets it, and these
   rules out-cascade the base slot rule — without it the frame vanishes
   on selected/drag-over slots. */
.inventory-slot.selected,
.equip-slot.selected {
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 stretch !important;
    box-shadow: inset 0 0 0 2px var(--exp-color) !important;
}
.equip-slot.drag-over {
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 stretch !important;
    box-shadow: inset 0 0 0 2px #4CAF50 !important;
    background: rgba(76, 175, 80, 0.3) !important;
}
/* Dragged item does NOT fit this slot (wrong type/category): red, not green */
.equip-slot.drag-invalid {
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 stretch !important;
    box-shadow: inset 0 0 0 2px rgba(231, 76, 60, 0.8) !important;
    background: rgba(180, 40, 30, 0.2) !important;
}

/* -- Minimap + colosseum-queue overlay -> STANDARD window frame.
   Was the 1x "sm" frame (border 6), which read as a different pixel density
   next to inventory/equipment; x2 frame at border 12 matches them exactly.
   #party-overlay is deliberately excluded — see the "sm" frame rule below,
   it sits over gameplay constantly so it stays a slim HUD strip, not a full
   pixel window. -- */
#minimap-container,
#colosseum-queue-overlay {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window) !important;
    box-shadow: none !important;
}
#minimap-header,
#colosseum-queue-overlay-header {
    background: var(--px-title-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-title) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    padding: 0 5px !important;
    min-height: 20px;
}
/* Party overlay -> small "sm" frame (half the border weight of the standard
   window), narrower, and tighter member rows. It's on screen the whole time
   you're partied, so it needs to read as a slim HUD strip, not a loud window. */
#party-overlay {
    background: var(--px-window-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-window-sm) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window-sm) !important;
    box-shadow: none !important;
}
#party-overlay-header {
    background: var(--px-title-bg) !important;
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot-sm) !important;
    padding: 0 4px !important;
    min-height: 16px;
}
/* Header toggle is a dense in-header control -> "sm" button tier (the x2
   button at border 10 was eating half the header's width and height) */
#toggle-minimap-btn {
    background: var(--px-btn-bg) !important;
    border: 5px solid transparent !important;
    border-image: var(--px-btn-up-sm) 5 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn-sm) !important;
    padding: 0 5px !important;
    font-size: var(--font-small) !important;
    line-height: 1 !important;
    flex-shrink: 0;
}
#toggle-minimap-btn:hover { filter: brightness(1.15); }
#toggle-minimap-btn:active { border-image: var(--px-btn-down-sm) 5 fill stretch !important; filter: none; }

/* Resize corner must be grabbable AT the visual corner: the container's
   overflow:hidden clipped the handle at the padding box, which the 12px
   frame pushed well inside the visible edge. Content clipping lives on
   #minimap itself, so the container can stay visible. */
#minimap-container {
    overflow: visible !important;
}
#minimap-resize-handle {
    width: 22px;
    height: 22px;
    bottom: -12px;
    right: -12px;
    border-bottom: none;
    border-right: none;
}
/* Small grip glyph at the frame corner so the affordance is still visible */
#minimap-resize-handle::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--theme-text-dim, #9a97b0);
    border-right: 2px solid var(--theme-text-dim, #9a97b0);
}
/* Fit-in-box scaling: the map canvas is letterboxed inside the user-sized
   box instead of dictating the box's height (see rebuildMiniMapStatic) */
#minimap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- Main UI bar (bottom of screen) -> window frame carried by a ::before
   layer, NOT the element: the chat box and skill hotbar overflow above the
   bar's box, and a clip-path on the element itself clips children with it
   (that bug shipped in v0.8.93 and ate the chat log). The transparent
   12px border on the element keeps the content inset; the pseudo spans
   the border box (inset: -12px from the padding box) and carries frame,
   fill and corner clip at z-index -1, under the chat (z1) / layout (z2). -- */
#main-ui-bar {
    background: transparent !important;
    border: 12px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#main-ui-bar::before {
    content: '';
    position: absolute;
    inset: -12px;
    z-index: -1;
    background: var(--px-window-bg);
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 fill stretch;
    clip-path: var(--px-clip-window);
    pointer-events: none;
}
/* Chat log + input anchor to the bar's PADDING box (abs-positioned children
   measure from it), which sits 12px below the bar's outer top now that the
   frame border exists — so "bottom: 100%" left them overlapping the frame's
   top band. Lift both by the border width so they sit flush above the bar. */
#chat-log-container { bottom: calc(100% + 12px) !important; }
#chat-input-container { bottom: calc(100% + 12px) !important; }

/* -- HP / MP / EXP bars -> pill art fills over a dark stepped trough.
   The ui_bar_* art is a COMPLETE pill (outline+highlight+shadow baked in)
   worn by the fill element as border-image, so the caps stay crisp at any
   width. The trough clips to the same 3px stair as the art's caps. -- */
.ui-bar {
    background: #222034 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-bar);
}
/* border-image MUST be !important here: the `border` shorthand above is
   !important and shorthands reset border-image, so a plain border-image
   declaration loses to it and the art never renders (v0.8.93 bug — the
   bars showed empty). The background is the art's own centre colour,
   clipped to the same stepped caps, backstopping any slice hairlines at
   fractional UI scale. */
.ui-bar-fill {
    background: #ff9213 !important;
    border: 3px solid transparent !important;
    border-image: var(--px-bar-exp) 3 fill stretch !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: var(--px-clip-bar);
}
#hp-bar .ui-bar-fill { background: #cb1e1e !important; border-image: var(--px-bar-hp) 3 fill stretch !important; }
#mp-bar .ui-bar-fill { background: #1e5bcb !important; border-image: var(--px-bar-mp) 3 fill stretch !important; }
#exp-bar .ui-bar-fill { background: #ff9213 !important; border-image: var(--px-bar-exp) 3 fill stretch !important; }

/* -- All other progress bars -> same trough + gold (exp) pill fill -- */
.progress-bar,
.bestiary-progress-bar-container,
.medal-progress-bar-wrapper,
.achievement-progress,
.guild-challenge-progress,
.rescue-progress-bar-container {
    background: #222034 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-bar);
    overflow: hidden !important;
}
.progress-fill,
.bestiary-progress-bar,
.medal-progress-bar,
.achievement-progress-fill,
.guild-challenge-progress-bar,
.rescue-progress-bar {
    background: #ff9213 !important;
    border: 3px solid transparent !important;
    border-image: var(--px-bar-exp) 3 fill stretch !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: var(--px-clip-bar);
    height: 100%;
}

/* At exactly 0% the 3px left+right border-image still renders a ~6px sliver of
   bar texture. Collapse the fill completely so an untouched quest (or any bar)
   reads as truly empty. Matches both inline formats the JS emits. */
.progress-fill[style*="width: 0%"],
.progress-fill[style*="width:0%"],
.achievement-progress-fill[style*="width: 0%"],
.achievement-progress-fill[style*="width:0%"] {
    border: 0 !important;
    border-image: none !important;
    background: transparent !important;
}

/* -- Guild UI + Guild Buff UI -> pixel slot-frame insets, matching the rest of
   the in-game skin. Guild classes are guild-exclusive, so they're skinned by
   class (no .window prefix) which also reaches the buffs modal appended to
   <body>. Outer sections use the x2 slot frame; dense member/buff/challenge
   rows use the 1x frame so a list doesn't balloon. Buttons/tabs inside the
   social window are already handled by the generic .window button rules; the
   body-level guild modal + its buttons are skinned further below. -- */
.guild-header,
.guild-members-section,
.guild-buffs-section,
.guild-challenges {
    background: var(--px-slot-bg) !important;
    border: 8px solid transparent !important;
    border-image: var(--px-frame-slot) 8 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
    box-shadow: none !important;
}
.guild-member-entry,
.guild-buff-item,
.guild-buff-active,
.guild-challenge-entry {
    background: var(--px-slot-bg) !important;
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot-sm) !important;
    box-shadow: none !important;
}
/* State tints ride on top of the slot frame via a translucent inner glow so the
   pixel border stays intact (background is owned by the frame art above). */
.guild-buff-item.unlocked { box-shadow: inset 0 0 0 100px rgba(46, 204, 113, 0.14) !important; }
.guild-buff-item.available { box-shadow: inset 0 0 0 100px rgba(241, 196, 15, 0.12) !important; }
.guild-buff-item.available:hover { box-shadow: inset 0 0 0 100px rgba(241, 196, 15, 0.2) !important; }
.guild-buff-item.superseded { opacity: 0.5; }

/* Guild modals (create / leave / gift / mailbox / buffs) live at <body> level so
   the generic .window skin can't reach them. Give the container the window frame
   and its action buttons the pixel button frame, keeping the semantic
   confirm/danger tint as a translucent inner glow. */
.guild-modal {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window) !important;
    box-shadow: none !important;
}
.guild-modal-btn {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
    transition: filter 0.1s ease !important;
}
.guild-modal-btn:hover { filter: brightness(1.15) !important; }
.guild-modal-btn:active { border-image: var(--px-btn-down) 10 fill stretch !important; filter: none !important; }
.guild-modal-btn.confirm { box-shadow: inset 0 0 0 100px rgba(46, 204, 113, 0.22) !important; }
.guild-modal-btn.danger { box-shadow: inset 0 0 0 100px rgba(231, 76, 60, 0.22) !important; }

/* Party / guild / buddy / trade invite popups (also body-level, same reason as
   the guild modals above) -> same window frame + button frame. Each type's
   accent colour moves from a flat h3 background to a translucent inner glow on
   the title strip, so the pixel frame art keeps showing through underneath. */
.invite-prompt {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window) !important;
    box-shadow: none !important;
}
.invite-prompt h3 {
    background: var(--px-title-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-title) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot) !important;
}
.invite-accept-btn, .invite-decline-btn {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
    transition: filter 0.1s ease !important;
}
.invite-accept-btn:hover, .invite-decline-btn:hover { filter: brightness(1.15) !important; }
.invite-accept-btn:active, .invite-decline-btn:active { border-image: var(--px-btn-down) 10 fill stretch !important; filter: none !important; }
.invite-accept-btn { box-shadow: inset 0 0 0 100px rgba(46, 204, 113, 0.22) !important; }
.invite-decline-btn { box-shadow: inset 0 0 0 100px rgba(231, 76, 60, 0.16) !important; }
/* Per-type accent (was a flat h3 background colour) -> tinted glow on the title strip */
.party-invite-prompt h3 { box-shadow: inset 0 0 0 100px rgba(93, 173, 226, 0.3) !important; }
.trade-invite-prompt h3 { box-shadow: inset 0 0 0 100px rgba(241, 196, 15, 0.3) !important; }
.buddy-invite-prompt h3 { box-shadow: inset 0 0 0 100px rgba(233, 30, 99, 0.3) !important; }
.guild-invite-prompt h3 { box-shadow: inset 0 0 0 100px rgba(155, 89, 182, 0.3) !important; }

/* Player online/offline "login" toast -> small window frame, same family as
   the invite popups above. The green (online) / grey (offline) / gold (buddy)
   / purple (guild) accent moves from a flat border-color to a translucent
   inner glow, same trick as the invite prompts, so it stays visually "green
   and stuff" but reads as the same pixel UI as everything else. */
.player-notification-toast {
    background: var(--px-window-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-window-sm) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window-sm) !important;
    box-shadow: inset 0 0 0 100px rgba(46, 204, 113, 0.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.player-notification-toast.offline { box-shadow: inset 0 0 0 100px rgba(150, 150, 150, 0.1) !important; }
.player-notification-toast.buddy { box-shadow: inset 0 0 0 100px rgba(241, 196, 15, 0.16) !important; }
.player-notification-toast.guild { box-shadow: inset 0 0 0 100px rgba(155, 89, 182, 0.16) !important; }

/* -- Number pills -> flat pixel chips (square, palette border, no glow) -- */
.quest-count {
    background: #222034 !important;
    color: var(--exp-color) !important;
    border: 1px solid #4f4d65 !important;
    border-radius: 0 !important;
    padding: 1px 5px !important;
    box-shadow: none !important;
}

/* -- No coloured left-edge accent strips (Ben dislikes them; achievements
   are the one sanctioned exception). The strip becomes the card's normal
   border colour. -- */
.quest-item,
.quest-item.available,
.quest-item.active,
.quest-item.completed {
    border-left: 1px solid #3a374f !important;
    border-radius: 0 !important;
}
.quest-helper-item {
    border-left: 1px solid #3a374f !important;
    border-radius: 0 !important;
}
/* Completed quests keep their green edge under the pixel skin — the flat
   override above would erase it (this was why the left border never showed) */
.quest-helper-item.complete {
    border-left: 2px solid var(--success-color) !important;
}
.daily-challenge-card,
.daily-challenge-card.daily-tier-bronze,
.daily-challenge-card.daily-tier-silver,
.daily-challenge-card.daily-tier-gold,
.daily-challenge-card.daily-tier-diamond {
    border-left: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
}

/* -- Stat window (S) bars: tint by the fill's role class (that window has
   no #hp-bar/#mp-bar ids, so without these it fell to the gold default) -- */
.ui-bar-fill.ui-bar-hp { background: #cb1e1e !important; border-image: var(--px-bar-hp) 3 fill stretch !important; }
.ui-bar-fill.ui-bar-mp { background: #1e5bcb !important; border-image: var(--px-bar-mp) 3 fill stretch !important; }
.ui-bar-fill.ui-bar-exp { background: #ff9213 !important; border-image: var(--px-bar-exp) 3 fill stretch !important; }

/* -- Crafting journal (J) level bar: blue (MP) pill to keep its identity -- */
.cj-exp-bar-bg {
    background: #222034 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-bar);
}
.cj-exp-bar-fill {
    background: #1e5bcb !important;
    border: 3px solid transparent !important;
    border-image: var(--px-bar-mp) 3 fill stretch !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: var(--px-clip-bar);
}

/* -- Bounty board (N) daily challenge bars: gold pill; bumped to 8px so the
   3px caps aren't squashed -- */
.daily-challenge-progress-bar {
    height: 8px !important;
    background: #222034 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-bar);
    overflow: hidden !important;
}
.daily-challenge-progress-fill {
    background: #ff9213 !important;
    border: 3px solid transparent !important;
    border-image: var(--px-bar-exp) 3 fill stretch !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: var(--px-clip-bar);
}

/* -- Overhead HP bars (player + monsters) -> SQUARE pixel bars (per Ben:
   no rounded pill caps up here). The fill is a plain gradient built from
   the bar art's own palette rows (highlight / body / shadow), so it
   matches the HUD art without border-image caps — which also fixes the
   "smidge of red at 0 HP" bug: the pill fill's 3px border caps still
   painted ~6px even at width:0, a background gradient paints nothing. -- */
#player-hp-bar-container {
    height: 8px !important;
    background: #222034 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: none;
}
#player-hp-bar-fill {
    background: linear-gradient(180deg, #f74949 0 2px, #cb1e1e 2px calc(100% - 2px), #9a0c0c calc(100% - 2px) 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: none;
}
.monster-hp-bar-container {
    height: 7px !important;
    background: #222034 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: none;
}
.monster-hp-bar-fill {
    background: linear-gradient(180deg, #f74949 0 2px, #cb1e1e 2px calc(100% - 2px), #9a0c0c calc(100% - 2px) 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: none;
}

/* -- Party overlay member bars -> pixel pills (red HP / gold EXP). The
   .low pulse keeps working — it animates opacity, which border-image
   respects. -- */
.party-overlay-member .member-bar {
    height: 6px !important; /* was 8px — smaller/subtler HUD strip */
    background: #222034 !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-bar);
}
.party-overlay-member .member-bar-fill {
    /* 2px border (not 3px): the bar is a slim 6px tall and box-sizing is
       border-box, so a 3px top+bottom border left 0px for the border-image's
       centre slice — the slice that carries the solid HP/EXP colour — and the
       fill rendered invisible. 2px leaves a 2px centre band so the bar shows. */
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: var(--px-clip-bar);
}
.party-overlay-member .hp-bar .member-bar-fill,
.party-overlay-member .hp-bar.low .member-bar-fill {
    background: #cb1e1e !important;
    border-image: var(--px-bar-hp) 3 fill stretch !important;
}
.party-overlay-member .exp-bar .member-bar-fill {
    background: #ff9213 !important;
    border-image: var(--px-bar-exp) 3 fill stretch !important;
}

/* -- World map: lift the hovered node's stacking context so its tooltip
   renders above neighbouring nodes instead of behind them -- */
.world-map-node:hover { z-index: 60 !important; }

/* -- Weekly reward track (bounty board): pixel pill bar + square milestone
   chips (the round numbered circles clashed with the pixel skin) -- */
.weekly-track-container {
    border-radius: 0 !important;
}
/* Trough on a ::before: a clip-path on the bar itself would clip the
   milestone chips that ride on top of it (overflow: visible by design). */
.weekly-track-bar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    isolation: isolate;
}
.weekly-track-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #222034;
    clip-path: var(--px-clip-bar);
    pointer-events: none;
}
.weekly-track-fill {
    background: #1e5bcb !important;
    border: 3px solid transparent !important;
    border-image: var(--px-bar-mp) 3 fill stretch !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: var(--px-clip-bar);
}
.weekly-track-marker {
    border-radius: 0 !important;
    background: #222034 !important;
    border: 1px solid #4f4d65 !important;
    color: var(--theme-text-dim) !important;
    box-shadow: none !important;
}
.weekly-track-marker.unlocked {
    border-color: #4986f7 !important;
    color: #4986f7 !important;
}
.weekly-track-marker.claimed {
    border-color: var(--success-color) !important;
    color: var(--success-color) !important;
}
.weekly-track-tier { border-radius: 0 !important; }

/* -- Skill hotbar floating panel: small window frame on a ::before (drag
   ghosts/tooltips may overflow the box; never clip a container whose
   children can overflow) -- */
#hotbar-stack {
    background: transparent !important;
    border: 12px solid transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    isolation: isolate;
}
#hotbar-stack::before {
    content: '';
    position: absolute;
    inset: -12px;
    z-index: -1;
    background: var(--px-window-bg);
    /* Standard x2 window frame (border 12) — same pixel density as .window */
    border: 12px solid transparent;
    border-image: var(--px-frame-window) 12 fill stretch;
    clip-path: var(--px-clip-window);
    pointer-events: none;
}

/* -- Combat identity bar (class resource: Mana Surge, Dark Surge, …) ->
   x2 slot frame, same as the hotbar slots right below it. NO fill on the
   border-image: the interior is the trough + class-coloured fill, and the
   at-max glow is inset (an outer glow would be cut off by the clip-path). -- */
#combat-identity-column {
    /* Clears the hotbar panel: its 2x6 slot rows + x2 frame reach ~500px in
       from the right edge, and the identity bar floats at the same height as
       the frame's bottom band (measured 58px h-overlap at right:36). */
    right: 104px;
}
#combat-identity-bar {
    background: #222034 !important;
    border: 8px solid transparent !important;
    border-image: var(--px-frame-slot) 8 stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot);
    box-shadow: none !important;
}
#combat-identity-fill { border-radius: 0 !important; }
#combat-identity-bar.at-max {
    box-shadow: inset 0 0 8px var(--ci-color, #fff), inset 0 0 3px var(--ci-color, #fff) !important;
}

/* -- Death prompt -> standard window frame; the death-red identity moves
   into the title text + inner accents. Entrance is fade+slide only (a
   scale transform distorts border-image frames mid-animation). -- */
@keyframes deathPromptAppearPx {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
.death-prompt {
    background: var(--px-window-bg) !important;
    border: 12px solid transparent !important;
    border-image: var(--px-frame-window) 12 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-window);
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: deathPromptAppearPx 0.35s ease-out forwards !important;
}
.death-title {
    background: var(--px-title-bg) !important;
    border: 6px solid transparent !important;
    border-image: var(--px-frame-title) 6 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot);
    color: #e74c3c !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    padding: 2px 8px !important;
}
.death-respawn-btn {
    background: var(--px-btn-bg) !important;
    border: 10px solid transparent !important;
    border-image: var(--px-btn-up) 10 fill stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-btn) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: var(--theme-text-bright) !important;
    transition: filter 0.1s ease !important;
    padding: 6px 0 !important;
}
.death-respawn-btn:hover { filter: brightness(1.15); }
.death-respawn-btn:active { border-image: var(--px-btn-down) 10 fill stretch !important; filter: none; }

/* -- Item tooltip header: framed icon (slot frame, dense "-sm" tier) next
   to the item name. Icon art is the 8px dropIcons sheet at 4x. -- */
.tooltip-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.tooltip-item-header h4 {
    margin: 0 !important;
}
.tooltip-item-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--px-slot-bg);
    border: 4px solid transparent;
    border-image: var(--px-frame-slot-sm) 4 stretch;
    border-radius: 0;
    clip-path: var(--px-clip-slot-sm);
    overflow: hidden;
}

/* -- Bestiary monster list cards -> slot frame, brightness hover, inset
   gold ring when selected (replaces the flat blue fill) -- */
.bestiary-monster {
    background: var(--px-slot-bg) !important;
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 stretch !important;
    border-radius: 0 !important;
    clip-path: var(--px-clip-slot-sm) !important;
    box-shadow: none !important;
    transition: filter 0.15s ease !important;
}
.bestiary-monster.clickable:hover {
    background: var(--px-slot-bg) !important;
    box-shadow: none !important;
    filter: brightness(1.25);
}
.bestiary-monster.selected {
    background: var(--px-slot-bg) !important;
    border: 4px solid transparent !important;
    border-image: var(--px-frame-slot-sm) 4 stretch !important;
    box-shadow: inset 0 0 0 2px var(--exp-color) !important;
    filter: brightness(1.1);
}
.bestiary-monster.undiscovered {
    filter: grayscale(1) !important;
}
.bestiary-detail-panel { border-radius: 0 !important; }

/* -- Achievement window category tabs: one row. The small frame + compact
   padding above shrinks them; nowrap stops 'Tasks' wrapping to a second
   row, and min-width lets a tab shrink instead of overflowing. -- */
.ach-cat-tabs { flex-wrap: nowrap !important; }
.ach-cat-tab {
    min-width: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 1;
}

/* (World map nodes keep their original dot styling — the 9-slice version
   was tried in v0.8.93 and reverted: at 12-20px the frame reads as noise
   and the coloured bg hairlines through the slice gaps.) */

/* Hotkey buttons: kill the legacy 6px radius so the background doesn't
   round away from the frame under the staircase clip. */
.hotkey:not(.settings-btn) { border-radius: 0 !important; }

/* ============================================================
   ELEMENTAL SYSTEM (data/element-data.js)
   Chips in the bestiary, colored borders on elemental skill icons
   (hotbar + skill window), and the Weak!/Resist! combat labels.
   ============================================================ */

/* Colored element chip: --el-color is set inline from elementData */
.element-chip {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 2px;
    border: 1px solid var(--el-color, #999);
    color: var(--el-color, #999);
    background: rgba(0, 0, 0, 0.28);
    font-size: 9px;
    line-height: 1.4;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Monster's own element: chip pinned to the top-left of the sprite preview */
.monster-type-chip {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;
    margin: 0;
}

/* Bestiary detail panel: weak / resist rows */
.monster-elements {
    margin-top: 6px;
    padding: 5px 6px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--ui-border);
}
.monster-elements .element-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 2px 0;
    font-size: 9px;
}
.monster-elements .element-row-label {
    color: var(--theme-text-dim);
    margin-right: 4px;
    min-width: 52px;
}
.monster-elements .element-row-note {
    color: var(--theme-text-dim);
    margin-left: 4px;
    font-size: 8px;
}

/* Bestiary list rows: compact weak/resist line */
.bestiary-element-line {
    margin-top: 2px;
}
.bestiary-element-line .element-inline-label {
    color: var(--theme-text-dim);
    font-size: 9px;
}

/* Weak! / Resist! combat feedback (color set inline per element) */
.damage-number.element-label {
    font-size: 12px;
    font-style: italic;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Elemental skill borders: hotbar slots. The pixel skin renders the slot
   frame via border-image (with !important), so a border-color can never
   show — and the 3x-scaled icon paints over the slot interior anyway.
   Use an ::after overlay ring instead: it's a later sibling of the icon
   with its own z-index, so it renders ON TOP of the icon art. */
.skill-slot[class*="element-"]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}
.skill-slot.element-fire::after      { box-shadow: inset 0 0 0 2px #ff6600, inset 0 0 6px rgba(255, 102, 0, 0.45); }
.skill-slot.element-frost::after     { box-shadow: inset 0 0 0 2px #4fc3f7, inset 0 0 6px rgba(79, 195, 247, 0.45); }
.skill-slot.element-lightning::after { box-shadow: inset 0 0 0 2px #ffee00, inset 0 0 6px rgba(255, 238, 0, 0.4); }
.skill-slot.element-poison::after    { box-shadow: inset 0 0 0 2px #33cc33, inset 0 0 6px rgba(51, 204, 51, 0.45); }
.skill-slot.element-blood::after     { box-shadow: inset 0 0 0 2px #e53935, inset 0 0 6px rgba(229, 57, 53, 0.45); }
.skill-slot.element-holy::after      { box-shadow: inset 0 0 0 2px #ffd166, inset 0 0 6px rgba(255, 209, 102, 0.45); }
.skill-slot.element-dark::after      { box-shadow: inset 0 0 0 2px #9b59b6, inset 0 0 6px rgba(155, 89, 182, 0.45); }

/* Elemental skill borders: skill window icons */
.skill-node-icon.element-fire,
.skill-node-icon.element-frost,
.skill-node-icon.element-lightning,
.skill-node-icon.element-poison,
.skill-node-icon.element-blood,
.skill-node-icon.element-holy,
.skill-node-icon.element-dark {
    border-width: 2px;
    border-style: solid;
    background: rgba(0, 0, 0, 0.2);
}
.skill-node-icon.element-fire      { border-color: #ff6600; box-shadow: inset 0 0 4px rgba(255, 102, 0, 0.4); }
.skill-node-icon.element-frost     { border-color: #4fc3f7; box-shadow: inset 0 0 4px rgba(79, 195, 247, 0.4); }
.skill-node-icon.element-lightning { border-color: #ffee00; box-shadow: inset 0 0 4px rgba(255, 238, 0, 0.35); }
.skill-node-icon.element-poison    { border-color: #33cc33; box-shadow: inset 0 0 4px rgba(51, 204, 51, 0.4); }
.skill-node-icon.element-blood     { border-color: #e53935; box-shadow: inset 0 0 4px rgba(229, 57, 53, 0.4); }
.skill-node-icon.element-holy      { border-color: #ffd166; box-shadow: inset 0 0 4px rgba(255, 209, 102, 0.4); }
.skill-node-icon.element-dark      { border-color: #9b59b6; box-shadow: inset 0 0 4px rgba(155, 89, 182, 0.4); }

/* ============================================================
   GACHAPON COSMETICS
   Nametag signet styling + animated gachapon medal tiers
   (inferno / galaxy / tide / aurora / jackpot).
   ============================================================ */

/* Prism Signet: nametag cycles through the prismatic hue animation */
.nametag-prismatic {
    animation: prismaticText 2s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.55);
    text-shadow: 0 0 6px rgba(240, 234, 255, 0.6), 1px 1px 2px #000;
}

/* ── Medal list entries (Medals tab) ── */
.medal-entry.inferno {
    border-color: #ff6a00;
    background: linear-gradient(90deg, rgba(255, 60, 0, 0.2) 0%, rgba(255, 160, 0, 0.12) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.inferno .medal-name { color: #ffab66; text-shadow: 0 0 6px rgba(255, 100, 0, 0.6); }
.medal-entry.galaxy {
    border-color: #7b5cff;
    background: linear-gradient(90deg, rgba(60, 30, 120, 0.3) 0%, rgba(40, 60, 160, 0.15) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.galaxy .medal-name { color: #b9a5ff; text-shadow: 0 0 6px rgba(130, 90, 255, 0.6); }
.medal-entry.tide {
    border-color: #2fb9d8;
    background: linear-gradient(90deg, rgba(20, 120, 180, 0.25) 0%, rgba(40, 200, 220, 0.12) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.tide .medal-name { color: #7fdcf0; text-shadow: 0 0 6px rgba(50, 180, 220, 0.6); }
.medal-entry.aurora {
    border-color: #46e0a0;
    background: linear-gradient(90deg, rgba(40, 200, 140, 0.2) 0%, rgba(90, 120, 230, 0.12) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.aurora .medal-name { color: #8af0c8; text-shadow: 0 0 6px rgba(70, 224, 160, 0.6); }
.medal-entry.jackpot {
    border-color: #ffd700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.22) 0%, rgba(20, 20, 20, 0.3) 50%, rgba(255, 215, 0, 0.12) 100%);
    animation: jackpotFlash 1.2s ease-in-out infinite;
}
.medal-entry.jackpot .medal-name { color: #ffe066; text-shadow: 0 0 6px rgba(255, 215, 0, 0.7); }

/* ── Nameplate medal displays (shown under player names) ── */
.monster-killer-medal-display.inferno {
    background: linear-gradient(135deg, #5c0a00, #b32700, #ff6a00, #ffc800, #ff6a00, #b32700);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 3s ease infinite;
    border: 1px solid #ffab4d;
    box-shadow: 0 0 8px rgba(255, 106, 0, 0.6), inset 0 0 4px rgba(255, 220, 150, 0.3);
}
.monster-killer-medal-display.galaxy {
    background: linear-gradient(135deg, #0b0524, #2a1660, #4a2ba0, #1a3a8a, #0b0524);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 4s ease infinite;
    border: 1px solid #9a7dff;
    box-shadow: 0 0 8px rgba(120, 90, 255, 0.6), inset 0 0 4px rgba(200, 180, 255, 0.3);
}
.monster-killer-medal-display.tide {
    background: linear-gradient(135deg, #023a56, #0a6a8a, #17a8c8, #5fe0e8, #17a8c8, #0a6a8a);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 3.5s ease infinite;
    border: 1px solid #7fdcf0;
    box-shadow: 0 0 8px rgba(40, 180, 220, 0.6), inset 0 0 4px rgba(180, 240, 250, 0.3);
}
.monster-killer-medal-display.aurora {
    background: linear-gradient(135deg, #0a2a20, #14805c, #46e0a0, #4a78e6, #8a5ae0, #14805c);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 4.5s ease infinite;
    border: 1px solid #8af0c8;
    box-shadow: 0 0 8px rgba(70, 224, 160, 0.55), inset 0 0 4px rgba(190, 250, 225, 0.3);
}
.monster-killer-medal-display.jackpot {
    background: linear-gradient(135deg, #1a1200, #8a6a00, #ffd700, #fff2a0, #ffd700, #8a6a00);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 2s ease infinite, jackpotFlash 1.2s ease-in-out infinite;
    border: 1px solid #ffe066;
    color: #201500 !important;
    text-shadow: 0 0 3px rgba(255, 255, 220, 0.8) !important;
}
@keyframes jackpotFlash {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.5); }
    50%      { box-shadow: 0 0 14px rgba(255, 215, 0, 0.95), 0 0 24px rgba(255, 180, 0, 0.5); }
}

/* ============================================================
   COSMETIC EFFECTS — particles, auras, animated icons
   (spawned by updateCosmeticEffects in visual-effects.js; synced to
   other players because cosmeticEquipped drives them on every client)
   ============================================================ */

/* ── Auras: soft glow blob behind the character sprite ──
   z-9 (NOT -1): the player lives inside the transformed #world-content, so a
   negative z-index paints beneath the entire world content, map background
   included — the glow was invisible. z-9 slots just under the sprite
   container (z-10). */
.cosmetic-aura {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9;
    background: radial-gradient(circle, var(--aura-color, #ffffff) 0%, transparent 62%);
    opacity: 0.45;
    filter: blur(4px);
}
.cosmetic-aura-pulse {
    animation: cosmeticAuraPulse 2.2s ease-in-out infinite;
}
.cosmetic-aura-prismatic {
    background: radial-gradient(circle, #ff7b7b 0%, transparent 62%);
    animation: cosmeticAuraHue 6s linear infinite;
    opacity: 0.4;
}
@keyframes cosmeticAuraPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.94); }
    50%      { opacity: 0.6; transform: scale(1.08); }
}
@keyframes cosmeticAuraHue {
    from { filter: blur(4px) hue-rotate(0deg); }
    to   { filter: blur(4px) hue-rotate(360deg); }
}

/* ── Cosmetic tag: shown next to the item type in tooltips ── */
.tooltip-cosmetic-tag {
    display: inline-block;
    padding: 0 4px;
    margin-left: 4px;
    border: 1px solid var(--cosmetic-color, #2ecc71);
    color: var(--cosmetic-color, #2ecc71);
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    border-radius: 2px;
    vertical-align: middle;
}

/* ── Silhouette charms: blink-style body glow via canvas filters ──
   The drop-shadow hugs the sprite's alpha, so the glow traces the exact
   body outline (same technique as the Blink teleport ghost). 'shadow'
   darkens the sprite itself into a shadowy figure (Umbra Charm). */
.cosmetic-sil-glow canvas {
    filter: drop-shadow(0 0 3px var(--sil-color, #fff))
            drop-shadow(0 0 7px var(--sil-color, #fff));
}
/* Pulsing variant: the outline glow breathes (Umbra, Glowheart, Frostheart) */
.cosmetic-sil-glow.cosmetic-sil-pulse canvas {
    animation: cosmeticSilPulse 2.2s ease-in-out infinite;
}
/* Prismatic variant: the outline glow drifts through every color (Prisma Charm) */
.cosmetic-sil-prismatic canvas {
    animation: cosmeticSilPrism 6s linear infinite;
}
@keyframes cosmeticSilPrism {
    0%   { filter: drop-shadow(0 0 3px #ff6b6b) drop-shadow(0 0 7px #ff6b6b); }
    17%  { filter: drop-shadow(0 0 3px #ffd24a) drop-shadow(0 0 7px #ffd24a); }
    33%  { filter: drop-shadow(0 0 3px #5ad06a) drop-shadow(0 0 7px #5ad06a); }
    50%  { filter: drop-shadow(0 0 3px #4aa8ff) drop-shadow(0 0 7px #4aa8ff); }
    67%  { filter: drop-shadow(0 0 3px #c86aff) drop-shadow(0 0 7px #c86aff); }
    83%  { filter: drop-shadow(0 0 3px #ff8ac8) drop-shadow(0 0 7px #ff8ac8); }
    100% { filter: drop-shadow(0 0 3px #ff6b6b) drop-shadow(0 0 7px #ff6b6b); }
}
@keyframes cosmeticSilPulse {
    0%, 100% {
        filter: drop-shadow(0 0 2px var(--sil-color, #fff))
                drop-shadow(0 0 4px var(--sil-color, #fff));
    }
    50% {
        filter: drop-shadow(0 0 4px var(--sil-color, #fff))
                drop-shadow(0 0 11px var(--sil-color, #fff));
    }
}
/* Umbra: the SPRITE stays untouched — drop-shadow paints behind the element,
   so the dark silhouette copy renders behind the player instead of
   darkening them. Offset hard shadow + violet haze reads as living shadow. */
.cosmetic-sil-shadow canvas {
    filter: drop-shadow(4px 4px 0 rgba(22, 8, 40, 0.8))
            drop-shadow(0 0 5px rgba(90, 40, 160, 0.7))
            drop-shadow(0 0 11px rgba(60, 20, 110, 0.45));
}

/* ── Particles ──
   Cosmetic particles moved to the world-space fx-cosmetic canvas
   (visual-effects.js tickCosmeticFx) so they fall through the world and
   land like snow instead of following the player. No DOM styles needed. */

/* ── Pulse Signet: nametag heartbeat ── */
.nametag-pulse {
    animation: nametagPulse 1.6s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
@keyframes nametagPulse {
    0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, 0.3), 1px 1px 2px #000; }
    50%      { text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 18px rgba(150, 200, 255, 0.6), 1px 1px 2px #000; }
}

/* ── Color-shifting icons (Cosmetic Dust) ── */
.icon-hue-cycle {
    animation: iconHueCycle 5s linear infinite;
}
@keyframes iconHueCycle {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* ── New gachapon medal tiers: void / bloodmoon / comet ── */
.medal-entry.void {
    border-color: #7a3fd0;
    background: linear-gradient(90deg, rgba(40, 10, 70, 0.35) 0%, rgba(90, 40, 160, 0.15) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.void .medal-name { color: #b489ff; text-shadow: 0 0 6px rgba(122, 63, 208, 0.65); }
.medal-entry.bloodmoon {
    border-color: #c01530;
    background: linear-gradient(90deg, rgba(120, 5, 20, 0.35) 0%, rgba(200, 30, 50, 0.15) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.bloodmoon .medal-name { color: #ff6b7a; text-shadow: 0 0 6px rgba(200, 20, 40, 0.65); }
.medal-entry.comet {
    border-color: #7fd8ff;
    background: linear-gradient(90deg, rgba(30, 90, 140, 0.3) 0%, rgba(150, 230, 255, 0.12) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.comet .medal-name { color: #b8ecff; text-shadow: 0 0 6px rgba(120, 210, 255, 0.65); }

.monster-killer-medal-display.void {
    background: linear-gradient(135deg, #0c0318, #2a0a50, #5a20a0, #2a0a50, #0c0318);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 4s ease infinite;
    border: 1px solid #9a60e8;
    box-shadow: 0 0 8px rgba(110, 40, 200, 0.6), inset 0 0 4px rgba(180, 140, 255, 0.3);
}
.monster-killer-medal-display.bloodmoon {
    background: linear-gradient(135deg, #2a0208, #700515, #c01530, #700515, #2a0208);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 3s ease infinite, bloodmoonThrob 2.4s ease-in-out infinite;
    border: 1px solid #e8506a;
}
@keyframes bloodmoonThrob {
    0%, 100% { box-shadow: 0 0 5px rgba(190, 20, 45, 0.45); }
    50%      { box-shadow: 0 0 14px rgba(220, 30, 55, 0.9), 0 0 24px rgba(160, 10, 30, 0.5); }
}
.monster-killer-medal-display.comet {
    background: linear-gradient(135deg, #041a30, #0a4a78, #4aa8e0, #b8ecff, #4aa8e0, #0a4a78);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 2.6s ease infinite;
    border: 1px solid #9fdcff;
    box-shadow: 0 0 8px rgba(90, 190, 255, 0.6), inset 0 0 4px rgba(210, 245, 255, 0.35);
}

/* ── Round 4 gachapon medal tiers: storm / solarflare / wildwood / petal / abyss ── */
.medal-entry.storm {
    border-color: #ffe95a;
    background: linear-gradient(90deg, rgba(120, 100, 0, 0.3) 0%, rgba(255, 230, 60, 0.12) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.storm .medal-name { color: #ffe95a; text-shadow: 0 0 6px rgba(255, 230, 60, 0.65); }
.medal-entry.solarflare {
    border-color: #ffaa00;
    background: linear-gradient(90deg, rgba(180, 90, 0, 0.3) 0%, rgba(255, 190, 40, 0.14) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.solarflare .medal-name { color: #ffcf6a; text-shadow: 0 0 6px rgba(255, 170, 0, 0.65); }
.medal-entry.wildwood {
    border-color: #2eaa2e;
    background: linear-gradient(90deg, rgba(20, 90, 20, 0.32) 0%, rgba(60, 200, 60, 0.13) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.wildwood .medal-name { color: #8ae88a; text-shadow: 0 0 6px rgba(50, 200, 50, 0.6); }
.medal-entry.petal {
    border-color: #ff9fd0;
    background: linear-gradient(90deg, rgba(160, 50, 100, 0.28) 0%, rgba(255, 160, 210, 0.14) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.petal .medal-name { color: #ffc0dd; text-shadow: 0 0 6px rgba(255, 130, 190, 0.6); }
.medal-entry.abyss {
    border-color: #0a8a72;
    background: linear-gradient(90deg, rgba(2, 40, 40, 0.4) 0%, rgba(20, 140, 120, 0.15) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.abyss .medal-name { color: #5ae8c8; text-shadow: 0 0 6px rgba(40, 220, 180, 0.6); }

.monster-killer-medal-display.storm {
    background: linear-gradient(135deg, #241e00, #7a6a00, #e8cc10, #fff890, #e8cc10, #7a6a00);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 2.4s ease infinite, stormMedalCrackle 3.2s steps(1) infinite;
    border: 1px solid #ffe95a;
}
@keyframes stormMedalCrackle {
    0%, 88%, 93%, 100% { box-shadow: 0 0 6px rgba(255, 230, 60, 0.45); }
    90%, 95%           { box-shadow: 0 0 16px rgba(255, 240, 120, 0.95), 0 0 26px rgba(255, 230, 60, 0.55); }
}
.monster-killer-medal-display.solarflare {
    background: linear-gradient(135deg, #401800, #a05000, #ff9a20, #ffe090, #ff9a20, #a05000);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 3.4s ease infinite;
    border: 1px solid #ffcf6a;
    box-shadow: 0 0 8px rgba(255, 160, 20, 0.6), inset 0 0 4px rgba(255, 230, 170, 0.35);
}
.monster-killer-medal-display.wildwood {
    background: linear-gradient(135deg, #06200a, #14602a, #2eaa2e, #9af09a, #2eaa2e, #14602a);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 4s ease infinite;
    border: 1px solid #8ae88a;
    box-shadow: 0 0 8px rgba(50, 200, 50, 0.55), inset 0 0 4px rgba(180, 250, 180, 0.3);
}
.monster-killer-medal-display.petal {
    background: linear-gradient(135deg, #300a1e, #90305e, #ff7ab8, #ffd0e6, #ff7ab8, #90305e);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 3.8s ease infinite;
    border: 1px solid #ffc0dd;
    box-shadow: 0 0 8px rgba(255, 130, 190, 0.55), inset 0 0 4px rgba(255, 220, 238, 0.35);
}
.monster-killer-medal-display.abyss {
    background: linear-gradient(135deg, #01100f, #043a34, #0a8a72, #5ae8c8, #0a8a72, #043a34);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 4.4s ease infinite;
    border: 1px solid #3ac8a8;
    box-shadow: 0 0 8px rgba(30, 190, 155, 0.55), inset 0 0 4px rgba(150, 245, 220, 0.3);
}

/* ── Glints: brief star twinkles pinned to the wearer's sprite
   (spawned by updateCosmeticEffects for cosmeticEffect.glints items) ── */
.cosmetic-glint {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--glint-color, #ffe9a0);
    box-shadow: 0 0 4px var(--glint-color, #ffe9a0);
    pointer-events: none;
    /* Above the sprite container (z-10), below overhead UI (z-13) */
    z-index: 12;
    animation: cosmeticGlint 0.7s ease-out forwards;
}
@keyframes cosmeticGlint {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    35%  { transform: scale(1.5) rotate(45deg); opacity: 1; }
    100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* ── Chat bubble skins (dedicated 'bubble' cosmetic slot) ──
   applyChatBubbleStyle (player.js) sets these vars from the speaker's
   equipped bubble cosmetic; defaults reproduce the classic white bubble. */
#player-chat-bubble, .ghost-chat-bubble {
    background-color: var(--bubble-bg, rgba(255, 255, 255, 0.9));
    color: var(--bubble-color, #1c2833);
    border: 1px solid var(--bubble-border, transparent);
    box-shadow: 0 0 8px var(--bubble-glow, transparent);
}
#player-chat-bubble::after, .ghost-chat-bubble::after {
    border-top-color: var(--bubble-bg, rgba(255, 255, 255, 0.9));
}
.bubble-prismatic {
    --bubble-bg: #ffdcea;
    --bubble-color: #7a2060;
    --bubble-border: #ff9fd0;
    animation: iconHueCycle 6s linear infinite;
}

/* ── Damage number skins (Damage Skin Capsules, chosen in Settings) ──
   Two-layer system so a skin never hides what TYPE of damage you dealt:
   - .dmg-skin-<id> goes on ALL your outgoing numbers and changes only the
     FONT, so the skin's identity persists on bleeds, rune procs, spellblade
     echoes, and other typed damage while their semantic colors stay intact.
   - .dmg-skin-tint is added only on plain numeric hits and enables the
     skin's color/glow; the extra `.critical` compound gives crits a hotter
     variant (larger crit font-size and float animation are inherited). */

/* Gilded — opulent serif; plain hits molten gold, crits near-white hot */
.damage-number.dmg-skin-gilded {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.5px;
}
.damage-number.dmg-skin-gilded.dmg-skin-tint {
    color: #ffcf3a;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 6px rgba(255, 200, 0, 0.7);
}
.damage-number.dmg-skin-gilded.dmg-skin-tint.critical {
    color: #fff2a0;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 8px #ffcf3a, 0 0 18px rgba(255, 180, 0, 0.7);
}

/* Void — eldritch monospace; plain hits violet, crits flare magenta */
.damage-number.dmg-skin-void {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}
.damage-number.dmg-skin-void.dmg-skin-tint {
    color: #b489ff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 7px rgba(122, 63, 208, 0.8);
}
.damage-number.dmg-skin-void.dmg-skin-tint.critical {
    color: #e0a8ff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 9px #a24fff, 0 0 20px rgba(200, 60, 255, 0.7);
}

/* Bloodmoon — brutal condensed; plain hits crimson, crits blaze red */
.damage-number.dmg-skin-bloodmoon {
    font-family: Impact, 'Arial Black', sans-serif;
    letter-spacing: 1px;
}
.damage-number.dmg-skin-bloodmoon.dmg-skin-tint {
    color: #ff6a78;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 7px rgba(200, 20, 45, 0.8);
}
.damage-number.dmg-skin-bloodmoon.dmg-skin-tint.critical {
    color: #ff3a4a;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 9px #ff1a2a, 0 0 20px rgba(220, 0, 30, 0.75);
}

/* Prismatic — the fancy display pixel font; hue-cycling, faster on crits */
.damage-number.dmg-skin-prismatic {
    font-family: 'Ari9500Display', 'Ari9500', sans-serif;
}
.damage-number.dmg-skin-prismatic.dmg-skin-tint {
    color: #f0eaff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 7px rgba(240, 234, 255, 0.7);
    animation: damageFloat 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
               dmgSkinPrism 1.4s linear infinite;
}
.damage-number.dmg-skin-prismatic.dmg-skin-tint.critical {
    animation: critFloat 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
               dmgSkinPrism 0.8s linear infinite;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                 0 0 10px currentColor, 0 0 18px rgba(255, 255, 255, 0.5);
}
@keyframes dmgSkinPrism {
    0%   { color: #ff6b6b; }
    17%  { color: #ffd24a; }
    33%  { color: #5ad06a; }
    50%  { color: #4aa8ff; }
    67%  { color: #c86aff; }
    83%  { color: #ff8ac8; }
    100% { color: #ff6b6b; }
}

/* ── Round 8 gachapon medal tiers: radiant / gloom / tempest / prism ── */
.medal-entry.radiant {
    border-color: #fff2c8;
    background: linear-gradient(90deg, rgba(200, 180, 120, 0.3) 0%, rgba(255, 245, 210, 0.15) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.radiant .medal-name { color: #fff2c8; text-shadow: 0 0 6px rgba(255, 240, 190, 0.7); }
.medal-entry.gloom {
    border-color: #6a6a80;
    background: linear-gradient(90deg, rgba(35, 35, 50, 0.45) 0%, rgba(80, 80, 110, 0.18) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.gloom .medal-name { color: #a8a8c8; text-shadow: 0 0 6px rgba(110, 110, 150, 0.7); }
.medal-entry.tempest {
    border-color: #4aa8ff;
    background: linear-gradient(90deg, rgba(10, 60, 120, 0.35) 0%, rgba(70, 170, 255, 0.14) 50%, var(--theme-gradient-end) 100%);
}
.medal-entry.tempest .medal-name { color: #8ac8ff; text-shadow: 0 0 6px rgba(70, 170, 255, 0.65); }
.medal-entry.prism {
    border-color: var(--prismatic-color);
    background: linear-gradient(90deg, rgba(240, 234, 255, 0.18) 0%, rgba(200, 160, 255, 0.1) 50%, var(--theme-gradient-end) 100%);
    animation: prismaticBorder 2s ease-in-out infinite;
}
.medal-entry.prism .medal-name { color: var(--prismatic-color); animation: prismaticText 2s ease-in-out infinite; }

.monster-killer-medal-display.radiant {
    background: linear-gradient(135deg, #3a3020, #a89050, #fff2c8, #ffffff, #fff2c8, #a89050);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 3.2s ease infinite;
    border: 1px solid #fff2c8;
    color: #201800 !important;
    text-shadow: 0 0 3px rgba(255, 255, 240, 0.8) !important;
}
.monster-killer-medal-display.gloom {
    background: linear-gradient(135deg, #101018, #33334a, #6a6a80, #33334a, #101018);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 4.8s ease infinite;
    border: 1px solid #7a7a95;
    box-shadow: 0 0 8px rgba(90, 90, 130, 0.55), inset 0 0 4px rgba(170, 170, 210, 0.25);
}
.monster-killer-medal-display.tempest {
    background: linear-gradient(135deg, #041a34, #0a4a90, #4aa8ff, #b8dcff, #4aa8ff, #0a4a90);
    background-size: 300% 300%;
    animation: vanquisherNameplateBg 2.2s ease infinite, stormMedalCrackle 3.2s steps(1) infinite;
    border: 1px solid #8ac8ff;
}
.monster-killer-medal-display.prism {
    background: linear-gradient(135deg, #ff6b6b, #ffd24a, #5ad06a, #4aa8ff, #c86aff, #ff8ac8);
    background-size: 400% 400%;
    animation: vanquisherNameplateBg 3s ease infinite, iconHueCycle 6s linear infinite;
    border: 1px solid #ffffff;
    color: #1a1a24 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.85) !important;
}

/* ── Neon Signet: nametag flickers like a struggling neon sign ── */
.nametag-neon {
    color: #6affea;
    border: 1px solid rgba(90, 255, 230, 0.55);
    animation: nametagNeonFlicker 2.8s steps(1) infinite;
}
@keyframes nametagNeonFlicker {
    0%, 100% { text-shadow: 0 0 5px rgba(90, 255, 230, 0.8), 0 0 12px rgba(40, 220, 190, 0.5), 1px 1px 2px #000; opacity: 1; }
    7%       { text-shadow: 0 0 2px rgba(90, 255, 230, 0.3), 1px 1px 2px #000; opacity: 0.75; }
    9%       { text-shadow: 0 0 6px rgba(90, 255, 230, 0.9), 0 0 14px rgba(40, 220, 190, 0.6), 1px 1px 2px #000; opacity: 1; }
    54%      { text-shadow: 0 0 5px rgba(90, 255, 230, 0.8), 0 0 12px rgba(40, 220, 190, 0.5), 1px 1px 2px #000; opacity: 1; }
    56%      { text-shadow: 0 0 2px rgba(90, 255, 230, 0.25), 1px 1px 2px #000; opacity: 0.6; }
    58%      { text-shadow: 0 0 6px rgba(90, 255, 230, 0.9), 0 0 14px rgba(40, 220, 190, 0.6), 1px 1px 2px #000; opacity: 1; }
}