/* --- 1. FONTS INGESTION PIPELINES --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Lora:ital,wght@0,600;0,700;1,600&family=MedievalSharp&family=Metamorphous&family=Montserrat:wght@700;900&family=Press+Start+2P&family=Share+Tech+Mono&family=Silkscreen:wght@700&family=Uncial+Antiqua&display=swap');

/* --- 2. GLOBAL THEME TYPOGRAPHY MATRICES --- */
:root {
    --font-scale: 1.0; 
}

/* HIGH-FANTASY CHRONICLE THEME CONFIGURATIONS (REPLACED WITH HIGH-READABILITY LORA) */
body.theme-fantasy, body.theme-fantasy button, body.theme-fantasy div, body.theme-fantasy span, body.theme-fantasy label { font-family: 'Lora', serif; font-weight: 700; }
body.theme-fantasy h1 { font-family: 'Cinzel Decorative', serif; }
body.theme-fantasy h2, body.theme-fantasy h3, body.theme-fantasy h4, body.theme-fantasy .gold-action-btn, body.theme-fantasy .util-btn { font-family: 'MedievalSharp', cursive; }
body.theme-fantasy .stat-number-readout, body.theme-fantasy #ui-dashboard, body.theme-fantasy .item-stat-badge, body.theme-fantasy .stat-mod-large { font-family: 'Share Tech Mono', monospace; }

/* ARCADE QUARTER-EATER THEME CONFIGURATIONS */
body.theme-arcade, body.theme-arcade button, body.theme-arcade div, body.theme-arcade span, body.theme-arcade label { font-family: 'Share Tech Mono', monospace; font-weight: bold; }
body.theme-arcade h1 { font-family: 'Press Start 2P', cursive; font-size: calc(1.4rem * var(--font-scale)) !important; letter-spacing: 0px; }
body.theme-arcade h2, body.theme-arcade h3, body.theme-arcade h4, body.theme-arcade .gold-action-btn, body.theme-arcade .menu-btn, body.theme-arcade .diff-btn, body.theme-arcade .size-btn, body.theme-arcade .class-btn, body.theme-arcade .util-btn { font-family: 'Silkscreen', sans-serif; font-size: calc(11px * var(--font-scale)); }
body.theme-arcade .stat-number-readout, body.theme-arcade #ui-dashboard, body.theme-arcade .item-stat-badge, body.theme-arcade .stat-mod-large { font-family: 'Share Tech Mono', monospace; font-size: calc(15px * var(--font-scale)); }

/* THEMATIC CELTIC LABYRINTH CONFIGURATIONS */
body.theme-celtic, body.theme-celtic button, body.theme-celtic div, body.theme-celtic span, body.theme-celtic label { font-family: 'Montserrat', sans-serif; font-weight: 700; }
body.theme-celtic h1 { font-family: 'Uncial Antiqua', serif; font-size: calc(2.6rem * var(--font-scale)); letter-spacing: 1px; }
body.theme-celtic h2, body.theme-celtic h3, body.theme-celtic h4, body.theme-celtic .gold-action-btn, body.theme-celtic .menu-btn, body.theme-celtic .diff-btn, body.theme-celtic .size-btn, body.theme-celtic .class-btn, body.theme-celtic .util-btn { font-family: 'Metamorphous', serif; }
body.theme-celtic .stat-number-readout, body.theme-celtic #ui-dashboard, body.theme-celtic .item-stat-badge, body.theme-celtic .stat-mod-large { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: calc(14px * var(--font-scale)); }

