/* Long Drive v4 (2026-10-20): cinematic night launch screen + single BeginThings credit. Additions only. */
#menu { --ink-light: #f3f5f9; --muted-light: rgba(214, 222, 236, .72); --glass-light: rgba(14, 18, 26, .52); --line-light: rgba(255, 255, 255, .12); }
#menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 90% at 22% 50%, rgba(3, 5, 9, .62) 0%, rgba(3, 5, 9, .28) 42%, rgba(3, 5, 9, 0) 70%),
              linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .45) 100%); }
#menu .title { color: #f6f7fb; text-shadow: 0 2px 28px rgba(0, 0, 0, .55); }
#menu .title span { text-shadow: 0 0 34px rgba(230, 74, 46, .45); }
#menu .tagline { color: rgba(220, 228, 242, .78); }
#menu .nav-card:not(.primary), #menu .mode-chip { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
#menu .nav-card:not(.primary):hover, #menu .mode-chip:hover { border-color: rgba(255, 255, 255, .28); box-shadow: 0 16px 42px rgba(0, 0, 0, .45); }
#menu .select-panel { background: rgba(10, 13, 19, .9); box-shadow: -24px 0 70px rgba(0, 0, 0, .5); color: var(--ink-light); }
#menu .select-panel .x:hover { background: rgba(255, 255, 255, .08); }
#menu .card { background: rgba(22, 27, 37, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
#menu .build-stamp { color: rgba(220, 228, 242, .3); }
#ld-load .bar { background: rgba(255, 255, 255, .14); }
#ld-load small { color: rgba(220, 228, 242, .66); }
/* the ONE credit: "Long Drive — powered by BeginThings" → beginthings.com */
.ld-credit { position: fixed; right: 20px; bottom: 16px; z-index: 41; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 10px;
  border-radius: 999px; background: rgba(10, 12, 18, .5); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(236, 240, 247, .86); font: 500 12px/1.2 var(--font-display, system-ui), system-ui, sans-serif; letter-spacing: .4px; text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease; }
.ld-credit:hover, .ld-credit:focus-visible { background: rgba(10, 12, 18, .78); color: #fff; transform: translateY(-1px); }
.ld-credit img { height: 16px; width: auto; display: block; opacity: .92; }
.ld-credit b { font-weight: 700; color: #fff; }
.ld-credit .sep { opacity: .5; }
body.playing .ld-credit { display: none; }
.about-credit { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 16px; color: inherit; font-weight: 600; text-decoration: none; }
.about-credit:hover { text-decoration: underline; }
.about-credit img { height: 16px; width: auto; }
@media (max-width: 720px) { .ld-credit { right: 10px; bottom: 10px; padding: 6px 10px 6px 8px; font-size: 11px; } .ld-credit img { height: 13px; } }
@media (max-height: 430px) { .ld-credit { bottom: 8px; } }
/* short landscape screens (phones): the launch menu used to clip at the top and bottom */
@media (max-height: 500px) {
  #menu .menu-stage { gap: 1.6vh; width: min(440px, 54vw); margin-left: clamp(14px, 4vw, 48px); }
  #menu .title { font-size: clamp(30px, 11vh, 52px); }
  #menu .tagline { margin-top: 4px; font-size: 13px; }
  #menu .nav { gap: 7px; }
  #menu .nav-card.primary { padding: 10px 16px; }
  #menu .nc-main { font-size: 21px; letter-spacing: 3px; }
  #menu .nc-sub { font-size: 11px; }
  #menu .mode-row { gap: 7px; }
  #menu .mode-chip { padding: 6px 12px; }
  #menu .mode-chip b { font-size: 13px; }
  #menu .mode-chip small { font-size: 10px; }
  #menu .mode-best { display: none; }
  #menu .nav-row { gap: 7px; flex-wrap: nowrap; }
  #menu .nav-row .nav-card { padding: 7px 11px; min-width: 0; }
  #menu .nav-row .nav-card.sm { padding: 8px 12px; }
  #menu .nc-k { font-size: 9px; letter-spacing: 1.5px; }
  #menu .nc-v { font-size: 13px; }
  #menu .build-stamp { display: none; }
}