/* Cornerpins results site. Path: public/css/results-site.css
   The structure is the Intercity Shield results site (results.tbnq.org.au:
   header, stadium hero with pill tabs, dark cards). The colours and type are
   the ANC scoring display's (public/css/scoring-display.css): near black
   ground with the red glow, Corner Pin Standings purple for the chrome,
   green wins, amber, purple draws, Anton for headings and Poppins for text.
   Phone first at 360px. Prefixes rt- (site), lv- (event pages), ri- (index)
   as on the Intercity site; nothing here reaches the rest of the application. */

:root {
  --rs-bg: #0a0a0d;
  --rs-panel: rgba(255, 255, 255, 0.04);
  --rs-panel-2: rgba(255, 255, 255, 0.07);
  --rs-line: rgba(255, 255, 255, 0.10);
  --rs-text: #f4f4f6;
  --rs-muted: #9a9aa4;
  --rs-red: #dc2626;
  --rs-green: #22c55e;
  --rs-amber: #f59e0b;
  --rs-purple: #a855f7;
  --rs-brand: #6d28d9;
  --rs-brand-light: #7c3aed;
  --rs-display: 'Anton', 'Poppins', Impact, sans-serif;
  --rs-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.rs-body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, #1a0508 0%, var(--rs-bg) 60%) fixed, var(--rs-bg);
  color: var(--rs-text);
  font-family: var(--rs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rs-brand-light); text-decoration: none; }
[hidden] { display: none !important; }

/* Header */
.rt-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(10, 10, 13, 0.92); backdrop-filter: blur(10px); border-bottom: 2px solid var(--rs-brand); }
.rt-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; color: var(--rs-text); }
.rt-brand-logo { height: 30px; width: auto; flex: 0 0 auto; }
.rt-brand-stack { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.rt-brand-line1 { font-family: var(--rs-display); font-size: clamp(12px, 3.6vw, 19px); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.rt-brand-line2 { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rs-muted); }
.rt-nav { display: flex; gap: 14px; flex: 0 0 auto; }
.rt-nav a { color: var(--rs-text); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; white-space: nowrap; }
.rt-nav a:hover { opacity: 1; }

/* Main and footer */
.rt-main { max-width: 1240px; margin: 0 auto; padding: 16px 16px 40px; }
.rt-footer { max-width: 1240px; margin: 0 auto; padding: 18px 16px 28px; border-top: 1px solid var(--rs-line); display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--rs-muted); }
.rt-footer-meta { text-align: right; }

/* Hero: the stadium band across the top of every results page. */
.lv-hero { margin: -16px -16px 18px; padding: 20px 16px 0; background: radial-gradient(900px 320px at 15% -30%, rgba(109, 40, 217, 0.45) 0%, rgba(26, 5, 8, 0.9) 55%, rgba(10, 10, 13, 0.4) 100%); border-bottom: 3px solid var(--rs-brand); }
.lv-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; }
.lv-hero-text { min-width: 0; }
.lv-title { margin: 6px 0 4px; font-family: var(--rs-display); font-weight: 400; font-size: clamp(30px, 9vw, 54px); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.lv-sub { font-size: 13px; color: var(--rs-muted); }
.lv-sep { opacity: 0.5; margin: 0 6px; }
.lv-logo { height: 72px; max-width: 140px; object-fit: contain; flex: 0 0 auto; }
.lv-live-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #fca5a5; }
.lv-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rs-red); animation: lv-pulse 1.4s ease-out infinite; }
@keyframes lv-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 70% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.lv-final-badge { color: var(--rs-green); }
.lv-final-badge::before { content: ''; width: 12px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3v18' stroke='%2322c55e' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 4h13l-3 4.5 3 4.5H6z' fill='%2322c55e'/%3E%3C/svg%3E"); }

/* Pill tabs: in the hero on the dark, and as sub tabs under it. */
.lv-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1180px; margin: 16px auto 0; padding-bottom: 12px; }
.lv-subrow { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-divtab { border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: var(--rs-text); padding: 8px 14px; border-radius: 999px; font-family: var(--rs-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.lv-divtab:active { transform: scale(0.97); }
.lv-divtab[aria-selected="true"] { background: linear-gradient(135deg, var(--rs-brand), var(--rs-brand-light)); border-color: var(--rs-brand-light); color: #fff; box-shadow: 0 0 18px rgba(124, 58, 237, 0.45); }
.lv-fitrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 100%; overflow: hidden; }
.lv-fitrow .lv-divtab { min-width: 0; padding: 8px 2px; font-size: clamp(9px, 2.8vw, 13px); text-align: center; white-space: nowrap; overflow: hidden; }

.lv-block { max-width: 1180px; margin: 0 auto 26px; }
.lv-h2 { font-family: var(--rs-display); font-weight: 400; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rs-text); margin: 0 0 10px; }
.lv-empty { padding: 18px; background: var(--rs-panel); border-radius: 12px; color: var(--rs-muted); font-size: 14px; border: 1px dashed var(--rs-line); }

@media (max-width: 420px) {
  .rt-nav { gap: 10px; }
  .rt-nav a { font-size: 10px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-live-dot { animation: none; }
}

/* ---- Index ---------------------------------------------------------------- */
.ri-filters { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
/* Competition names are long (a tour's full name): the pills share a row when
   they fit and a long one takes its own line, never cut off. */
.ri-filters .lv-fitrow { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
.ri-filters .lv-fitrow .lv-divtab { flex: 1 1 auto; padding: 8px 14px; font-size: 13px; }
.ri-year { font-family: var(--rs-display); font-weight: 400; font-size: 20px; letter-spacing: 0.1em; color: var(--rs-muted); margin: 26px 0 10px; }
.ri-year:first-child { margin-top: 0; }
.ri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ri-card { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; background: linear-gradient(160deg, rgba(109, 40, 217, 0.16), rgba(255, 255, 255, 0.03) 55%); color: var(--rs-text); border: 1px solid var(--rs-line); border-left: 5px solid var(--rs-brand-light); border-radius: 14px; padding: 11px 14px; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; opacity: 0; transform: translateY(10px); animation: ri-in 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ri-card:hover, .ri-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.45); }
.ri-card.ri-carnival { border-left-color: var(--rs-red); background: linear-gradient(160deg, rgba(220, 38, 38, 0.14), rgba(255, 255, 255, 0.03) 55%); }
.ri-card.ri-soon { cursor: default; }
@keyframes ri-in { to { opacity: 1; transform: translateY(0); } }
.ri-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ri-logo { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.ri-name { font-family: var(--rs-display); font-weight: 400; font-size: 22px; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ri-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
.ri-tag { background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.ri-tag-soon { background: rgba(245, 158, 11, 0.16); color: var(--rs-amber); }
.ri-date { color: var(--rs-muted); }
@media (max-width: 420px) { .ri-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ri-card { animation: none; opacity: 1; transform: none; } }