/* Arena — Heirs (lovers2). Shares lovers.css; no page scroll, the heir strip scrolls sideways inside itself. */
.hr-lock { margin: auto; text-align: center; max-width: 420px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hr-lockicon { font-size: 3rem; }
.hr-lock h2 { margin: 0; font: 400 1.6rem "IM Fell French Canon", Georgia, serif; color: var(--gold); }
.hr-lock p { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.hr-lock .lv-btn { width: 100%; }
.hr-strip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior: contain; padding-bottom: 2px; }
.hr-chip { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 12px; border: 2px solid rgba(217, 178, 106, .45); background: rgba(0, 0, 0, .25); color: var(--parch); }
.hr-chip.on { border-color: var(--gold); background: rgba(92, 26, 58, .55); box-shadow: 0 0 0 2px var(--gold); }
.hr-chip.new { border-style: dashed; }
.hr-chip canvas { width: 50px; height: 60px; border-radius: 8px; }
.hr-chip b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hr-chip small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hr-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.hr-panel[hidden] { display: none; }
.hr-top { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; }
.hr-por { flex: 0 0 auto; width: 96px; height: 118px; border-radius: 14px; border: 3px solid var(--gold); }
.hr-info { flex: 1 1 auto; min-width: 0; }
.hr-info h2 { margin: 0; font: 400 1.4rem "IM Fell French Canon", Georgia, serif; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-info p { margin: 2px 0; font-size: .92rem; color: var(--muted); line-height: 1.2; }
.hr-trait { color: var(--parch) !important; }
.hr-timer[hidden] { display: none; }
.hr-bar { display: block; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .4); overflow: hidden; margin-top: 4px; }
.hr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), var(--gold)); }
.hr-timer small { font-size: .85rem; color: var(--parch); }
.hr-tabs { grid-template-columns: repeat(3, 1fr); }
.hr-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hr-skills span { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(217, 178, 106, .35); font-size: 1rem; }
.hr-rp { margin: 0; text-align: center; font-size: 1rem; }
.hr-note { margin: 0; text-align: center; font-size: 1rem; color: var(--parch); }
.hr-note.small { font-size: .82rem; color: var(--muted); }
.hr-tutors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hr-tut { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid rgba(217, 178, 106, .35); background: rgba(0, 0, 0, .2); }
.hr-tut b { grid-column: 1 / -1; text-align: center; font-size: .98rem; }
.hr-tut .lv-btn { min-height: 44px; padding: 0 4px; font-size: .92rem; }
.hr-embassy { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hr-embassy #btnFriend { grid-column: 1 / -1; }
.hr-parents { display: flex; flex-direction: column; gap: 6px; }
.hr-revcv { display: block; margin: 0 auto; width: 150px; height: 180px; border-radius: 14px; border: 3px solid var(--rose); }
.hr-roll { margin: 0; text-align: center; font-size: 1.1rem; min-height: 2.6em; }
.hr-roll.on.rare b { color: #7fc4ff; } .hr-roll.on.epic b { color: #ffd36b; text-shadow: 0 0 10px rgba(255, 211, 107, .7); } .hr-roll b { font-size: 1.3rem; }
.hr-roll small { color: var(--muted); }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .hr-strip, .hr-panel { max-width: 860px; width: 100%; margin: 0 auto; }
  .hr-por { width: 140px; height: 172px; }
  .hr-tut .lv-btn { min-height: 52px; }
}
@media (max-height: 700px) { .hr-por { width: 80px; height: 98px; } .hr-chip canvas { width: 40px; height: 48px; } }