/* ============================================================================
   caster-trackers.css — the numbers you play from, as real cards
   ----------------------------------------------------------------------------
   theme-refine.css flattens every #spellbookPage .stat-display into an inline
   text run with !important. That reads fine for prose and badly for the six
   numbers you actually play from — they became a wall of grey text. These
   rules are scoped to .caster-trackers so they win on specificity as well as
   weight, and leave the rest of the page's flattening alone.
   ========================================================================== */

#spellbookPage .caster-trackers {
    margin: 4px 0 6px;
    padding: 14px;
    background: rgba(14, 12, 24, 0.5);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 12px;
}

#spellbookPage .caster-trackers-title {
    margin-bottom: 12px;
    font-family: 'Lora', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b93a1;
}

#spellbookPage .caster-trackers .stats-display-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
    gap: 8px !important;
}

#spellbookPage .caster-trackers .stat-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    /* top padding reserves a strip for the "?" that tooltips.js pins to the
       corner, so it sits ABOVE the label instead of on top of it */
    padding: 22px 8px 12px !important;
    background: rgba(18, 17, 28, 0.8) !important;
    border: 1px solid rgba(107, 155, 213, 0.2) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-align: center !important;
    min-width: 0 !important;
    position: relative;
    transition: border-color 0.25s ease, background 0.25s ease;
}
#spellbookPage .caster-trackers .stat-display:hover {
    background: rgba(24, 22, 36, 0.9) !important;
}

#spellbookPage .caster-trackers .stat-display .stat-label {
    order: 1;
    font-family: 'Lora', serif !important;
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #8b93a1 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    line-height: 1.3 !important;
}

#spellbookPage .caster-trackers .stat-display .stat-value {
    order: 2;
    font-family: 'Lora', serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#spellbookPage .caster-trackers .stat-display .stat-tooltip-icon {
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    font-size: 9px;
    z-index: 2;
}

/* speeds read cyan, limits read violet */
#spellbookPage .caster-trackers .stat-display[data-stat="action-speed"],
#spellbookPage .caster-trackers .stat-display[data-stat="bonus-speed"],
#spellbookPage .caster-trackers .stat-display[data-stat="casting-speed"] {
    border-color: rgba(0, 217, 255, 0.24) !important;
}
#spellbookPage .caster-trackers .stat-display[data-stat="action-speed"] .stat-value,
#spellbookPage .caster-trackers .stat-display[data-stat="bonus-speed"] .stat-value,
#spellbookPage .caster-trackers .stat-display[data-stat="casting-speed"] .stat-value {
    color: #00ffcc !important;
    text-shadow: 0 1px 8px rgba(0, 255, 204, 0.3) !important;
}
/* Casting Speed is the sum of the two above it, so it carries a touch more weight */
#spellbookPage .caster-trackers .stat-display[data-stat="casting-speed"] {
    background: rgba(0, 217, 255, 0.05) !important;
}

#spellbookPage .caster-trackers .stat-display[data-stat="containment"],
#spellbookPage .caster-trackers .stat-display[data-stat="daily"],
#spellbookPage .caster-trackers .stat-display[data-stat="signature"] {
    border-color: rgba(167, 139, 250, 0.24) !important;
}
#spellbookPage .caster-trackers .stat-display[data-stat="containment"] .stat-value,
#spellbookPage .caster-trackers .stat-display[data-stat="daily"] .stat-value,
#spellbookPage .caster-trackers .stat-display[data-stat="signature"] .stat-value {
    color: #c4b5fd !important;
    text-shadow: 0 1px 8px rgba(167, 139, 250, 0.3) !important;
}

@media (max-width: 600px) {
    #spellbookPage .caster-trackers { padding: 12px 10px; }
    #spellbookPage .caster-trackers .stats-display-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    #spellbookPage .caster-trackers .stat-display { padding: 20px 6px 10px !important; }
    #spellbookPage .caster-trackers .stat-display .stat-value { font-size: 1.4rem !important; }
    #spellbookPage .caster-trackers .stat-display .stat-label { font-size: 0.58rem !important; }
}