/* ============================================================
   Rush - the landing page
   ------------------------------------------------------------
   Loaded only by landing.php, which index.php shows to browsers.
   Colours and faces come from the brand file like everywhere
   else; nothing here names a colour.
   ============================================================ */

.landing{
  /* The second voice. Rush has one; another brand file may not, so fall
     back to team two, which every brand defines. */
  --l-volt:var(--rush-volt, var(--t2));
}

/* The page runs edge to edge; each band centres its own content */
.landing .wrap{max-width:none;padding:0;gap:0}
.l-in{max-width:1120px;margin:0 auto;padding:0 20px}
.l-band{padding:76px 0;border-top:1px solid var(--line)}
.l-band > .l-in{display:flex;flex-direction:column;gap:28px}
@media(max-width:560px){.l-in{padding:0 14px}.l-band{padding:52px 0}}

.l-head{display:flex;flex-direction:column;gap:10px;max-width:66ch}
.l-head h2{font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:800;line-height:.95;letter-spacing:.005em}
.l-head p{margin:0;font-size:1.02rem;color:var(--ink2)}
.l-link{align-self:flex-start;font-family:var(--font-display);font-weight:700;
        font-size:calc(.95rem * var(--display-scale));text-transform:var(--display-case);letter-spacing:.03em;
        color:var(--ink);text-decoration:none;border-bottom:2px solid var(--acc);padding-bottom:2px}
.l-link:hover{color:var(--acc)}
.landing a:focus-visible,.landing button:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* ---------------- hero ---------------- */
.l-hero{position:relative;overflow:hidden;padding:64px 0 60px;
  background:
    radial-gradient(55% 75% at 96% 0%, color-mix(in srgb, var(--l-volt) 30%, transparent), transparent 70%),
    radial-gradient(45% 65% at 0% 100%, rgba(var(--acc-rgb),.14), transparent 70%),
    var(--bg)}
/* One slanted slab behind the veto: the wordmark's lean at poster size */
.l-hero::before{content:"";position:absolute;top:-10%;bottom:-10%;right:-8%;width:46%;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--l-volt) 15%, transparent), rgba(var(--acc-rgb),.06));
  border-left:1px solid color-mix(in srgb, var(--l-volt) 40%, transparent);
  transform:skewX(var(--mark-skew))}
.l-hero > .l-in{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:56px;align-items:center}
@media(max-width:900px){
  .l-hero > .l-in{grid-template-columns:1fr;gap:40px}
  .l-hero::before{display:none}
}

.l-pitch{display:flex;flex-direction:column;align-items:flex-start}
.l-hero h1{font-size:clamp(3.4rem,8vw,6.6rem);font-weight:900;line-height:.84;letter-spacing:-.005em;
  margin:16px 0 22px}
/* Each line leans on its own, so every line starts where the eyebrow does */
.l-hero h1 span{display:block;transform:skewX(var(--mark-skew));transform-origin:left bottom}
.l-hero h1 .l-hot{color:var(--l-volt)}
.l-lede{margin:0;max-width:50ch;font-size:1.14rem;line-height:1.55;color:var(--ink2)}

/* The download. The one place the pink-into-violet gradient is spent. */
.l-get{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px;scroll-margin-top:110px}
.l-cta{display:inline-flex;align-items:center;justify-content:center;padding:17px 30px;border-radius:3px;
  background:linear-gradient(100deg, var(--acc) 0%, var(--acc) 52%, var(--l-volt) 100%);
  color:var(--accink);text-decoration:none;transform:skewX(var(--mark-skew));
  box-shadow:0 14px 34px rgba(var(--acc-rgb),.28);transition:transform .15s, box-shadow .15s, filter .15s}
.l-cta > span{display:block;transform:skewX(calc(-1 * var(--mark-skew)));
  font:900 calc(1.12rem * var(--display-scale))/1 var(--font-display);letter-spacing:.035em;
  text-transform:var(--display-case)}
.l-cta:hover{transform:skewX(var(--mark-skew)) translateY(-2px);filter:brightness(1.06);
  box-shadow:0 18px 40px rgba(var(--acc-rgb),.38)}
.l-meta{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--font-mono);
  font-size:.76rem;color:var(--mut)}
/* Sent here from a page that lives in the app now */
.l-locked{margin:0 0 4px;max-width:52ch;padding:11px 14px;border-radius:3px;
  border:1px solid rgba(var(--acc-rgb),.38);background:rgba(var(--acc-rgb),.09);
  font-size:.95rem;line-height:1.5;color:var(--ink2)}
.l-locked b{color:var(--ink);font-weight:700}
/* Nothing to download yet: the button still shows, but it is not one */
.l-cta.is-off{background:none;border:1px dashed var(--line);color:var(--mut);
  box-shadow:none;cursor:default}
.l-alt{margin:0;max-width:50ch;font-size:.92rem;color:var(--ink2)}
.l-alt a{color:var(--ink);text-decoration-color:var(--acc);text-underline-offset:3px}
/* On a phone the longest label still fits on one line */
@media(max-width:560px){
  .l-cta{padding:15px 20px}
  .l-cta > span{font-size:calc(.98rem * var(--display-scale))}
}

