:root{
      --fade-ms: 1200;
      --slide-ms: 8000;
      --bg-dim: 0.55; /* background darken overlay */
    }
    html, body { height: 100%; }
    body {
      margin: 0; background:#0b0b0b; color:#fff; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      overflow: hidden;
    }
    .root { position: relative; width: 100vw; height: 100vh; }

    /* --- Background crossfade (two layers swap) --- */
    .bg { position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition:opacity calc(var(--fade-ms)*1ms) linear; filter:saturate(0.9); }
    .bg::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--bg-dim)); }
    .bg.visible{ opacity:1; }

    /* --- Watermark --- */
    .watermark { position:absolute; left:20px; bottom:20px; font-size:20px; opacity:.7; user-select:none; z-index: 3; }
    .watermark span{ background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); padding:.35rem .55rem; border-radius:.5rem; backdrop-filter:saturate(110%) blur(2px); }
    .wm-strong{ font-weight:600; }
 .watermark sup {     font-size: 12px;
    color: #333!important;
    margin-left: 3px; font-weight:bold }

.return-link { font-size:15px; text-align:center; margin-top:10px; color:#666 }
.return-link a { color:#666}
.return-link a:hover { text-decoration:none }
.watermark-right {
  left: auto;               /* override left positioning */
  right: 20px;              /* anchor to right edge */
  bottom: 20px;             /* same height from bottom */
  text-align: right;        /* align text flush to right */
  z-index: 3;               /* ensure it floats above */
}

.watermark-right .return-link {
  text-align: right;        /* align link text as well */
}




    /* --- Center Card --- */
    .center { position:absolute; inset:0; display:grid; place-items:center; padding:16px; z-index:2; }
.card { 
  position: absolute; /* stack the two cards */
  width:min(860px,80vw);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  box-shadow:0 12px 42px rgba(0,0,0,.45);
  padding:22px 24px;
  opacity:0;
    transition: opacity calc(var(--fade-ms)*1ms) linear;

  pointer-events:none; /* it’s a screensaver */
}
.card.visible{ opacity:1; }
    .card h1{ margin:.1rem 0; font-size:clamp(22px,3.5vw,30px); font-weight:650; letter-spacing:.02em; }
    .card h2{ margin:.2rem 0; font-size:clamp(18px,3vw,26px); opacity:.95; font-weight:500 }
    .card h3{ margin:.2rem 0; font-size:clamp(16px,2.4vw,22px); opacity:.9; font-weight:100 }
    .card h4{ margin:.2rem 0; font-size:clamp(15px,2.2vw,20px); opacity:.85; font-weight:100 }
    .card h5 { margin:.2rem 0; font-size:clamp(13px,2vw,18px); opacity:.82;font-weight:300 }
    .card h6{ margin:.2rem 0; font-size:clamp(13px,2vw,18px); opacity:.82; font-weight:600 }

    .badge{ display:inline-block; margin-top:.4rem; font-size:clamp(11px,1.8vw,15px); padding:.25rem .5rem; border-radius:999px; border:1px solid rgba(251,191,36,.35); background:rgba(251,191,36,.18); }

    /* --- Logo Intro --- */
    .logo-wrap{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
    .logo-ring{ width: 200px; height: 200px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 48px rgba(0,0,0,.55); }
    .logo {
  width: 200px;
  height: 200px;
  object-fit: cover;          /* fills the circle neatly */
  border-radius: 50%;         /* makes it circular */
  overflow: hidden;           /* ensures clean edges */
  opacity: 0;
  transform: scale(.92);
  transition: opacity 500ms ease, transform 500ms ease;
}

    .logo.visible{ opacity:1; transform:scale(1); }
    .brand{ font-size:11px; letter-spacing:.5em; opacity:.7 }

    /* --- Progress --- */
    .progress{ position:absolute; top:12px; right:18px; font-size:10px; opacity:.7; }

    /* --- Skeleton --- */
    .skeleton{ width:min(780px,92vw); height:142px; border-radius:16px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size:200% 100%; animation:shimmer 1.4s infinite; border:1px solid rgba(255,255,255,.1); }
    @keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.skeleton { display: none; }

.controls { display:flex; gap:10px; justify-content:flex-end; margin-bottom:8px; }
.pill {
  appearance:none; border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35); color:#eee; font:inherit;
  padding:.35rem .7rem; border-radius:999px; cursor:pointer;
  backdrop-filter:saturate(110%) blur(2px);
}
.pill:hover { border-color:rgba(255,255,255,.35); }

/* Hide info on certain records.
.card[data-rec-id="highest_single_truck_score"] p,
.card[data-rec-id="fewest_avg_claims_90"] p,
.card[data-rec-id="most_trucks_thrown_90"] p,
.card[data-rec-id="most_2x_days"] p,
.card[data-rec-id="largest_2x_day"] p,
.card[data-rec-id="most_trucks_90_in_season"] p { display:none; visibility: hidden }
*/


.card p {font-weight:100; opacity:0.5}

.card[data-rec-id="sub_hour_kings"] h2, .card[data-rec-id="two_x_legends"] h2 { font-weight: 300; font-size: clamp(16px,2.4vw,22px); }

.card[data-rec-id="most-legendary-throws"] h4 {
  margin:.2rem 0; font-size:clamp(18px,3vw,26px); opacity:.95; font-weight:500
}

.card[data-rec-id="most-legendary-throws"] h5 {
  margin:.2rem 0; font-size:clamp(16px,2.4vw,22px); opacity:.9; font-weight:100
}


.truncate-sentence {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* visually keep first line */
  overflow: hidden;
  text-overflow: ;
}

/* 0) Kill the iOS "extra space": use dynamic viewport units */
.root {
  height: 100dvh;          /* iOS/Android correct viewport height */
  min-height: 100vh;       /* fallback */
}

/* --- Mobile & small-screen refinement --- */
@media (max-width: 640px) {
  /* Controls on top-left */
  .watermark-right {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 10px);
    left: calc(env(safe-area-inset-left) + 12px);
    right: auto;
    bottom: auto;
    text-align: left;
    z-index: 5;
  }

  .watermark-right .controls {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 4px; /* small gap above credit */
  }

  /* Credit directly below controls */
  #trackCredit {
    position: relative;
    display: block;
    text-align: left;
    font-size: 10px;         /* match counter font */
    opacity: .7;             /* match subtle counter opacity */
    margin-left: 2px;
    line-height: 1.1;
  }

  #trackCredit a {
    color: #aaa;
    text-decoration: none;
  }
  #trackCredit a:hover {
    text-decoration: underline;
  }

  /* Slightly smaller pills on mobile */
  .pill {
    padding: .3rem .55rem;
    font-size: 16px;
  }
}

