/* Maple ReAnimated temporary splash (reanimated/index.html, Derek 2026-10-16): the gameplay loop
   fills the screen, the logo + Play sit over it, the rankings ride on the right (below on narrow
   screens), and the footer's family row stays at the bottom like the Maker's status bar.
   The rankings markup and layout come from home.css; here they're re-skinned as dark glass so they
   sit ON the video instead of a cream box over it (Derek: "too blocky"). Splash only. */
body.splash { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.splash-main { flex: 1; display: flex; }
.splash .mr-foot { margin-top: 0; }

.reel { position: relative; flex: 1; display: flex; min-height: 560px; overflow: hidden; background: #0d1420; isolation: isolate; }
.reel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; image-rendering: auto; }
/* legibility: darker behind the logo (left) and the bottom edge, the middle left clear for the game */
.reel-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,12,22,.62) 0%, rgba(8,12,22,.28) 42%, rgba(8,12,22,.08) 62%, rgba(8,12,22,.32) 100%),
              linear-gradient(0deg, rgba(8,12,22,.45) 0%, rgba(8,12,22,0) 30%); }
.reel-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 450px); gap: 32px; align-items: center; padding-block: 36px; }

.pitch { display: grid; gap: 18px; justify-items: start; max-width: 600px; }
.pitch .logo { filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.pitch .sub { color: #fff; font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.btn.play.big { font-size: 20px; padding: 14px 34px; box-shadow: 0 4px 0 var(--leaf-lo), 0 10px 24px rgba(0,0,0,.35); }
.pitch .chips li { color: #fff; background: rgba(8,12,22,.45); border-color: rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.chips li[hidden] { display: none; }

/* ── the rankings as dark glass ── */
.splash .rank { --glass-line: rgba(255,255,255,.12); color: #fff;
  background: linear-gradient(180deg, rgba(14,20,34,.62), rgba(14,20,34,.74));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.38); padding: 20px 20px 16px;
  max-height: calc(100svh - 200px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.splash .rank h2 { color: #fff; font-size: 22px; margin-bottom: 12px; }
.splash .rank h2 small { color: rgba(255,255,255,.6); }
.splash .seg { background: rgba(255,255,255,.08); border-color: var(--glass-line); }
.splash .seg button { color: rgba(255,255,255,.72); }
.splash .seg button[aria-selected="true"] { background: #fff; color: var(--ink); }
.splash .find input { width: 160px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.splash .find input::placeholder { color: rgba(255,255,255,.55); }
.splash .find input:focus { outline: none; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }

.splash .podium li { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid var(--glass-line); border-radius: 12px; }
.splash .podium li:first-child { border-color: rgba(255,196,92,.75); box-shadow: 0 0 0 1px rgba(255,196,92,.35), 0 0 18px rgba(255,180,60,.22); }
.splash .podium .r { color: rgba(255,255,255,.55); }
.splash .podium li:first-child .r { color: #ffc45c; }
.splash .podium b { color: #fff; }
.splash .podium small { color: rgba(255,255,255,.62); }
.splash .podium .pic .ph { background: rgba(255,255,255,.1); }
.splash .podium .pic img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

.splash .board { font-size: 14px; }
.splash .board th { color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.18); }
.splash .board td { border-bottom: 1px solid rgba(255,255,255,.07); }
.splash .board tbody tr:last-child td { border-bottom: 0; }
.splash .board tbody tr:hover td { background: rgba(255,255,255,.05); }
.splash .board tr.hit td { background: rgba(255,196,92,.16); }
.splash .board .pos, .splash .board .pct { color: rgba(255,255,255,.5); }
.splash .board .act { width: 140px; }
.splash .rank .btn.sm { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); }
.splash .rank .btn.sm:hover { background: rgba(255,255,255,.2); }
.splash .podium .open { background: rgba(255,255,255,.94); color: var(--ink); border-color: transparent; }
.splash .rank .muted { color: rgba(255,255,255,.58); }
.splash .rank .muted b { color: rgba(255,255,255,.85); }
.splash .rank .tag.sample { color: #ffc45c; }
/* touch: the podium's own Open button would sit over the name; the rows below have one */
@media (hover: none) { .splash .podium .open { display: none; } }

/* narrow: the video becomes a banner that fades into the dark page; the rankings follow below */
@media (max-width: 980px) {
  .reel { display: block; min-height: 0; }
  .reel-bg, .reel-shade { height: min(78svh, 640px); }
  .reel-shade { background: linear-gradient(0deg, #0d1420 0%, rgba(13,20,32,.55) 22%, rgba(8,12,22,.12) 60%, rgba(8,12,22,.3) 100%); }
  .reel-in { display: block; padding-block: 0 28px; }
  .pitch { min-height: min(78svh, 640px); align-content: end; justify-items: center; text-align: center; margin: 0 auto; padding-bottom: 24px; }
  .pitch .chips { justify-content: center; }
  .splash .rank { max-height: none; overflow: visible; margin-top: 12px; background: rgba(255,255,255,.05); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}
@media (max-width: 560px) {
  .pitch .sub { font-size: 16px; }
  .btn.play.big { font-size: 18px; padding: 13px 28px; }
  .splash .rank { padding: 16px 14px 12px; }
  .splash .find { flex: 1; }
  .splash .find input { width: 100%; }
  .splash .board .act { width: auto; }
}