/* 재능 주사위 고르기 창과 '새 재능' 도장(js/talent-pick.js). 등급 색은 css/talents.css·css/talent-tiers.css */
.tp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.tp-side { min-width: 0; padding: 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--bg); }
.tp-side + .tp-side { border-style: dashed; }
.tp-label { margin: 0 0 6px; font: 700 12px/1.4 var(--body); color: var(--muted); }
.tp-tal { display: flex; gap: 6px; align-items: flex-start; padding: 6px; border: 2px solid var(--rar-c, var(--ink)); border-radius: 10px; }
.tp-tal + .tp-tal { margin-top: 4px; }
.tp-tal.rar-u { border-color: var(--rar-u); }
.tp-tal.rar-l { border-color: var(--rar-l); background: color-mix(in srgb, var(--rar-l) 10%, var(--bg)); }
.tp-tal.rar-m { border-color: var(--rar-m); background: color-mix(in srgb, var(--rar-m) 10%, var(--bg)); }
.tp-tal i { font-style: normal; font-size: 20px; }
.tp-tal div { min-width: 0; }
.tp-tal small { display: block; font: 600 11px var(--body); opacity: .75; }
.tp-tal b { display: block; font: 800 14px/1.25 var(--body); overflow-wrap: anywhere; }
.tp-tal span { display: block; margin-top: 2px; font: 500 12px/1.4 var(--body); opacity: .85; }

/* 도감에 아직 없는 재능 */
.tp-new { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1.5px solid #c8422c; border-radius: 4px; color: #c8422c; font: 800 11px/1.5 var(--body); font-style: normal; transform: rotate(-4deg); vertical-align: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tp-new { color: #ff7a5c; border-color: #ff7a5c; } }
:root[data-theme="dark"] .tp-new { color: #ff7a5c; border-color: #ff7a5c; }
@media (max-width: 340px) { .tp-pair { gap: 6px; } .tp-side { padding: 6px; } .tp-tal i { font-size: 17px; } }