/* ============================================================
   Ivar's Filter Frenzy \2014  monthly partner band (Teamwork 26878002)
   Caela's 2026-11-05 mockup, verbatim except: the entrance motion is the
   site's <Reveal> (.reveal--armed/--in, CSS transitions) instead of the
   mockup's own script, and the board gets an empty state + .is-me.
   Lane: 1986 pizza-parlor arcade cabinet. Loaded ONLY by the band
   (templates/views/game.tsx). /game/vN/ is immutable: never edit this file
   in place once deployed \2014  ship a changed copy under a new folder.
   ============================================================ */

.vgm{
  --cab:#05060b;
  --navy-deep:#001834;
  --navy:#002147;
  --navy-lift:#003a6b;
  --bezel:#1b2740;
  --gold:#f2c94c;
  --gold-warm:#f2b84b;
  --crimson:#bb133d;
  --phosphor:#63e2c6;
  --silver:#cfd1d3;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  position:relative;
  margin-top:clamp(40px,6vw,88px);
  padding:clamp(48px,7vw,104px) 0 clamp(56px,8vw,112px);
  background:
    radial-gradient(1200px 620px at 50% -8%, rgba(0,92,190,.30), transparent 68%),
    linear-gradient(180deg,#000e22 0%,var(--navy-deep) 34%,var(--cab) 100%);
  color:#e9eefb;
  font-family:Sora,system-ui,sans-serif;
  overflow:hidden;
}
/* hairline of brand crimson where the white play section ends and the cabinet begins */
.vgm::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--crimson),var(--gold) 52%,var(--crimson));opacity:.9}

