/* ==========================================================================
   MODALS.CSS - Unified Modal & Popup Styling
   ========================================================================== */

/* --- 1. GENERIC MODAL OVERLAY --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Reduced opacity for better visibility */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    padding: 20px;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* --- 2. MODAL BOX STRUCTURE --- */
.modal-box {
    background: linear-gradient(145deg, #0f1014 0%, #050505 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    width: 100%;
    max-width: 600px;
    position: relative;
    transform: translateY(10px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
}

.modal-overlay.is-visible .modal-box,
.info-popup-overlay.is-visible .modal-box {
    transform: scale(1) translateY(0);
}

/* Size Variants */
.modal-sm { max-width: 450px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1100px; }

.modal-box input, .modal-box textarea, .selectable-text {
    user-select: text; -webkit-user-select: text; cursor: text;
}

/* --- 3. SECTIONS (Header, Body, Footer) --- */
.modal-header {
    flex-shrink: 0;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
    opacity: 0.8;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background-color: #333; border-radius: 10px; }

.modal-footer {
    flex-shrink: 0;
    padding: 16px 24px;
    background: #08080a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    z-index: 5;
}

/* --- 4. MATH BREAKDOWN STYLES --- */

/* Common Box Style */
.math-section, .dd-section {
    background: #050505;
    border: 1px solid #1f2937;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: none; 
}

/* Header inside the boxes */
.math-header, .dd-title {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- FIXED SNAPSHOT OVERVIEW LAYOUT --- */
.math-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.math-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.math-row span {
    color: #64748b; /* Dim label */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.math-row b {
    color: #e2e8f0;
    font-family: 'Consolas', monospace;
    font-size: 0.95rem;
}

/* Specific highlight values */
.math-val-gold { 
    color: var(--gold) !important; 
    font-size: 1.1rem !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}
.math-val-range { 
    color: var(--stat-range) !important;
    font-weight: 800;
}

/* --- QUICK BREAKDOWN --- */
.mq-box { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 12px; 
}

.mq-box > div {
    background: #0a0a0c;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 80px;
}

.mq-label { 
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.65rem; 
    color: #666; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin-bottom: 6px; 
    letter-spacing: 0.5px;
}

.mq-val { 
    color: #fff; 
    font-weight: 700; 
    font-size: 1.1rem; 
    font-family: 'Consolas', monospace;
    line-height: 1.2;
}

.mq-sub { 
    font-size: 0.65rem; 
    color: #444; 
    margin-top: 6px; 
    font-family: 'Consolas', monospace;
}

.mq-sep {
    color: #333;
    margin: 0 4px;
    font-weight: 300;
    font-size: 0.9em;
    vertical-align: text-bottom;
}

/* --- DEEP DIVE BUTTON --- */
.deep-dive-trigger {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed #333;
    border-radius: 6px;
    padding: 12px;
    margin: 20px 0 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.deep-dive-trigger span { 
    font-weight: 700; 
    color: #666;
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-family: 'Consolas', monospace;
}

.deep-dive-trigger:hover { 
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--accent-start);
}

.deep-dive-trigger:hover span {
    color: #fff;
}

.dd-arrow {
    font-size: 0.8rem;
    transition: transform 0.2s;
}

/* --- CALCULATION TABLE (FLAT) --- */
.calc-table { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
    margin-top: 0;
    font-family: 'Consolas', 'Monaco', monospace; 
    font-size: 0.75rem; 
}

.calc-table tr:nth-child(even),
.calc-table tr:hover,
.calc-table tr { 
    background: transparent !important; 
    transition: none !important;
}

.calc-table td { 
    padding: 5px 0;
    border-bottom: none !important; 
    vertical-align: middle;
}

.mt-cell-label { 
    color: #888; 
    width: 55%; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 500;
}

.mt-cell-formula { 
    color: #444; 
    width: 15%; 
    text-align: center; 
    font-size: 0.7rem; 
}

.mt-cell-val { 
    color: #e2e8f0; 
    text-align: right; 
    font-weight: 700; 
    width: 30%;
}

/* UPDATED: Removed border and changed to table-cell for inline alignment */
.calc-result { 
    color: var(--gold); 
    font-size: 1.1rem; 
    border-top: none !important; 
    padding-top: 0 !important;
    margin-top: 0;
    text-align: right !important;
    display: table-cell;
    vertical-align: middle;
}

/* NEW: Sun God Passive "Box" Styling */
.mt-row-sungod td {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0));
    border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-left: 3px solid var(--gold) !important;
    padding: 12px !important;
}

/* NEW: Ninja Passive "Box" Styling (Matching Sun God layout, but Cyan/Custom colors) */
.mt-row-ninja td {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.1), rgba(0, 0, 0, 0));
    border-top: 1px solid rgba(6, 182, 212, 0.3) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.3) !important;
    border-left: 3px solid var(--custom) !important;
    padding: 12px !important;
}