/* Allow scroll on very short landscape */
@media (orientation: landscape) and (max-height: 480px) {
  html, body { height: auto; }
  body { overflow: auto; }
  .root { height: auto; min-height: 100dvh; }
  .center { padding: 10px; }
  .card { width: min(920px, 92vw); }
}


/* Robust viewport sizing across iOS/Android (fixes “scrunched” landscape) */
html, body { height: 100%; min-height: 100dvh; }
.root {
  min-height: 100dvh;       /* dynamic vh => no phantom space */
  height: auto;             /* allow growth if content taller */
}

/* Keep background & cards happy while allowing scroll when needed */
.center { min-height: calc(100dvh - 24px); }

/* Landscape rescue: short screens get scroll, footer pushed below */
@media (orientation: landscape) and (max-height: 560px) {
  html, body { height: auto; min-height: 100dvh; }
  body { overflow: auto; }                     /* enable page scroll */
  .root { min-height: 100dvh; height: auto; }
  .center { min-height: calc(100dvh - 24px); padding: 10px; }
}

/* If you have a <footer>, ensure it sits after content */
footer { margin-top: auto; }

/* Safe-area padding so nothing collides with mobile chrome */
@supports (padding: max(0px)) {
  .root { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* if your .card (or its parent) has pointer-events: none, restore clicks for links */
.card .link-wrap,
.card .link-wrap a {
  pointer-events: auto;
}

/* basic styling */
.card .link-wrap {
  margin-top: 0.8em;
  text-align: center;
}
.card .link-wrap a {
  font-weight: 600;
  text-decoration: none;
color:#FFF;
font-size:.9em;
}
.card .link-wrap a:hover {
  text-decoration: underline;
}

.eternal-flame {
  position: relative;               /* make ::before position against this */
  display: inline-block;            /* so the halo hugs the icon */
  vertical-align: top;           /* line up better with “The Eternal Flame” text */
  margin-right: 0.35em;             /* little gap before the text */
margin-top:10px;
  color: #ff8800;
  animation: flameChaos 0.12s infinite alternate;
  filter: drop-shadow(0 0 6px #ff6a00);
}

@keyframes flameChaos {
  0%   { transform: scale(1)     rotate(0deg);    color:#ff7800; }
  25%  { transform: scale(1.06)  rotate(-1deg);   color:#ff9a00; }
  50%  { transform: scale(0.97)  rotate(1deg);    color:#ff6a00; }
  75%  { transform: scale(1.05)  rotate(-0.5deg); color:#ffaa00; }
  100% { transform: scale(1)     rotate(0.5deg);  color:#ff8200; }
}

.eternal-flame::before {
  content:"";
  position:absolute;
  inset: -6px;  /* equal padding all around the icon */
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,150,0,0.4), transparent);
  z-index:-1;
  animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}