/* ============================================================================
   TOO MANY ME — the game's night. Theme over the shared game-page layout.
     RED  = action and marks: the Me's bandana.
     BLUE = narrative accent: the trails each jump draws.
   ============================================================================ */

:root{
  --bg: #070b14;
  --panel: #0f1626;
  --line: #22304a;
  --text: #eef2f8;
  --muted: #93a1b8;
  --accent: #e23b3b;
  --on-accent: #fff;
  --soft: #7fb4ff;
}

body{
  background:
    radial-gradient(120% 60% at 80% -10%, rgba(80,120,220,.22), transparent 60%),
    radial-gradient(90% 50% at -10% 30%, rgba(200,40,40,.16), transparent 60%),
    var(--bg);
}

.brand img{ border-radius: 7px; }

/* The trailer waits behind its poster: nothing loads from Vimeo before the click. */
.trailer{ position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: #000 center / cover; }
.trailer::after{
  content: "▶"; position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; color: #fff;
  background: rgba(226,59,59,.92); box-shadow: 0 0 0 10px rgba(226,59,59,.25);
}
.trailer:hover::after, .trailer:focus-visible::after{ transform: scale(1.06); }
.frame iframe{ display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.download{
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.download h2{ margin: 0; }
.download p{ margin: .3rem 0 0; color: var(--muted); }

/* The public download total: hidden until the site's API answers. */
p.download-count{ margin: .6rem 0 0; font: 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.download-count strong{ color: var(--soft); font-weight: 700; font-size: 15px; }