/* --- 3. PAGE GEOMETRY & BASES --- */
body { background-color: #12161a; color: #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; box-sizing: border-box; font-size: calc(15px * var(--font-scale)); }
h1 { margin: 0 0 10px 0; color: #ffcc00; text-shadow: 3px 3px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000; text-align: center; }
.hidden { display: none !important; }
.error-text { color: #ff4d4d; font-family: monospace; font-size: calc(13px * var(--font-scale)); margin-top: 5px; font-weight: bold; min-height: 20px;}

/* --- 4. MAIN NAVIGATION BOARDS --- */
#main-menu-overlay { background-color: #1c232a; border: 4px solid #4a5968; padding: 25px; border-radius: 6px; box-shadow: 0 15px 35px rgba(0,0,0,0.8); width: 100%; max-width: 880px; text-align: center; }
#main-menu-overlay h2 { color: #ffcc00; margin-top: 0; text-shadow: 2px 2px 0px #000; font-size: calc(1.8rem * var(--font-scale)); }
.menu-intro { color: #a0aec0; margin-bottom: 20px; font-size: calc(13px * var(--font-scale)); }
.menu-layout-grid { display: flex; gap: 20px; margin-bottom: 25px; text-align: left; }
.menu-card { flex: 1; background-color: #151a1f; border: 2px solid #2d3743; padding: 15px; border-radius: 4px; }
.menu-card h3 { margin-top: 0; color: #a0aec0; font-size: calc(14px * var(--font-scale)); border-bottom: 2px solid #2d3743; padding-bottom: 6px; }
.mode-toggle-box, .difficulty-toggle-box { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.menu-btn, .diff-btn, .theme-btn { background-color: #242f3a; color: #cbd5e1; border: 2px solid #3b4a5a; padding: 10px; font-weight: bold; cursor: pointer; border-radius: 4px; text-align: left; font-size: calc(13px * var(--font-scale)); }
.menu-btn:hover, .diff-btn:hover, .theme-btn:hover { border-color: #ffcc00; color: #fff; background-color: #2b3a47; }
.menu-btn.active, .diff-btn.active, .theme-btn.active { background-color: #3b4e61; border-color: #ffcc00; color: #ffcc00; box-shadow: 0 0 8px rgba(255, 204, 0, 0.25); }

.size-selector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.size-btn { background-color: #242f3a; color: #cbd5e1; border: 2px solid #3b4a5a; padding: 8px; font-weight: bold; cursor: pointer; border-radius: 4px; font-size: calc(12px * var(--font-scale)); }
.size-btn:hover { border-color: #ffcc00; }
.size-btn.active { background-color: #3b4e61; border-color: #ffcc00; color: #ffcc00; }
.size-dim { font-size: calc(11px * var(--font-scale)); color: #a0aec0; font-weight: normal; display: block; }
#playlist-raw-json { width: 100%; height: 80px; background-color: #0b0e11; color: #06d6a0; border: 1px solid #2d3743; font-family: monospace; font-size: calc(12px * var(--font-scale)); padding: 8px; box-sizing: border-box; resize: none; }
.gold-action-btn { background-color: #ffb703; color: #12161a; border: 2px solid #b38000; padding: 14px 40px; font-size: calc(1.1rem * var(--font-scale)); font-weight: bold; cursor: pointer; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); margin: 0 auto; display: block; }
.gold-action-btn:hover { background-color: #ffe066; border-color: #ffb703; color: #000; }

/* --- HERO RECRUITMENT PANELS --- */
#char-creator-overlay { background-color: #1c232a; border: 4px solid #4a5968; padding: 20px; border-radius: 6px; box-shadow: 0 15px 35px rgba(0,0,0,0.8); width: 100%; max-width: 750px; text-align: center; }
#char-creator-overlay h2 { color: #ffcc00; margin-top: 0; font-size: calc(1.6rem * var(--font-scale)); }
.creator-layout { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.creator-section { flex: 1; background-color: #151a1f; border: 2px solid #2d3743; padding: 15px; border-radius: 4px; }
.creator-section h3 { margin-top: 0; color: #a0aec0; border-bottom: 2px solid #2d3743; padding-bottom: 5px; font-size: calc(14px * var(--font-scale)); }
.class-options { display: flex; flex-direction: column; gap: 10px; }
.class-btn { background-color: #242f3a; color: #cbd5e1; border: 2px solid #3b4a5a; padding: 10px; font-weight: bold; cursor: pointer; border-radius: 4px; text-align: left; font-size: calc(12px * var(--font-scale)); }
.class-btn.active { background-color: #3b4e61; border-color: #ffcc00; color: #ffcc00; }
.req-hint { font-size: calc(12px * var(--font-scale)); color: #cbd5e1; font-weight: normal; font-style: italic; display: block; margin-top: 2px;}
.pool-counter { font-size: calc(1.1rem * var(--font-scale)); color: #06d6a0; font-weight: bold; margin-bottom: 15px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-row label { font-size: calc(14px * var(--font-scale)); font-weight: bold; width: 160px; text-align: left; }
.stat-val { font-size: calc(1.4rem * var(--font-scale)); font-weight: bold; color: #ffb703; text-align: center; width: 40px;}
.adjust-btn { background-color: #ffb703; color: #000; border: none; width: 30px; height: 30px; font-size: calc(1.2rem * var(--font-scale)); font-weight: bold; cursor: pointer; border-radius: 3px; }

/* --- 5. ACTIVE DASHBOARD AND GAME LAYOUTS --- */
#ui-dashboard { background-color: #1c232a; border: 3px solid #4a5968; padding: 12px 20px; border-radius: 4px; margin-bottom: 10px; font-size: calc(1.2rem * var(--font-scale)); font-weight: bold; width: 1440px; box-sizing: border-box; letter-spacing: 1px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); display: flex; justify-content: space-between; align-items: center; }
.main-layout-row { display: flex; flex-direction: row; gap: 15px; width: 1440px; }
.viewport-box { position: relative; width: 800px; height: 600px; }
canvas { border: 4px solid #4a5968; background-color: #050708; box-shadow: 0px 10px 30px rgba(0,0,0,0.7); cursor: crosshair; }

#game-message-overlay { position: absolute; top: 4px; left: 4px; width: 800px; height: 600px; background-color: rgba(5, 7, 8, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10; }
.message-card { background-color: #1c232a; border: 4px solid #ffcc00; padding: 30px; border-radius: 6px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.9); max-width: 450px; width: 90%; }
.message-card h2 { color: #ffcc00; margin: 0 0 15px 0; text-shadow: 2px 2px 0px #000; font-size: calc(1.6rem * var(--font-scale)); }
.message-card p { color: #cbd5e1; font-size: calc(15px * var(--font-scale)); line-height: 1.6; margin: 0 0 25px 0; }

.dash-controls-cluster { display: flex; gap: 8px; align-items: center; }
.util-btn { background-color: #242f3a; color: #cbd5e1; border: 1px solid #4a5968; padding: 6px 14px; font-size: calc(11px * var(--font-scale)); font-weight: bold; cursor: pointer; border-radius: 3px; }
.util-btn:hover { background-color: #3b4e61; color: #ffcc00; border-color: #ffcc00; }
.util-btn.alert-intent { background-color: #4a2325; border-color: #802629; color: #fcc; }
.util-btn.alert-intent:hover { background-color: #802629; color: #fff; border-color: #ff4d4d; }

#profile-left-sidebar { width: 295px; background-color: #1c232a; border: 4px solid #4a5968; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 4px; box-shadow: 0px 10px 30px rgba(0,0,0,0.7); }
#profile-left-sidebar h3, #inventory-sidebar h3 { margin: 0 0 10px 0; color: #ffcc00; font-size: calc(1.2rem * var(--font-scale)); border-bottom: 2px solid #4a5968; padding-bottom: 4px; text-align: center; text-shadow: 1px 1px 0px #000; }
.icon-header-slot-title { margin: 0 0 10px 0; border-bottom: 2px solid #4a5968; padding-bottom: 4px; text-align: center; font-size: calc(1.4rem * var(--font-scale)); }
#profile-left-sidebar h4 { margin: 15px 0 8px 0; color: #a0aec0; font-size: calc(12px * var(--font-scale)); text-align: left; border-bottom: 1px dashed #4a5968; padding-bottom: 3px; }
.avatar-frame { background-color: #151a1f; border: 2px solid #3b4854; border-radius: 4px; padding: 12px; text-align: center; margin-bottom: 10px; }
#avatar-image-placeholder { width: 60px; height: 60px; margin: 0 auto 8px auto; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 0 8px rgba(0,0,0,0.6); }
#avatar-class-label { font-weight: bold; font-size: calc(15px * var(--font-scale)); color: #ffffff; letter-spacing: 1px; }

.left-stat-card { background-color: #151a1f; border: 2px solid #2d3743; padding: 8px 12px; margin-bottom: 8px; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
.stat-label-title { font-size: calc(13px * var(--font-scale)); font-weight: bold; color: #cbd5e1; }
.stat-number-readout { font-size: calc(18px * var(--font-scale)); font-weight: bold; color: #ffb703; }
.left-stat-card.modified-border { border-color: #06d6a0 !important; box-shadow: 0 0 10px rgba(6, 214, 160, 0.35); background-color: #14221d; }

.stat-mod-large { font-size: calc(21px * var(--font-scale)); color: #06d6a0; font-weight: bold; margin-left: auto; margin-right: 2px; }
.stat-readout-block { display: flex; align-items: center; width: 100px; justify-content: flex-end; }

#inventory-sidebar { width: 305px; background-color: #1c232a; border: 4px solid #4a5968; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 4px; box-shadow: 0px 10px 30px rgba(0,0,0,0.7); }
.equip-slots { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.slot { background-color: #151a1f; border: 2px solid #3b4854; padding: 12px 14px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); font-size: calc(14px * var(--font-scale)); }
.slot-icon-glyph { font-size: calc(16px * var(--font-scale)); margin-right: 6px; }
.empty-slot { color: #718096; font-style: italic; }
.equipped-item-name { color: #06d6a0; font-weight: bold; text-align: left; }

#loot-list-box { flex-grow: 1; background-color: #151a1f; border: 2px solid #2d3743; border-radius: 4px; padding: 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 190px; max-height: 240px; }
.loot-item-node { background-color: #242f3a; border: 1px solid #3b4a5a; padding: 6px; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; font-size: calc(13px * var(--font-scale)); }
.loot-item-text-hit { cursor: pointer; flex-grow: 1; text-align: left; }
.item-drop-trigger-btn { background-color: #9e2a2b; color: #fff; border: none; padding: 2px 6px; font-weight: bold; cursor: pointer; border-radius: 2px; margin-left: 6px; font-size: calc(11px * var(--font-scale)); }
.item-drop-trigger-btn:hover { background-color: #bd3a3c; }

.chest-item-node { display: flex; justify-content: space-between; align-items: center; background-color: #1a2319; border: 1px solid #3a5c38; padding: 4px 6px; font-size: calc(11px * var(--font-scale)); border-radius: 2px; }
.chest-take-btn { background-color: #06d6a0; color: #12161a; border: none; padding: 2px 5px; font-weight: bold; cursor: pointer; border-radius: 2px; }
.chest-take-btn:hover { background-color: #26e6b4; }

.item-stat-badge { color: #ffb703; font-weight: bold; display: block; margin-top: 2px; font-size: calc(12px * var(--font-scale)); }
.action-notice { color: #a0aec0; text-align: center; margin-top: 5px; font-style: italic; font-size: calc(11px * var(--font-scale)); }

/* --- 6. DEV STUDIO GRAPHICS PANEL STYLES --- */
#icon-editor-overlay { background-color: #1c232a; border: 4px solid #4a5968; padding: 25px; border-radius: 6px; box-shadow: 0 15px 35px rgba(0,0,0,0.8); width: 100%; max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
#icon-editor-overlay h2 { color: #ffb703; margin-top: 0; text-shadow: 2px 2px 0px #000; font-size: calc(1.7rem * var(--font-scale)); }
.editor-workspace-layout { display: flex; flex-direction: row; gap: 20px; width: 100%; margin-top: 10px; }
.editor-panel-box { display: flex; flex-direction: column; background-color: #151a1f; border: 2px solid #2d3743; padding: 15px; border-radius: 4px; }
#editor-palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 5px; }
.palette-swatch { height: 34px; border-radius: 3px; border: 2px solid #3b4a5a; cursor: pointer; box-sizing: border-box; transition: transform 0.1s ease; }
.palette-swatch:hover { transform: scale(1.08); }
.palette-swatch.active-color { border-color: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }

/* --- NEW: DYNAMIC COMBAT ATTRIBUTE HIGHLIGHT FLASHER FILTERS --- */
@keyframes glow-green-fade {
    0% { background-color: rgba(6, 214, 160, 0.45); box-shadow: inset 0 0 15px rgba(6, 214, 160, 0.6), 0 0 15px rgba(6, 214, 160, 0.4); border-color: #06d6a0; }
    100% { background-color: #151a1f; box-shadow: none; }
}
@keyframes glow-red-fade {
    0% { background-color: rgba(255, 51, 51, 0.45); box-shadow: inset 0 0 15px rgba(255, 51, 51, 0.6), 0 0 15px rgba(255, 51, 51, 0.4); border-color: #ff3333; }
    100% { background-color: #151a1f; box-shadow: none; }
}
.stat-flash-increase { animation: glow-green-fade 1.3s cubic-bezier(0.1, 0.8, 0.3, 1); }
.stat-flash-decrease { animation: glow-red-fade 1.3s cubic-bezier(0.1, 0.8, 0.3, 1); }

/* --- UPDATED STUDIO SWATCH PALETTE LAYOUT CRITERIA --- */
#editor-palette-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr) !important; /* Compact multi-row matrix */
    gap: 6px;
    margin-top: 6px;
}
.palette-swatch.eraser-tool-active {
    border-color: #ff3333 !important;
    box-shadow: 0 0 12px rgba(255, 51, 51, 0.7) !important;
    transform: scale(1.05);
}