/* The example veto: today's pool, banned down to one as the page loads */
.l-veto{margin:0;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:10px;
  background:rgba(var(--bg-rgb),.72);border:1px solid var(--line);backdrop-filter:blur(6px);
  box-shadow:0 30px 70px rgba(var(--shade-rgb),.55)}
.l-veto-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.l-veto-top b{color:var(--ink);font-weight:500}
.l-maps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.l-map{position:relative;display:flex;align-items:center;gap:12px;height:50px;padding:0 12px 0 16px;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:
    linear-gradient(90deg, rgba(var(--shade-rgb),.94) 0%, rgba(var(--shade-rgb),.66) 50%, rgba(var(--shade-rgb),.25) 100%),
    var(--img, none) center 40% / cover no-repeat,
    var(--surf2)}
.l-map b{font:800 calc(1.02rem * var(--display-scale))/1 var(--font-display);
  text-transform:var(--display-case);letter-spacing:.02em}
.l-map i{font:500 .66rem/1 var(--font-mono);font-style:normal;color:var(--mut)}
.l-stamp{margin-left:auto;position:relative;z-index:1;padding:6px 8px;border-radius:3px;
  border:1px solid var(--line);background:rgba(var(--shade-rgb),.8);color:var(--ink2);
  font:500 .64rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
/* A banned map sinks under a shade; its stamp stays on top of it */
.l-map::after{content:"";position:absolute;inset:0;background:rgba(var(--shade-rgb),.66);
  opacity:0;pointer-events:none}
.l-map.banned::after{opacity:1}
.l-map.banned b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--mut)}
.l-map.decider{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc), 0 10px 30px rgba(var(--acc-rgb),.25)}
.l-map.decider .l-stamp{background:var(--acc);border-color:var(--acc);color:var(--accink)}
.l-veto-foot{margin:2px 0 0;font-size:.86rem;color:var(--ink2)}
.l-veto-foot b{color:var(--ink);font-weight:600}

/* The resting state is the finished veto; the animation only arrives at it,
   so with motion turned off the page shows the result straight away. */
@media (prefers-reduced-motion: no-preference){
  .l-map.banned::after{animation:l-shade .35s ease backwards;animation-delay:var(--at)}
  .l-map.banned b{animation:l-strike .35s ease backwards;animation-delay:var(--at)}
  .l-map.banned .l-stamp,
  .l-map.decider .l-stamp{animation:l-stamp .36s cubic-bezier(.2,1.5,.4,1) backwards;animation-delay:var(--at)}
  .l-map.decider{animation:l-pick .6s ease backwards;animation-delay:var(--at)}
}
@keyframes l-shade{from{opacity:0}}
@keyframes l-strike{from{text-decoration-color:transparent}}
@keyframes l-stamp{from{opacity:0;transform:scale(1.9) rotate(-7deg)}}
@keyframes l-pick{from{border-color:var(--line);box-shadow:none}}

/* ---------------- right now ---------------- */
.l-live{background:var(--surf);border-top:1px solid var(--line)}
.l-live > .l-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:15px;padding-bottom:15px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--mut)}
.l-live span{display:inline-flex;align-items:center;gap:8px}
.l-live b{color:var(--ink);font-weight:500}
.l-dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.l-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(var(--ok-rgb),.2)}
.l-live .l-link{margin-left:auto;align-self:center;font-size:calc(.82rem * var(--display-scale))}

/* ---------------- how a match runs ---------------- */
.l-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;counter-reset:step}
.l-step{counter-increment:step;display:flex;flex-direction:column;gap:8px;padding:20px 18px 22px;
  background:var(--surf);border:1px solid var(--line);border-radius:6px}
.l-step::before{content:counter(step);margin-bottom:6px;color:var(--l-volt);
  font:900 2.7rem/.8 var(--font-display);transform:skewX(var(--mark-skew));transform-origin:left bottom}
.l-step h3{font-size:calc(1.3rem * var(--display-scale));font-weight:800;line-height:1}
.l-step-t{margin:0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--acc)}
.l-step p:last-child{margin:0;font-size:.9rem;color:var(--ink2)}
/* Five steps never split 2-2-1: below desktop they become a shelf, then a list */
@media(max-width:980px){
  .l-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
    overflow-x:auto;padding-bottom:8px}
}
@media(max-width:560px){
  .l-steps{grid-auto-flow:row;grid-template-columns:1fr;overflow:visible;padding-bottom:0}
}

/* ---------------- what you get ---------------- */
.l-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.l-feat{display:flex;flex-direction:column;gap:8px;padding:22px 0 26px;border-top:1px solid var(--line)}
.l-feat h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;line-height:1.05;
  font-size:calc(1.12rem * var(--display-scale));font-weight:800}
.l-feat p{margin:0;font-size:.95rem;color:var(--ink2)}
.l-tag{display:inline-block;padding:4px 7px;border-radius:3px;border:1px solid var(--line);
  font:500 .6rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}
