/* ========== Base skin for iframe pages ========== */
html, body { height: 100%; }
body{
  margin:0; padding:6px;
  font-family: Verdana, sans-serif;
  font-size:14px;
  background:#0c0c0c;       /* darker to match replay cards */
  overflow:hidden;
  color:#eaeaea;
}

/* ========== Replay grid (kept) ========== */
.modern-video-page-center{ padding:12px 16px; }
.modern-videos-wrapper{ max-width:1200px; margin:0 auto; }
.replay-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width: 720px){ .replay-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1100px){ .replay-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1500px){ .replay-grid{ grid-template-columns:repeat(4, 1fr); } }

/* ========== Replay card (unchanged style) ========== */
.replay-card{
  border-radius:14px;
  background: linear-gradient(180deg,#1a1a1a,#131313);
  border:1px solid #ffffff1a;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  padding:10px; display:flex; flex-direction:column; gap:8px;
}

/* ========== Race block mapped to replay aesthetic via variables ========== */
.race-block{
  --card-bg: linear-gradient(180deg,#1a1a1a,#131313); /* default if no theme */
  --card-bdr:#243224;  /* default border tint */
  --line-bdr:#1a241a;  /* default line border */
  --chip-bdr:#2e3b2f;  /* default chip border */
  --hint:#bdbdbd;      /* default hint color */

  border-radius:14px;
  background: var(--card-bg);
  border:1px solid var(--card-bdr);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px var(--line-bdr);
  padding:12px; display:flex; flex-direction:column; gap:8px;
  transition: transform .12s ease; height:100%;
}
.race-block:hover{ transform: translateY(-2px); }
.race-block.is-clickable{ cursor:pointer; }

/* Title + lines on dark */
.race-block h3{ margin:0 0 8px; font-size:1.02rem; color:#fff; text-align:center; font-weight:700; }
.race-line{
  border:1px solid var(--line-bdr);
  background:#0f0f0f;
  border-radius:10px;
  padding:6px 8px; margin:0; line-height:1.45; color:#eaeaea;
}
.race-line strong{ color:#fff; }

/* Small hint text */
.hint{ color:var(--hint); font-size:.86rem; }

/* Icons (theme can override) */
.race-line::before{ content:"⭐ "; font-size:13px; margin-right:3px; opacity:.95; }

/* Fallback + scheduled chip */
.replay-scheduled, .fallback{
  border:1px dashed var(--chip-bdr);
  background:#121612; color:#e5e5e5; border-radius:10px; padding:6px 8px;
}
.fallback{ text-align:center; font-style:italic; }

/* Maintenance blink (red accent) */
@keyframes softBlink{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,57,53,.0), inset 0 0 0 1px #e53935; } 50%{ box-shadow:0 0 16px 2px rgba(229,57,53,.35), inset 0 0 0 1px #ff6f61; } }
.is-maintenance{ animation: softBlink 1.6s infinite; }

/* Optional top accent stripe */
.race-block.has-stripe{ position:relative; }
.race-block.has-stripe::before{
  content:""; position:absolute; left:10px; right:10px; top:8px; height:3px; border-radius:3px;
  background: var(--stripe, linear-gradient(90deg,#444,#222)); opacity:.9;
}

/* ========== Thumbnails (kept) ========== */
.thumbcell{ display:flex; }
.thumb{ position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; cursor:pointer; border-radius:10px; overflow:hidden; background:#0e0e0e; padding:0; box-shadow:0 3px 10px rgba(0,0,0,.25); transition:transform .12s ease; }
.thumb:hover{ transform: translateY(-2px); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .play, .thumb .ext{ position:absolute; right:6px; bottom:6px; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:#000000b0; color:#fff; font-size:.95rem; }

/* ========== Header bits (kept) ========== */
.replay-card-header{ display:flex; flex-direction:column; gap:4px; border-bottom:1px solid #ffffff10; padding-bottom:6px; }
.replay-date{ color:#bdbdbd; font-weight:600; }
.replay-series{ margin:0; font-size:1.02rem; color:#fff; }
.replay-circuit{ color:#eaeaea; }

/* ========== Buttons (kept) ========== */
.replay-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.btn-watch, .btn-yt{ display:inline-flex; align-items:center; gap:.5rem; background:#ffffff12; border:1px solid #ffffff24; color:#fff; padding:7px 10px; border-radius:10px; text-decoration:none; font-weight:700; transition: background .15s ease, transform .08s ease; }
.btn-watch:hover, .btn-yt:hover{ background:#ffffff18; transform: translateY(-1px); }

/* ========== Lightbox (kept) ========== */
.ytbox[hidden]{ display:none; }
.ytbox{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; }
.ytbox__backdrop{ position:absolute; inset:0; background:#000000cc; backdrop-filter: blur(2px); }
.ytbox__dialog{ position:relative; width:min(92vw, 960px); aspect-ratio:16/9; background:#000; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden; transform: scale(.98); animation: yt-pop .18s ease-out forwards; }
@keyframes yt-pop{ to{ transform: scale(1); } }
.ytbox__close{ position:absolute; top:8px; right:8px; z-index:2; width:36px; height:36px; border-radius:999px; border:0; cursor:pointer; background:#00000088; color:#fff; display:grid; place-items:center; }
.ytbox__frame{ position:absolute; inset:0; }
.ytbox__frame iframe{ width:100%; height:100%; border:0; display:block; }
.ytbox__open{ position:absolute; left:12px; bottom:10px; z-index:2; color:#fff; background:#00000066; padding:6px 10px; border-radius:8px; text-decoration:none; font-weight:600; }
.ytbox__open:hover{ background:#00000088; }

/* ========== Day themes (3 colors + optional reserve) ========== */
.theme-mon{
  --card-bg:  linear-gradient(180deg,#161f18,#0f0f0f);
  --card-bdr: #2a4f36; --line-bdr:#1c2f23; --chip-bdr:#2e4d3c; --hint:#a9e6b0;
  --stripe:   linear-gradient(90deg,#35c759,#0db15a);
}
.theme-thu{
  --card-bg:  linear-gradient(180deg,#0f1e2b,#0f0f0f);
  --card-bdr: #1f3e5a; --line-bdr:#162b3d; --chip-bdr:#2b4e69; --hint:#9ad1ff;
  --stripe:   linear-gradient(90deg,#3aa0ff,#2d79c7);
}
.theme-oth{
  --card-bg:  linear-gradient(180deg,#231522,#0f0f0f);
  --card-bdr: #4a2f3a; --line-bdr:#3a2430; --chip-bdr:#5a3a48; --hint:#f0b7cf;
  --stripe:   linear-gradient(90deg,#e86ca7,#b24b80);
}
.theme-res{ /* optional reserve/result theme */
  --card-bg:  linear-gradient(180deg,#710909,#561b1b);
  --card-bdr: #7a2e2e; --line-bdr:#5a2020; --chip-bdr:#8c3a3a; --hint:#ffb0b0;
  --stripe:   linear-gradient(90deg,#ff6363,#d63838);
}

/* Theme icon mapping */
.theme-mon .race-line::before{ content:"🏁 "; }
.theme-thu .race-line::before{ content:"🕓 "; }
.theme-oth .race-line::before{ content:"⭐ "; }
.theme-res .race-line::before{ content:"⏳ "; }

/* Legacy theme aliases (safe no-op if unused) */
.theme-green{ /* map to Monday */ }
.theme-green .race-line::before{ content:"🏁 "; }
.theme-blue{ /* map to Thursday */ }
.theme-blue  .race-line::before{ content:"🕓 "; }
.theme-alert{ border-color:#e53935 !important; }

/* Mobile tweak */
@media (max-width: 720px){ .replay-grid{ grid-template-columns:1fr; } }