/* Component styles, collected in original cascade order. */
.relationship-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.relationship-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #24212f; }
.relationship-art { display: block; position: relative; width: 100%; aspect-ratio: 5/8; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: #24212f; color: #fff9f2; text-align: left; }
.relationship-art > .portrait { position: absolute; top: 0; left: 50%; height: 100%; width: auto; min-width: 100%; transform: translateX(-50%); }
.relationship-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 28%, #15121b40 43%, #15121be8 73%, #15121b 100%); }
.relationship-art:focus-visible { outline-offset: -4px; }
.relationship-overlay { position: absolute; bottom: 78px; left: 12px; right: 12px; z-index: 1; display: block; text-shadow: 0 2px 9px #0006; }
.relationship-name { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; font-size: 23px; font-weight: 900; letter-spacing: -.7px; line-height: 1.2; }
.relationship-name small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.relationship-job { display: block; font-size: 11px; color: #e8e2e9; margin-top: 6px; line-height: 1.5; }
.relationship-actions { position: absolute; z-index: 2; bottom: 12px; left: 12px; right: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.relationship-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 3px; min-width: 0; min-height: 52px; border: 1px solid var(--accent); border-radius: 8px; font-weight: 900; font-size: 13px; line-height: 1.3; }
.relationship-actions small { font-size: 10px; font-weight: 600; }
.relationship-actions button > span { display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.relationship-actions button > span .icon { width: 12px; height: 12px; flex-shrink: 0; }
.relationship-date { background: var(--accent); color: var(--bg); }
.relationship-contact { background: var(--accent); color: var(--bg); }
.relationship-actions button:disabled { opacity: .45; cursor: not-allowed; }
.relationship-actions button:not(:disabled):hover { filter: brightness(1.12); }
[data-theme="light"] .relationship-date { color: #fff; }
[data-theme="light"] .relationship-contact { color: #fff; }
@media (max-width: 1100px) {
.relationship-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.relationship-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
.relationship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
.relationship-card { border-radius: 13px; }
}
@media (max-width: 540px) {
.relationship-art { aspect-ratio: 5/9; min-height: 280px; }
}
@media (max-width: 540px) {
.relationship-overlay { left: 10px; right: 10px; bottom: 94px; }
}
@media (max-width: 540px) {
.relationship-name { font-size: 21px; }
}
@media (max-width: 540px) {
.relationship-job { font-size: 10px; }
}
@media (max-width: 540px) {
.relationship-actions { left: 8px; right: 8px; bottom: 10px; gap: 5px; }
}
@media (max-width: 540px) {
.relationship-actions button { font-size: 11px; min-height: 72px; padding: 6px 2px; }
}
@media (max-width: 540px) {
.relationship-actions button > span { flex-direction: column; gap: 3px; white-space: normal; word-break: keep-all; }
}
@media (max-width: 540px) {
.relationship-actions button > span .icon { width: 11px; height: 11px; }
}
@media (max-width: 360px) {
.relationship-grid { gap: 9px; }
}
@media (max-width: 360px) {
.relationship-name { font-size: 19px; }
}
@media (max-width: 360px) {
.relationship-actions { left: 6px; right: 6px; gap: 4px; }
}
@media (max-width: 360px) {
.relationship-actions button { font-size: 10px; }
}
@media (max-width: 360px) {
.relationship-actions button > span { flex-direction: column; gap: 3px; white-space: normal; word-break: keep-all; }
}
@media (max-width: 360px) {
.relationship-actions button > span .icon { width: 10px; height: 10px; }
}
.relationship-overlay .relationship-meter { margin-top: 12px; color: #ff9bbb; }
.relationship-overlay .relationship-track { background: #ffffff30; }
.relationship-overlay .relationship-meter > .icon { width: 15px; height: 15px; flex-basis: 15px; }
.relationship-actions .relationship-confess { grid-column: 1 / -1; }
.relationship-card { border-color: #3c3546; isolation: isolate; }
.relationship-art > .portrait-file { top: 0; left: 0; width: 100%; height: 100%; min-width: 0; transform: none; object-fit: cover; object-position: center top; clip-path: inset(0 0 25% 0); }
.relationship-art::after { background: linear-gradient(180deg, transparent 28%, #15121b55 43%, #15121b 72%, #15121b 100%); }
.relationship-gift { background: var(--accent); color: var(--bg); }
[data-theme="light"] .relationship-gift { color: white; }
.relationship-actions .relationship-contact { grid-column: 1 / -1; min-height: 34px; padding: 7px; }
.relationship-overlay { bottom: 120px; }
.relationship-actions button>span .icon { width: 14px; height: 14px; }
.relationship-card:has(.relationship-confess) .relationship-overlay { bottom: 78px; }
.record-card .relationship-overlay { bottom: 16px; }
.record-card .relationship-art { aspect-ratio: 4/5; min-height: 0; }
@media(max-width:600px) {
.relationship-art { min-height: 320px; }
}
@media(max-width:600px) {
.relationship-actions button { min-height: 62px; font-size: 11px; }
}
@media(max-width:600px) {
.relationship-actions button>span { flex-direction: column; white-space: nowrap; gap: 3px; }
}
@media(max-width:600px) {
.relationship-actions .relationship-contact>span { flex-direction: row; }
}
@media(max-width:600px) {
.relationship-actions .relationship-contact { min-height: 32px; }
}
@media(max-width:600px) {
.relationship-overlay { bottom: 122px; }
}
@media(max-width:600px) {
.relationship-name { font-size: 20px; }
}
@media(max-width:600px) {
.relationship-card:has(.relationship-confess) .relationship-overlay { bottom: 72px; }
}
@media(max-width:600px) {
.record-card .relationship-overlay { bottom: 13px; }
}
@media(max-width:360px) {
.relationship-actions button { font-size: 10px; }
}
@media(max-width:360px) {
.relationship-actions button>span .icon { width: 11px; height: 11px; }
}
.week-heroine-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.week-heroine-grid:has(>.week-heroine:nth-child(5)) { grid-template-columns:repeat(5,minmax(0,1fr)); }
.week-heroine { min-width:0; }
.week-heroine-art { display:block; position:relative; overflow:hidden; width:100%; aspect-ratio:.76; border:1px solid var(--line); border-radius:14px; padding:0; background:var(--surface); text-align:left; }
.week-heroine-art>.portrait { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; transition:transform 300ms; }
.week-heroine-art:hover>.portrait { transform:scale(1.04); }
.week-heroine-copy { position:absolute; inset:auto 0 0; display:flex; flex-direction:column; gap:5px; padding:40px 12px 12px; color:#fff; background:linear-gradient(transparent,#131421d9 48%,#131421f5); }
.week-heroine-copy>strong { font-size:18px; }
.week-heroine-copy>small { color:#eeebf5; font-size:10px; line-height:1.5; min-height:15px; }
.week-heroine-copy .relationship-meter { width:100%; margin-top:3px; --meter-track:#ffffff30; }
@media(max-width:1000px) {
.week-heroine-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1000px) {
.week-heroine-grid:has(>.week-heroine:nth-child(5)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:440px) {
.week-heroine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
}
@media(max-width:440px) {
.week-heroine-grid:has(>.week-heroine:nth-child(5)) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
}
@media(max-width:440px) {
.week-heroine-art { aspect-ratio:.7; border-radius:10px; }
}
@media(max-width:440px) {
.week-heroine-copy { padding:35px 9px 10px; }
}
@media(max-width:440px) {
.week-heroine-copy>strong { font-size:16px; }
}
@media(max-width:440px) {
.week-heroine-copy>small { font-size:9px; }
}
.finale-chosen .relationship-card {width:100%;box-shadow:0 12px 45px #e98fa43b;border:1px solid #efacb67a}
.relationship-card .relationship-art>.portrait { transition:transform 420ms cubic-bezier(.2,.65,.3,1); transform-origin:center 24%; }
.relationship-card .relationship-art>.portrait-file { clip-path:none; transform:scale(1); }
.relationship-card:is(:hover,:focus-within) .relationship-art>.portrait-file { transform:scale(1.045); }
.relationship-card:is(:hover,:focus-within) .relationship-art>.portrait:not(.portrait-file) { transform:translateX(-50%) scale(1.045); }
.relationship-card.record-card .relationship-art::after { background:linear-gradient(transparent 30%,#15121b50 50%,#15121be8 82%,#15121b); }
.relationship-card:has(.relationship-confess) .relationship-overlay { bottom:80px; }
.relationship-actions .relationship-confess { grid-column:1/-1; }
.relationship-caption { display:block; margin-top:5px; font-size:10px; line-height:1.5; color:#efe7ee; }
.heroine-new { position:absolute; z-index:1; top:10px; left:10px; padding:4px 6px; border-radius:5px; font-size:9px; }
.week-heroine .relationship-name { font-size:18px; }
.week-heroine .relationship-job { font-size:10px; }
.week-heroine .relationship-overlay { left:10px; right:10px; bottom:12px; }
.week-heroine .relationship-meter { margin-top:8px; }
.week-heroine .relationship-caption { font-size:9px; }
@media(max-width:600px) {
.week-heroine .relationship-name { font-size:17px; }
}