/* NEW: Super Roku Passive "Box" Styling */
.mt-row-super_roku td {
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.1), rgba(0, 0, 0, 0));
    border-top: 1px solid rgba(244, 63, 94, 0.3) !important;
    border-bottom: 1px solid rgba(244, 63, 94, 0.3) !important;
    border-left: 3px solid #f43f5e !important;
    padding: 12px !important;
}

/* NEW: Grid for better spacing in Sun God Passive */
.sungod-stats-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 6px 15px; /* Vertical 6px, Horizontal 15px */
    align-items: center;
}

/* Helper for spacing groups inside the flat table */
.mt-pt-md { padding-top: 12px !important; }
.mt-pl-md { padding-left: 15px; }

/* Colors */
.mt-text-gold { color: #fbbf24 !important; }
.mt-text-green { color: #4ade80 !important; }
.mt-text-orange { color: #fb923c !important; }
.mt-text-range { color: var(--stat-range) !important; font-weight: bold; }
.text-accent-start { color: #60a5fa !important; }
.text-accent-end { color: #c084fc !important; }
.text-custom { color: var(--custom) !important; }
.text-dim { color: #444 !important; }

/* --- 5. INFO POPUP OVERLAY --- */
.info-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000; /* Stacks ABOVE standard modal (2000) */
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.info-popup-overlay.is-visible { opacity: 1; visibility: visible; }

/* Specific style for Info Popup Box */
.info-popup-box {
    box-shadow: 0 25px 60px rgba(0,0,0,0.9);
}

.ip-formula {
    background: #08080a; padding: 15px; border-radius: 8px;
    font-family: 'Consolas', monospace; margin-top: 15px;
    color: #e2e8f0; font-size: 0.85rem; border: 1px solid #333;
    text-align: center;
}
.ip-var { color: var(--success); }
.ip-num { color: var(--accent-end); font-weight: bold; }
.ip-hl  { color: var(--gold); font-weight: bold; border-bottom: 1px dashed var(--gold); }

/* --- 6. CALCULATOR MODAL SPECIFICS --- */
.calc-unit-header {
    display: flex; 
    gap: 20px; 
    padding: 20px;
    background: linear-gradient(135deg, rgba(46, 16, 101, 0.5) 0%, rgba(0,0,0,0) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    align-items: center;
    justify-content: flex-start;
}
.calc-avatar { 
    width: 64px; 
    height: 64px; 
    border-radius: 12px; 
    border: 2px solid rgba(255,255,255,0.8); 
    background: #000; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.5); 
}
.calc-unit-name { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1; margin: 0; }
.calc-unit-role { font-size: 0.8rem; color: var(--accent-start); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* New Body Controls Container */
.calc-global-controls { 
    display: flex; 
    gap: 10px; 
    width: 100%;
    background: #0a0a0c; 
    border: 1px solid #222;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.calc-stat-group { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid #333; 
    border-radius: 8px; 
    padding: 8px 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    gap: 4px; 
    flex: 1;
    min-width: 80px;
}

.calc-stat-group.group-wide {
    flex: 1.5;
    min-width: 140px;
}

/* Gear Cards */
.gear-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding: 10px 0; }
.gear-card { background: #0f1014; border: 1px solid #2d2f36; border-radius: 12px; overflow: hidden; transition: 0.2s; }
.gear-card:hover { border-color: #555; }
.gear-header { background: rgba(255,255,255,0.03); padding: 12px 15px; border-bottom: 1px solid #222; }
.gear-title { font-size: 0.7rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; display: block; }
.gear-subs { padding: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; background: #08080a; }

.sub-input-group { display: flex; align-items: center; background: #111; border: 1px solid #333; border-radius: 4px; padding: 4px 8px; transition: 0.2s; }
.sub-input-group:focus-within { border-color: var(--accent-start); }
.sub-input-group.disabled { opacity: 0.3; pointer-events: none; border-style: dashed; }
.sub-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; width: 35px; flex-shrink: 0; }
.sub-val-input { width: 100%; background: transparent; border: none; color: #fff; text-align: right; font-family: 'Consolas', monospace; font-size: 0.9rem; }
.sub-val-input:focus { outline: none; }
.sub-dmg { color: #ff8888; } .sub-spa { color: #88ccff; } .sub-range { color: #ffa500; } .sub-cm { color: #d8b4fe; } .sub-cf { color: #ffd700; } .sub-dot { color: #4ade80; }

/* --- 7. COMPARISON TABLE --- */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: 'Consolas', monospace; font-size: 0.85rem; }
.compare-table th { text-align: left; background: rgba(15, 16, 20, 0.95); padding: 12px 15px; color: #94a3b8; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid #333; position: sticky; top: -24px; z-index: 10; }
.compare-table td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; color: #e2e8f0; }
.compare-table tr:hover td { background: rgba(255,255,255,0.02); }

/* --- NEW: FIX IMAGE SIZING & LAYOUT --- */
.comp-unit-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comp-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    flex-shrink: 0;
}

/* Support for images wrapped in .unit-img-wrapper (for element icons) */
.comp-unit-wrap .unit-img-wrapper {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.comp-unit-wrap .unit-img-wrapper .comp-img {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.comp-sub {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 3px;
    line-height: 1.2;
}
/* ------------------------------------- */

.comp-highlight { font-size: 1.1rem; font-weight: bold; color: #fff; }
.comp-val-label { font-size: 0.6rem; margin-left: 4px; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.comp-val-dps { color: #aaa; } .comp-val-rng { color: #4ade80; }
.comp-tag { display: inline-block; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--accent-start); padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
/* --- 8. SUB PRIORITY CHARTS --- */
.sub-prio-header { margin-bottom: 20px; text-align: center; font-size: 0.85rem; color: #94a3b8; }
.prio-row { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; }
.prio-label { width: 90px; text-align: right; font-size: 0.7rem; font-weight: 800; color: #ccc; text-transform: uppercase; }
.prio-bar-container { flex-grow: 1; background: #1a1a1d; height: 28px; border-radius: 6px; border: 1px solid #333; position: relative; overflow: hidden; }
.prio-bar { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); width: var(--bar-width); position: relative; }
.prio-bar.best { background: linear-gradient(90deg, #10b981, #059669); }
.prio-val { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; font-weight: bold; color: #fff; z-index: 2; }
.prio-diff { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.8); z-index: 2; }
.sub-prio-note { margin-top: 25px; padding: 12px; background: rgba(255, 255, 255, 0.03); border: 1px dashed #333; border-radius: 6px; font-size: 0.75rem; color: #666; text-align: center; }

/* --- 9. CONFIG & FEEDBACK --- */
.config-section { margin-bottom: 20px; }
.config-header { font-size: 0.75rem; font-weight: 800; color: var(--accent-start); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 1px; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.config-item { background: #0f1014; border: 1px solid #2d2f36; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: 0.2s; }
.config-item:hover { border-color: #666; transform: translateY(-2px); }
.config-item.selected { border-color: var(--accent-start); background: rgba(59, 130, 246, 0.1); }
.config-item img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); }
.config-item span { font-size: 0.7rem; font-weight: 700; color: #e2e8f0; line-height: 1.2; }
.config-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.config-chip { background: #1a1a1d; border: 1px solid #333; color: #94a3b8; padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: 0.2s; }
.config-chip:hover { border-color: #666; color: #fff; }
.config-chip.selected { background: var(--accent-end); border-color: var(--accent-end); color: #fff; }
.cp-preview-box { margin-top: 0; background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(0,0,0,0)); padding: 15px; border-radius: 12px; border: 1px solid rgba(6, 182, 212, 0.3); text-align: center; }
.cp-preview-label { font-size: 0.7rem; color: var(--cyan); text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }
.cp-preview-val { font-size: 1.2rem; color: #fff; margin-top: 0; display: block; }
.cp-avatar-placeholder { width: 45px; height: 45px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.1); background: #000; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #888; transition: 0.2s; }
.config-item.selected .cp-avatar-placeholder { border-color: var(--accent-start); color: var(--accent-start); background: rgba(59, 130, 246, 0.1); }

.feedback-form label { display: block; margin-bottom: 15px; }
.feedback-textarea { width: 100%; height: 140px; background: #050505; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; resize: none; margin-top: 6px; font-family: inherit; font-size: 0.9rem; }
.feedback-textarea:focus { border-color: var(--accent-start); outline: none; }
#feedbackStatus { text-align: right; font-size: 0.8rem; min-height: 20px; margin-top: 5px; }

/* --- 10. PATCH NOTES --- */
.patch-entry { background: rgba(255,255,255,0.03); border-radius: 8px; padding: 15px; margin-bottom: 15px; border-left: 3px solid var(--accent-start); }
.patch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.patch-version { font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.patch-date { font-size: 0.75rem; color: #999; background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 12px; }
.patch-list { list-style: none; padding: 0; margin: 0; }
.patch-list li { margin-bottom: 8px; font-size: 0.9rem; color: #ddd; display: flex; align-items: baseline; line-height: 1.4; }
.patch-tag { color: var(--accent-start); font-weight: 700; font-size: 0.65rem; text-transform: uppercase; background: rgba(59, 130, 246, 0.15); padding: 2px 6px; border-radius: 4px; margin-right: 10px; flex-shrink: 0; }

/* --- 11. TRAIT GUIDE MODAL STYLES --- */

/* Grid Layout for Short/Long term traits */
.tg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* Individual Sections (Cards) */
.tg-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.tg-section:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Labels (e.g., "Wave 1-30") */
.tg-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b; /* Muted slate */
    margin-bottom: 10px;
    display: block;
}

/* Trait Names */
.tg-trait {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tg-trait-rainbow {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-bg 20s linear infinite;
    display: block;
    margin-bottom: 4px;
}

/* Specific coloring for modes */
.tg-short {
    color: var(--gold); /* Gold/Orange for Short runs */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.tg-long {
    color: var(--cyan); /* Cyan/Blue for Infinite */
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

/* Strategy Note Box */
.tg-note {
    background: #0a0a0c;
    border: 1px dashed #333;
    border-radius: 8px;
    padding: 16px;
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.6;
    position: relative;
}

/* "Strategy Note:" Label styling */
.tg-note strong {
    color: var(--accent-end); /* Purple accent */
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

/* Mobile Adjustment for Trait Guide */
@media (max-width: 480px) {
    .tg-grid {
        grid-template-columns: 1fr; /* Stack vertically on phones */
        gap: 10px;
    }
    
    .tg-section {
        padding: 15px;
        flex-direction: row; /* Horizontal layout on mobile */
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .tg-label {
        margin-bottom: 0;
    }
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
    /* Existing Modal Adjustments */
    .modal-box { 
        width: 95vw !important; 
        max-width: 95vw !important;
        height: auto; max-height: 90vh; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); 
        padding: 0;
    }
    
    /* MODAL HEADER RESET */
    .calc-unit-header { 
        flex-direction: row; 
        text-align: left; 
        padding: 15px; 
    }

    .modal-body {
        padding: 12px;
    }

    /* CONTROLS IN BODY GRID LAYOUT */
    .calc-global-controls { 
        display: grid; 
        grid-template-columns: 1fr 1fr; /* 2 Columns */
        gap: 8px; 
        margin-top: 0; 
        padding: 10px;
    }

    /* Set/Trait takes full width on mobile */
    .calc-stat-group.group-wide { 
        grid-column: 1 / -1; 
    }

    .gear-grid-container { grid-template-columns: 1fr; }

    /* --- NEW: RESPONSIVE COMPARISON TABLE (Stack as Cards) --- */
    .compare-table { border: none; }
    .compare-table thead { display: none; } /* Hide Table Headers */
    .compare-table tbody { display: block; width: 100%; }
    
    .compare-table tr { 
        display: flex; 
        flex-direction: column; 
        background: rgba(255,255,255,0.03); 
        border: 1px solid rgba(255,255,255,0.08); 
        border-radius: 8px; 
        margin-bottom: 12px; 
        padding: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }
    
    .compare-table td { 
        display: block; 
        width: 100%; 
        padding: 8px 0; 
        border-bottom: 1px solid rgba(255,255,255,0.05); 
        text-align: left;
    }
    
    .compare-table td:last-child { border-bottom: none; }
    
    /* Cell 1: Unit Info - Keep layout */
    .compare-table td:first-child { 
        display: flex; 
        align-items: center;
        padding-top: 0;
    }
    
    /* Cell 2: Primary Stat - Flex Row with Label */
    .compare-table td:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .compare-table td:nth-child(2)::before {
        content: 'Primary Stat';
        font-size: 0.65rem;
        color: #666;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Cell 3: Build Info - Stack with Label */
    .compare-table td:nth-child(3) {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
    .compare-table td:nth-child(3)::before {
        content: 'Best Config';
        font-size: 0.65rem;
        color: #666;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    /* Wrap long build names */
    .comp-build-name {
        white-space: normal;
        line-height: 1.4;
    }
}

/* --- TRAIT IMAGES ROW --- */
.tg-images-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}
.tg-images-row:empty { display: none; }

/* --- TRAIT RAINBOW EFFECT --- */
.trait-img-rainbow {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    padding: 2px;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    animation: rainbow-bg 20s linear infinite;
    flex-shrink: 0;
}
.trait-img-rainbow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background: #000;
}
@keyframes rainbow-bg {
    0% { background-position: 0 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* --- TRAIT TIER LIST --- */
.tier-list-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.tier-section-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--accent-start);
    text-transform: uppercase;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}
.tier-grid { display: flex; flex-direction: column; gap: 8px; }
.tier-row {
    display: flex;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    overflow: hidden;
    min-height: 60px;
}
.tier-head {
    width: 100px;
    background: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.tier-trait-icon { width: 40px !important; height: 40px !important; margin-bottom: 5px; }
.tier-trait-name { font-size: 0.7rem; font-weight: 800; color: #fff; text-align: center; text-transform: uppercase; }
.tier-body {
    flex-grow: 1;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tier-unit {
    width: 60px; height: 60px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid #444; background: #000;
    transition: transform 0.2s;
}
.tier-unit:hover { transform: scale(1.1); border-color: var(--accent-start); }
.tier-unit-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* --- 12. ALL TRAITS GUIDE --- */
.all-traits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.all-traits-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.atg-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.atg-header .trait-img-rainbow {
    width: 80px;
    height: 80px;
}

.atg-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.atg-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 20px;
    min-height: 30px; /* Give some space for descriptions */
    line-height: 1.5;
}

.atg-stats {
    list-style: none;
    padding: 15px;
    margin: 0;
    width: 100%;
    background: #0a0a0c;
    border: 1px solid #222;
    border-radius: 8px;
}

.atg-stats li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.atg-stats li:last-child {
    border-bottom: none;
}

.atg-label {
    color: #888;
    font-weight: 700;
}

.atg-value {
    color: #e2e8f0;
    font-weight: 700;
    font-family: 'Consolas', monospace;
}

/* --- 13. UNIT INFO MODAL --- */
.unit-info-modal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-section {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 18px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}

.info-sec-title {
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-start);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 0.95rem;
    color: #fff;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
}

.info-list li span:first-child {
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.info-list li span:last-child {
    font-weight: 900;
}

/* Section Colors */
.section-discovery .info-sec-title { color: #60a5fa; border-bottom-color: rgba(96, 165, 240, 0.3); }
.section-discovery .info-list li span:first-child { color: #60a5fa; opacity: 0.8; }

.section-passives .info-sec-title { color: #f43f5e; border-bottom-color: rgba(244, 63, 94, 0.3); }
.section-passives .info-list li span:first-child { color: #f43f5e; opacity: 0.8; }

.section-ethereal .info-sec-title { color: #c084fc; border-bottom-color: rgba(192, 132, 252, 0.3); }
.section-ethereal .info-list li span:first-child { color: #c084fc; opacity: 0.8; }

.section-ability .info-sec-title { color: #fbbf24; border-bottom-color: rgba(251, 191, 36, 0.3); }
.section-ability .info-list li span:first-child:not(.info-ability-desc) { color: #fbbf24; opacity: 0.8; }

.e-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Consolas', monospace;
    font-size: 0.75rem;
    color: #d8b4fe;
    font-weight: 900;
}

/* PERFORMANCE & LAYOUT FIXES */
.info-passive-item, 
.info-ability-desc-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
}
.info-passive-desc,
.info-ability-desc {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 6px;
    font-weight: 400 !important;
    line-height: 1.4;
    display: block;
}
.info-ethereal-item {
    gap: 12px;
}
.info-ethereal-text {
    flex: 1;
    line-height: 1.4;
    font-size: 0.85rem;
}

/* --- 12. ANNOUNCEMENT MODAL (FINAL UPDATE) --- */
.announcement-box {
    border: 1px solid rgba(248, 113, 113, 0.3); /* Soft Red Border */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(248, 113, 113, 0.1) inset;
}

.announcement-header {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.1), transparent);
}

.announcement-header::after {
    background: linear-gradient(90deg, transparent, #f87171, #fbbf24, transparent);
}

.announcement-title {
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 12px;
}

.announcement-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px rgba(248, 113, 113, 0.5));
}

.announcement-body {
    padding: 30px 40px;
    text-align: center;
}

.announcement-main-text {
    font-size: 1.15rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 20px;
}

.announcement-sub-text {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
}

.announcement-footer {
    justify-content: center;
    padding-bottom: 24px;
    background: transparent;
    border-top: none;
}

.btn-announcement {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: #fff;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-announcement:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
}