.vgm-wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- bringing the band up to the fold ----------------------
   The contest band sat ~1020px down, so nothing of it showed on a laptop.
   The stage row cannot shrink past 394px (the in-game panel's fixed height),
   so the space comes out of the padding above and below it instead. Tall
   screens keep the original, roomier rhythm.
   ------------------------------------------------------------------ */
.vgm{margin-top:0}
@media (min-width:901px) and (max-height:1000px){
  .ff-hero__inner{padding-top:134px;padding-bottom:18px}
  .ff-section.ff-play{padding-top:18px;padding-bottom:14px}
  .ff-head{margin-bottom:10px}
  .vgm{padding-top:clamp(30px,4vh,56px);padding-bottom:clamp(44px,6vh,88px)}
}
/* laptop heights: squeeze again so the marquee bulbs clear the fold */
@media (min-width:901px) and (max-height:900px){
  .ff-hero__inner{padding-top:128px;padding-bottom:10px}
  .ff-section.ff-play{padding-top:14px;padding-bottom:0}
  .ff-head{margin-bottom:6px}
  .ff-bar{margin-top:6px}
  .vgm{padding-top:30px}
}

/* :where() keeps this at class specificity, so the single-class rules below
   (.vgm-prize, .vgm-plate--win, ...) can still set their own margins */
.vgm :where(p){margin:0}

/* ---------- engraved plate label ---------- */
.vgm-plate{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  padding-bottom:5px;border-bottom:1px solid rgba(242,201,76,.34);
}
.vgm-plate--teal{color:var(--phosphor);border-bottom-color:rgba(99,226,198,.34)}

/* ============ BAND A \2014  the marquee ============ */
.vgm-marquee{
  position:relative;
  margin:0 auto;
  padding:clamp(34px,5vw,48px) clamp(20px,4vw,52px) clamp(26px,4vw,38px);
  text-align:center;
  background:linear-gradient(180deg,#0b1526 0%,#05060b 100%);
  border:3px solid rgba(242,201,76,.52);
  box-shadow:
    inset 0 0 90px rgba(242,184,75,.16),
    inset 0 2px 0 rgba(255,236,190,.22),
    0 0 70px rgba(242,184,75,.13),
    0 30px 70px rgba(0,8,22,.6);
}
.vgm-bulbs{position:absolute;top:-7px;left:26px;right:26px;display:flex;justify-content:space-between}
.vgm-bulbs i{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#fff6dc,#f2b84b 58%,#8a5e07);
  box-shadow:0 0 9px rgba(242,184,75,.85),0 0 20px rgba(242,184,75,.4);
  animation:vgm-bulb 4s ease-in-out infinite;
}
@keyframes vgm-bulb{0%,100%{opacity:1}50%{opacity:.42}}

.vgm-marquee__month{font-family:var(--mono);font-size:clamp(10px,1.3vw,12px);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.vgm-marquee__name{
  font-size:clamp(2.1rem,7.2vw,4.9rem);font-weight:800;line-height:.94;letter-spacing:-.025em;
  color:#fff;text-shadow:0 0 34px rgba(242,184,75,.4),0 0 90px rgba(242,184,75,.22);
}
.vgm-marquee__where{margin-top:14px;font-family:var(--mono);font-size:clamp(11px,1.4vw,13px);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,238,251,.62)}

/* ---------- partner story + prize ---------- */
.vgm-split{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,4.5vw,64px);
  align-items:start;margin-top:clamp(40px,5.5vw,72px);
}
.vgm-split__story h2{
  margin:18px 0 0;font-size:clamp(1.6rem,3.1vw,2.5rem);font-weight:800;line-height:1.12;
  letter-spacing:-.02em;color:#fff;max-width:19ch;
}
.vgm-split__story p.vgm-body{margin-top:16px;font-size:16.5px;line-height:1.72;
  color:rgba(233,238,251,.76);max-width:46ch}
.vgm-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.1em;
  color:var(--phosphor);text-decoration:none;
  border-bottom:1px solid rgba(99,226,198,.4);padding-bottom:4px;
  transition:color .25s cubic-bezier(.22,1,.36,1),border-color .25s cubic-bezier(.22,1,.36,1);
}
.vgm-link:hover{color:#8ff0da;border-bottom-color:rgba(143,240,218,.85)}
.vgm-link span{font-size:15px;line-height:1}

.vgm-plate--win{margin-top:30px}
.vgm-prize{margin-top:12px;font-size:clamp(1.25rem,2.3vw,1.7rem);font-weight:800;
  line-height:1.18;color:#fff;max-width:26ch}
.vgm-fine{margin-top:10px;font-size:13.5px;line-height:1.6;color:rgba(233,238,251,.6)}

/* ============ the scoreboard ============
   The in-game panel's twin: same 330x394 footprint, same chrome, the same
   56/62/156 grid, mono stack and 15/11/17px type as .ff-arcade__screen above.
   Nine rows land it on 394px exactly, the way the panel upstairs does.
   ======================================= */
.vgm-board{
  position:relative;width:330px;background:var(--cab);
  /* neon tube: a lit 2px edge, then halo at three radii so the glow falls off
     the way a real tube does instead of reading as one flat ring */
  border:2px solid rgba(150,248,224,.9);
  box-shadow:
    0 0 0 1px rgba(99,226,198,.95),
    0 0 14px rgba(99,226,198,.8),
    0 0 34px rgba(99,226,198,.45),
    0 0 78px rgba(99,226,198,.24),
    0 0 150px rgba(99,226,198,.11),
    0 26px 64px rgba(0,16,40,.5),
    inset 0 0 60px rgba(0,60,120,.16),
    inset 0 0 26px rgba(99,226,198,.14);
  padding:16px 14px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  overflow:hidden;align-self:start;
}
/* .vgm p{margin:0} outranks a single class here, so this one is qualified */
.vgm p.vgm-board__title{margin:0 0 14px;text-align:center;color:var(--phosphor);
  font-size:15px;font-weight:700;line-height:21px;letter-spacing:.26em;text-transform:uppercase;
  text-shadow:0 0 10px rgba(99,226,198,.5)}
.vgm-board__cols{
  display:grid;grid-template-columns:56px 62px 156px;gap:12px;
  color:var(--gold);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid rgba(242,201,76,.28);
}
.vgm-board ol{list-style:none;margin:0;padding:0}
.vgm-board li{display:grid;grid-template-columns:56px 62px 156px;gap:12px;
  padding:4px 0;font-size:13px;line-height:1.4;color:var(--row)}
.vgm-board li:nth-child(1){--row:#f4f7ff}
.vgm-board li:nth-child(2){--row:#ff4d4d}
.vgm-board li:nth-child(3){--row:#ff8a3d}
.vgm-board li:nth-child(4){--row:#ffa94d}
.vgm-board li:nth-child(5){--row:#f2c94c}
.vgm-board li:nth-child(6){--row:#e6e14c}
.vgm-board li:nth-child(7){--row:#8fe04c}
.vgm-board li:nth-child(8){--row:#4cd97b}
.vgm-board li:nth-child(9){--row:#46d6c0}
.vgm-board li:nth-child(10){--row:#56c8f0}

.vgm-rank{font-size:17px;letter-spacing:.06em}
.vgm-score{font-size:17px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.vgm-name{font-family:Sora,system-ui,sans-serif;font-size:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the only thing this board does that the in-game panel does not */
.vgm-board li.is-leader{box-shadow:inset 2px 0 0 var(--gold);
  background:linear-gradient(90deg,rgba(242,201,76,.14),rgba(242,201,76,0) 78%);
  margin:0 -6px;padding-left:6px;padding-right:6px}

/* empty month (the 1st, before anyone has played) and the poster's own row */
.vgm p.vgm-board__empty{margin:22px 0 10px;text-align:center;font-size:13px;line-height:1.6;color:rgba(233,238,251,.62)}
.vgm-board__empty b{display:block;margin-bottom:4px;color:var(--gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vgm-board li.is-me .vgm-name{text-decoration:underline;text-underline-offset:3px}

/* ============ motion ============
   Entrances are <Reveal> (the site's .reveal--armed/--in contract); only the
   bulb shimmer is this file's own. */
@media (prefers-reduced-motion:reduce){
  .vgm-bulbs i{animation:none}
}

/* ============ phone / tablet ============ */
@media (max-width:900px){
  .vgm-split{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:560px){
  .vgm-bulbs{left:14px;right:14px}
  .vgm-bulbs i:nth-child(n+8){display:none}
  /* below 358px of usable width the fixed 330px board would overflow */
  .vgm-board{width:100%}
  .vgm-board__cols,.vgm-board li{grid-template-columns:52px 60px minmax(0,1fr);gap:10px}
  .vgm-marquee__month{letter-spacing:.2em}
  .vgm-split__story h2{max-width:none}
}