.l-tag.app{color:var(--acc);border-color:rgba(var(--acc-rgb),.5)}
.l-tag.game{color:var(--t1)}
@media(max-width:760px){.l-feats{grid-template-columns:1fr}}

/* ---------------- loadout ---------------- */
.l-counts{display:flex;flex-wrap:wrap;gap:8px}
.l-count{padding:9px 12px;border-radius:4px;background:var(--surf);border:1px solid var(--line);
  font:500 .78rem/1 var(--font-mono);color:var(--mut)}
.l-count b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.l-shelf{display:flex;flex-direction:column;gap:12px}
.l-shelf-head{display:flex;align-items:baseline;gap:12px}
.l-shelf-head h3{font-size:calc(1.12rem * var(--display-scale));font-weight:800}
.l-shelf-head span{font-family:var(--font-mono);font-size:.72rem;color:var(--mut)}
/* Shelves run off the right edge the way Big Picture's do, so it is plain there is more */
.l-row{list-style:none;margin:0;padding:0 0 10px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity}
.l-item{flex:0 0 188px;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start}
.l-item.sm{flex-basis:128px}
.l-pic{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;
  border-radius:6px;border:1px solid var(--line);
  background:radial-gradient(75% 75% at 50% 42%, var(--surf2), var(--surf) 78%)}
.l-pic img{width:100%;height:100%;object-fit:contain;display:block}
.l-cap{margin:0;font-size:.84rem;line-height:1.3;color:var(--ink)}
.l-cap small{display:block;margin-top:2px;font-family:var(--font-mono);font-size:.68rem;color:var(--mut)}
.l-side{display:inline-block;margin-right:6px;padding:2px 5px;border-radius:3px;
  font:500 .6rem/1.2 var(--font-mono);letter-spacing:.08em;vertical-align:1px}
.l-side.ct{color:var(--ct);border:1px solid rgba(var(--ct-rgb),.5)}
.l-side.t{color:var(--tside);border:1px solid rgba(var(--tside-rgb),.5)}
.l-play{position:absolute;right:8px;bottom:8px;width:34px;height:34px;padding:0;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);background:rgba(var(--shade-rgb),.82);color:var(--ink);
  font-size:.78rem;cursor:pointer;transition:border-color .12s, color .12s}
.l-play::before{content:"\25B6"}
.l-play.on::before{content:"\25A0"}
.l-play:hover,.l-play.on{border-color:var(--acc);color:var(--acc)}

/* ---------------- maps ---------------- */
.l-pool{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(136px,1fr);gap:10px;overflow-x:auto}
.l-mapcard{position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  padding:14px;border-radius:6px;border:1px solid var(--line);overflow:hidden;
  background:
    linear-gradient(180deg, transparent 35%, rgba(var(--shade-rgb),.94) 100%),
    var(--img, none) center / cover no-repeat,
    var(--surf2)}
.l-mapcard b{font:800 calc(1.2rem * var(--display-scale))/1 var(--font-display);
  text-transform:var(--display-case);letter-spacing:.02em}
.l-mapcard i{font:500 .68rem/1 var(--font-mono);font-style:normal;color:var(--ink2)}
.l-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.l-more p{margin:0 4px 0 0;font-size:.9rem;color:var(--ink2)}
.l-chip{padding:7px 11px;border-radius:99px;border:1px solid var(--line);
  font:500 .76rem/1 var(--font-mono);color:var(--ink2)}

/* ---------------- about and where it's going ---------------- */
.l-band > .l-in.l-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.l-two > div{display:flex;flex-direction:column;gap:24px}
@media(max-width:860px){.l-band > .l-in.l-two{grid-template-columns:1fr;gap:56px}}
.l-facts{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 24px;align-items:baseline}
.l-facts dt{font:500 .7rem/1.4 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.l-facts dd{margin:0;color:var(--ink)}
.l-road{list-style:none;margin:0;padding:0}
.l-road li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.l-road b{display:block;font-weight:600;color:var(--ink)}
.l-road p{margin:3px 0 0;font-size:.92rem;color:var(--ink2)}
.l-when{justify-self:start;align-self:start;margin-top:2px;padding:5px 7px;border-radius:3px;
  border:1px solid var(--line);font:500 .6rem/1 var(--font-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
.l-when.next{color:var(--ok);border-color:rgba(var(--ok-rgb),.5)}
.l-when.planned{color:var(--ink2)}

/* ---------------- credits, and the last word ---------------- */
.l-credits{padding:40px 0}
.l-credits > .l-in,
.l-end > .l-in{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.l-credits p{margin:0;max-width:72ch;color:var(--ink2)}
.l-credits p b{color:var(--ink);font-weight:600}
/* The glow sits clear of the bottom edge, so it fades out before the footer
   instead of stopping in a line there */
.l-end{background:
    radial-gradient(50% 90% at 96% 30%, color-mix(in srgb, var(--l-volt) 24%, transparent), transparent 70%),
    radial-gradient(50% 120% at 0% 0%, rgba(var(--acc-rgb),.10), transparent 70%),
    var(--bg)}
.l-end h2{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:900;line-height:.86;
  transform:skewX(var(--mark-skew));transform-origin:left bottom}