/* tooltips.css – Tooltip overlay (fallback) + shared content styles */

/* Tooltip overlay – kept for backward compat, now rarely used */
.tooltip-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(2px); }
.tooltip-overlay.hidden { display: none; }

.tooltip-box { background: var(--bg-dark); border: 1px solid var(--gold); border-radius: 10px; padding: 2rem; max-width: 560px; width: 100%; position: relative; max-height: 80vh; overflow-y: auto; box-shadow: 0 0 40px rgba(201, 162, 39, 0.2); animation: fadeIn 0.2s ease; }
.tooltip-close { position: absolute; top: 0.8rem; right: 0.8rem; background: transparent; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 4px; transition: color 0.15s; }
.tooltip-close:hover { color: var(--gold); }

#tooltipContent h3 { font-family: 'Cinzel', serif; color: var(--gold); margin-bottom: 0.8rem; }
#tooltipContent p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.5rem; }
#tooltipContent ul { padding-left: 1.2rem; color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; }

/* ---- Shared content styles (used in both tooltip and detail panel) ---- */
.class-tooltip { text-align: center; }
.ct-image { width: 100px; height: 100px; margin: 0 auto 0.8rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(201,162,39,0.25); }
.ct-image img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ct-name { font-family: 'Cinzel', serif; color: var(--gold) !important; font-size: 1.1rem !important; margin-bottom: 0.5rem !important; }
.ct-tags { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.8rem; }
.ct-stat-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 20px; border: 1px solid; }
.ct-stat-tag--spell { background: rgba(142,68,173,0.15) !important; border-color: rgba(142,68,173,0.4) !important; color: #bb6bd9 !important; }
.ct-desc { color: var(--text-dim) !important; font-size: 0.82rem !important; line-height: 1.5 !important; text-align: left; margin-bottom: 0.8rem !important; }
.ct-section { text-align: left; margin-bottom: 0.6rem; padding: 0.5rem 0.6rem; background: rgba(255,255,255,0.02); border-radius: var(--radius); border-left: 3px solid var(--border-dim); }
.ct-section__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 0.2rem; }
.ct-section__text { font-size: 0.82rem !important; color: var(--text-dim) !important; margin-bottom: 0 !important; line-height: 1.5 !important; }
.ct-section--levels { border-left-color: var(--gold); background: rgba(201,162,39,0.04); }
.ct-levels { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.ct-level { display: flex; gap: 0.5rem; align-items: center; }
.ct-level__badge { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; color: var(--bg-dark); background: var(--gold); border-radius: 4px; padding: 0.1rem 0.4rem; min-width: 5.8rem; text-align: center; }
.ct-level__content { flex: 1; }
.ct-level__abilities { font-size: 0.82rem; color: #ddd; }
.ct-level__slots { margin-top: 0.15rem; }
.ct-spell-slot { display: inline-block; font-size: 0.68rem; background: rgba(142,68,173,0.15); color: #bb6bd9; border: 1px solid rgba(142,68,173,0.3); border-radius: 3px; padding: 0.1rem 0.3rem; margin-right: 0.25rem; }
.ct-subrace-thumb { width: 45px; height: 45px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #fff; }

/* Race lore content */
.rl-hero { width: 100px; height: 100px; margin: 0 auto 0.8rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); }
.rl-hero img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.rl-name { font-family: 'Cinzel', serif; color: var(--gold); text-align: center; margin-bottom: 0.5rem; font-size: 1.1rem; }
.rl-paragraph { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 0.5rem; }
.rl-section { margin-top: 0.8rem; }
.rl-section__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; }
.rl-subrace { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.rl-subrace__img { width: 50px; height: 50px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.rl-subrace__img img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.rl-subrace__name { font-weight: 600; color: #ddd; font-size: 0.85rem; margin-bottom: 0.2rem; }
.rl-subrace__lore { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }