:root {
  --navy: #071b2b;
  --navy-soft: #102a3d;
  --cream: #f3eee3;
  --paper: #fbf9f3;
  --gold: #d9ba72;
  --gold-dark: #80631e;
  --ink: #12212b;
  --muted: #66727a;
  --line: rgba(14, 33, 46, 0.14);
  --live: #bf4058;
  --green: #267a4b;
}

body { background: var(--cream); color: var(--ink); }
[hidden], .love-board [hidden] { display: none !important; }

.love-intro {
  min-height: 220px;
  padding: 26px max(7.5vw, 32px) 0;
  background:
    radial-gradient(circle at 86% 2%, rgba(191, 64, 88, 0.22), transparent 30%),
    radial-gradient(circle at 55% 105%, rgba(217, 186, 114, 0.17), transparent 33%),
    linear-gradient(145deg, #061724, var(--navy));
  color: white;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-items: end;
  overflow: hidden;
}

.eyebrow { margin: 0 0 15px; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow.dark { color: var(--gold-dark); }
.radar-kicker { flex: 0 0 auto; width: fit-content; margin: 0; padding: 8px 12px 8px 10px; border: 1px solid rgba(217,186,114,.38); background: rgba(217,186,114,.07); color: #ead18f; font-size: .78rem; letter-spacing: .2em; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 11px; border-radius: 50%; background: #ed6078; box-shadow: 0 0 0 5px rgba(237,96,120,.12); vertical-align: 1px; animation: radar-pulse 1.8s ease-in-out infinite; }
.intro-heading { grid-column: 1 / -1; align-self: center; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); padding: 0; }
.love-intro h1 { margin: 0; max-width: none; font: 700 clamp(1.85rem, 2.55vw, 2.7rem)/1 "Playfair Display", serif; letter-spacing: -.035em; white-space: nowrap; }
.love-intro h1 span { color: var(--gold); }
.love-intro-copy { grid-column: 1 / -1; align-self: center; display: flex; justify-content: flex-start; padding: 0; }
.freshness { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.65); font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.freshness > span { width: 7px; height: 7px; border-radius: 50%; background: #64ca86; box-shadow: 0 0 0 5px rgba(100,202,134,.12); }
.freshness > span.delayed { background: var(--gold); box-shadow: 0 0 0 5px rgba(217,186,114,.12); }
.freshness.stale { color: rgba(255,255,255,.8); }
.freshness > span.offline { background: var(--live); box-shadow: none; }

.live-summary { grid-column: 1 / -1; min-height: 62px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.14); background: rgba(3,13,21,.3); backdrop-filter: blur(5px); }
.live-summary > div { display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 12px; padding: 12px 28px; border-right: 1px solid rgba(255,255,255,.12); }
.live-summary > div:last-child { border-right: 0; }
.live-summary strong { color: white; font: 700 clamp(1.72rem, 2.45vw, 2.3rem)/1 "Playfair Display", serif; }
.live-summary span { color: rgba(255,255,255,.6); font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.love-board { max-width: 1580px; margin: 0 auto; padding: 24px max(5.5vw, 26px) 82px; background: linear-gradient(180deg, rgba(255,255,255,.28) 0, rgba(255,255,255,.28) 175px, transparent 175px); }
.board-topline { display: none; justify-content: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.board-topline.has-watched { display: flex; }
.board-mode { display: flex; gap: 8px; }
.board-mode button { border: 1px solid var(--line); background: rgba(255,255,255,.5); color: #52616a; padding: 11px 18px; font: 700 .72rem/1 "DM Sans", sans-serif; letter-spacing: .04em; cursor: pointer; }
.board-mode button[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: white; }

.auction-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sports time"; gap: 22px; align-items: end; padding: 17px 19px; border: 1px solid var(--line); border-top: 3px solid var(--gold); background: rgba(251,249,243,.92); box-shadow: 0 10px 28px rgba(7,27,43,.06); }
.board-heading { grid-area: time; display: flex; justify-content: flex-end; align-items: end; padding-top: 0; }
.time-control, .watch-type-control { text-align: right; }
.time-control > span, .watch-type-control > span, .sport-filter-wrap > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auction-controls .time-control > span, .auction-controls .watch-type-control > span, .auction-controls .sport-filter-wrap > span { color: var(--gold-dark); }
.time-control > div, .watch-type-control > div { display: flex; padding: 5px; border: 1px solid var(--line); background: rgba(255,255,255,.56); }
.time-control button, .watch-type-control button { min-width: 54px; border: 0; background: transparent; color: #52616a; padding: 11px 13px; font: 700 .72rem/1 "DM Sans", sans-serif; cursor: pointer; }
.time-control button.active, .watch-type-control button.active { background: var(--gold); color: var(--navy); }

.sport-filter-wrap { grid-area: sports; min-width: 0; margin: 0; }
.sport-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
.sport-filter button { flex: 0 0 auto; border: 1px solid var(--line); background: rgba(255,255,255,.52); color: #4b5962; padding: 11px 17px; font: 700 .71rem/1 "DM Sans", sans-serif; cursor: pointer; }
.sport-filter button:hover { border-color: rgba(7,27,43,.4); }
.sport-filter button.active { border-color: var(--navy); background: var(--navy); color: white; }

.love-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; margin-top: 22px; scroll-margin-top: 92px; }
.ranking-pagination { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ranking-pagination > span { color: var(--muted); font-size: .71rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ranking-pagination > div { display: flex; gap: 8px; }
.ranking-pagination button { min-width: 92px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: #52616a; padding: 11px 15px; font: 700 .72rem/1 "DM Sans", sans-serif; cursor: pointer; }
.ranking-pagination button:hover { border-color: rgba(7,27,43,.4); }
.ranking-pagination button.active { border-color: var(--navy); background: var(--navy); color: white; }
.ranking-pagination button:disabled { border-color: var(--line); background: rgba(255,255,255,.22); color: rgba(82,97,106,.42); cursor: default; }
.ranking-pagination .page-step { min-width: 84px; }
.love-card { min-width: 0; align-self: start; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); color: inherit; text-decoration: none; position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.love-card:hover, .love-card:focus-visible { transform: translateY(-5px); border-color: rgba(7,27,43,.32); box-shadow: 0 20px 50px rgba(9,29,43,.13); outline: none; }
.love-card.featured { grid-column: span 2; grid-row: auto; min-height: 500px; flex-direction: row; }
.love-rank { position: absolute; z-index: 3; top: 13px; left: 13px; min-width: 45px; height: 45px; display: grid; place-items: center; padding: 0 8px; background: var(--navy); color: white; font: 700 .76rem/1 "DM Sans", sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.13); }
.love-card.featured .love-rank { background: var(--gold); color: var(--navy); }
.love-image { position: relative; display: block; height: 295px; min-height: 0; padding: 0; overflow: hidden; isolation: isolate; background: #dedad1; }
.love-card.featured .love-image { flex: 0 0 57%; width: 57%; height: auto; min-height: 500px; padding: 0; background: #ebe6db; border-right: 1px solid var(--line); }
.love-image img { position: absolute; inset: 0; display: block; }
.love-image .love-image-backdrop { z-index: 0; width: 110%; height: 110%; max-width: none; object-fit: cover; transform: scale(1.04); filter: blur(16px) saturate(.72); opacity: .24; }
.love-image .love-image-main { z-index: 1; width: 100%; height: 100%; object-fit: contain; transform: scale(1.1); transition: transform .22s ease; }
.love-card.featured .love-image-backdrop { opacity: .15; }
.love-card.featured .love-image-main { transform: scale(1.04); }
.love-card:hover .love-image-main { transform: scale(1.12); }
.love-card.featured:hover .love-image-main { transform: scale(1.065); }
.auction-image-preview { position: fixed; z-index: 10000; width: min(490px, 44vw); height: min(700px, 78vh); padding: 10px; pointer-events: none; overflow: hidden; background: rgba(247,244,237,.985); border: 1px solid rgba(128,99,30,.35); box-shadow: 0 26px 74px rgba(3,18,29,.32); opacity: 0; transform: translateY(6px) scale(.988); transition: opacity .15s ease, transform .15s ease; }
.auction-image-preview.show { opacity: 1; transform: translateY(0) scale(1); }
.auction-image-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-fallback { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold); font: 700 1.2rem "DM Sans", sans-serif; }
.sport-badge { position: absolute; z-index: 2; right: 13px; bottom: 13px; padding: 8px 10px; background: rgba(7,27,43,.9); color: white; font: 700 .61rem/1 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(5px); }
.love-copy { flex: 1; display: flex; flex-direction: column; padding: 20px 21px 0; }
.love-card.featured .love-copy { min-width: 0; padding: 32px 29px 0; }
.love-meta-line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--gold-dark); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.love-meta-line strong { color: var(--live); font: inherit; }
.love-meta-line strong.urgent { padding-left: 14px; position: relative; }
.love-meta-line strong.urgent::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--live); animation: pulse 1.4s ease-in-out infinite; }
.love-copy h3 { margin: 0; font: 700 1.08rem/1.34 "Playfair Display", serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.love-card.featured .love-copy h3 { font-size: clamp(1.3rem, 1.55vw, 1.62rem); line-height: 1.3; -webkit-line-clamp: 4; }
.love-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 20px; padding: 17px 0 19px; border-top: 1px solid var(--line); }
.love-stat { min-width: 0; }
.love-stat strong { display: block; overflow: hidden; color: var(--navy); font-size: 1rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.love-stat span { display: block; margin-top: 5px; color: var(--muted); font-size: .61rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
.love-stat.primary strong { color: var(--live); font-size: 1.22rem; }
.love-stat.primary.watched strong { color: var(--live); }
.card-action { min-height: 48px; margin-top: auto; margin-inline: -21px; padding: 14px 21px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--muted); font-size: .66rem; }
.love-card.featured .card-action { margin-inline: -27px; padding-inline: 27px; }
.love-card.featured .love-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 25px; padding-top: 22px; }
.love-card.featured .love-stat.end-time { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
.love-card.featured .love-stat strong { font-size: 1.13rem; }
.love-card.featured .love-stat.primary strong { font-size: 1.55rem; }
.love-card.featured .card-action { min-height: 58px; }
.card-action > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-action strong { flex: 0 0 auto; color: var(--navy); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.card-action b { margin-left: 4px; color: var(--gold-dark); font-size: 1rem; }
.activity-up { color: var(--green); font-weight: 700; }

.love-status, .empty-state { min-height: 330px; margin-top: 27px; border: 1px dashed rgba(14,33,46,.22); display: grid; place-items: center; align-content: center; gap: 13px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--navy); font: 700 1.35rem "Playfair Display", serif; }
.empty-state span { font-size: .88rem; }
.love-status p { margin: 0; }
.radar-loader { width: 50px; height: 50px; padding: 8px; border: 1px solid rgba(191,64,88,.25); border-radius: 50%; animation: radar-spin 2.4s linear infinite; }
.radar-loader span { display: block; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(191,64,88,.75)); }
.radar-loader.stopped { animation: none; opacity: .5; }

.love-explainer { background: var(--navy); color: white; padding: 27px max(6vw, 28px); display: flex; justify-content: center; align-items: baseline; gap: 20px; text-align: center; }
.love-explainer strong { color: var(--gold); font: 700 .72rem/1 "DM Sans", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.love-explainer p { margin: 0; color: rgba(255,255,255,.67); font-size: .82rem; line-height: 1.5; }

@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
@keyframes radar-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 5px rgba(237,96,120,.12); } 50% { opacity: .72; box-shadow: 0 0 0 9px rgba(237,96,120,.03); } }

@media (max-width: 1080px) {
  .love-intro h1 { font-size: clamp(1.7rem, 2.5vw, 2.2rem); }
  .radar-kicker { font-size: .7rem; letter-spacing: .16em; }
  .love-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .love-card.featured { grid-column: span 2; grid-row: auto; }
  .love-card.featured .love-image { flex-basis: 55%; width: 55%; }
}

@media (max-width: 820px) {
  .love-intro { min-height: auto; gap: 14px; padding-top: 28px; }
  .intro-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .love-intro h1 { font-size: clamp(2.35rem, 7vw, 3.25rem); white-space: normal; }
  .love-intro-copy { justify-content: flex-start; }
  .intro-heading, .love-intro-copy { padding-bottom: 0; }
  .live-summary { margin-inline: calc(-1 * max(7.5vw, 32px)); }
  .auction-controls { grid-template-columns: 1fr; grid-template-areas: "time" "sports"; gap: 16px; }
  .board-heading { justify-content: flex-start; align-items: start; }
  .time-control, .watch-type-control { text-align: left; }
  .time-control > div, .watch-type-control > div { width: fit-content; }
  .love-explainer { flex-direction: column; align-items: center; gap: 8px; }
}

@media (max-width: 590px) {
  .love-intro { gap: 13px; padding: 24px 20px 0; }
  .love-intro h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .love-intro h1 span { display: block; }
  .love-intro-copy > p { display: none; }
  .radar-kicker { font-size: .67rem; letter-spacing: .15em; }
  .live-summary { margin-inline: -20px; min-height: 78px; }
  .live-summary > div { flex-direction: column; justify-content: center; gap: 5px; padding: 13px 10px; }
  .live-summary strong { font-size: 1.4rem; }
  .live-summary span { font-size: .54rem; letter-spacing: .08em; }
  .love-board { padding: 22px 16px 66px; }
  .auction-controls { padding: 14px; }
  .time-control, .watch-type-control { width: 100%; }
  .time-control > div, .watch-type-control > div { width: 100%; }
  .time-control button, .watch-type-control button { flex: 1; min-width: 0; padding-inline: 8px; }
  .love-grid { grid-template-columns: 1fr; gap: 16px; }
  .love-card.featured { grid-column: auto; min-height: 0; flex-direction: column; }
  .love-card.featured .love-image, .love-image { width: 100%; height: 285px; min-height: 0; flex-basis: auto; padding: 0; border-right: 0; }
  .love-card.featured .love-copy { padding: 20px 21px 0; }
  .love-card.featured .love-copy h3 { font-size: 1.28rem; }
  .love-card.featured .card-action { margin-inline: -21px; padding-inline: 21px; }
  .love-stats { gap: 9px; }
  .love-stat strong { font-size: .88rem; }
  .love-stat.primary strong { font-size: 1.08rem; }
  .end-time { display: none; }
  .love-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-pagination { align-items: flex-start; flex-direction: column; }
  .ranking-pagination > div { width: 100%; }
  .ranking-pagination button { flex: 1; min-width: 0; width: auto; padding-inline: 7px; font-size: .66rem; }
}

@media (hover: none), (pointer: coarse) {
  .auction-image-preview { display: none !important; }
}