/* =============================================================================
   WAREHOUSE RUSH — the sign-in screen's arcade break
   -----------------------------------------------------------------------------
   Lives inside <aside class="brand"> on the login page and takes over the
   marketing column when the player opens it. The brand column is dark in BOTH
   themes (--ink is declared once on :root and never overridden), so everything
   here can assume a dark ground and does not need a light variant.

   Nothing in this file styles anything outside .brand — the sign-in form is a
   sibling column and must be usable the whole time the game is running.
   ========================================================================== */

.lg{
  --lg-ink:#05070f;
  --lg-line:rgba(129,140,248,.18);
  --lg-dim:#7d88b4;
  --lg-soft:#c7cdf7;
  --lg-hot:#818cf8;
  --lg-cy:#22d3ee;
  --lg-gold:#fbbf24;
  --lg-bad:#fb7185;
}

/* ---- The button that opens it ------------------------------------------ */
.playbtn{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 12px;
  border-radius:999px;
  border:1px solid rgba(129,140,248,.32);
  background:rgba(129,140,248,.09);
  color:#c7cdf7;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background .22s cubic-bezier(.22,.78,.3,1),
             border-color .22s cubic-bezier(.22,.78,.3,1),
             color .22s cubic-bezier(.22,.78,.3,1),
             transform .22s cubic-bezier(.22,.78,.3,1),
             box-shadow .22s cubic-bezier(.22,.78,.3,1);
}
.playbtn i{font-size:13px;color:#a5b4fc;transition:color .22s,transform .22s}
.playbtn:hover{
  background:rgba(129,140,248,.18);
  border-color:rgba(129,140,248,.6);
  color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 26px -12px rgba(99,102,241,.9);
}
.playbtn:hover i{color:#fff;transform:scale(1.12) rotate(-8deg)}
.playbtn:focus-visible{outline:2px solid var(--lg-cy);outline-offset:3px}
.playbtn:active{transform:translateY(0)}

/* One slow pulse on arrival, then it stops asking for attention. */
.playbtn::after{
  content:"";position:absolute;inset:-1px;border-radius:999px;
  border:1px solid rgba(129,140,248,.55);
  animation:lg-ping 2.6s cubic-bezier(.22,.78,.3,1) 3;
  pointer-events:none;
}
.playbtn{position:relative}
@keyframes lg-ping{
  0%{opacity:.8;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.28)}
}

/* ---- Swapping the column over ------------------------------------------ */
.brand.is-playing .pitch,
.brand.is-playing .feats,
.brand.is-playing .stats{display:none}
.brand.is-playing .mark{margin-bottom:20px}
.brand.is-playing .playbtn{display:none}

.lg{
  display:none;
  flex:1 1 auto;min-height:0;
  flex-direction:column;
  border-radius:18px;
  border:1px solid var(--lg-line);
  background:linear-gradient(170deg,rgba(10,13,26,.86),rgba(5,7,15,.94));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  animation:lg-in .38s cubic-bezier(.22,.78,.3,1) both;
}
.brand.is-playing .lg{display:flex}
@keyframes lg-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ---- Top bar ------------------------------------------------------------ */
.lg__bar{
  display:flex;align-items:center;gap:14px;
  padding:11px 12px 11px 15px;
  border-bottom:1px solid var(--lg-line);
  background:rgba(255,255,255,.022);
  flex:0 0 auto;
}
.lg__title{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#eef1fb;white-space:nowrap;
}
.lg__title i{color:var(--lg-hot);font-size:13px}

.lg__stats{display:flex;align-items:center;gap:16px;margin-left:auto}
.lg__stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.lg__stat b{
  font-size:15px;font-weight:750;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.lg__stat span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#6b7599;margin-top:2px;
}
/* The score ticks up; a quick flash makes the change readable at a glance. */
.lg__stat b.is-bump{animation:lg-bump .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes lg-bump{50%{transform:scale(1.22);color:var(--lg-cy)}}

.lg__lives{display:flex;align-items:center;gap:4px}
.lg__lives i{font-size:11px;color:var(--lg-bad);transition:color .2s,opacity .2s,transform .2s}
.lg__lives i.is-spent{color:#39405c;opacity:.55;transform:scale(.82)}

.lg__x{
  width:28px;height:28px;flex:0 0 28px;border-radius:9px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:#9aa3c4;display:grid;place-items:center;cursor:pointer;font-size:12px;
  transition:color .18s,background .18s,border-color .18s;
}
.lg__x:hover{color:#fff;background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.5)}
.lg__x:focus-visible{outline:2px solid var(--lg-cy);outline-offset:2px}

/* ---- Playfield ---------------------------------------------------------- */
.lg__stage{position:relative;flex:1 1 auto;min-height:220px;overflow:hidden}
.lg__stage canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;   /* the loader is dragged, the page must not pan with it */
  outline:0;
}

/* Combo shout, painted over the canvas so it can use real type. */
.lg__combo{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:750;letter-spacing:.02em;
  color:var(--lg-cy);text-shadow:0 0 18px rgba(34,211,238,.7);
  opacity:0;pointer-events:none;white-space:nowrap;
}
.lg__combo.is-on{animation:lg-combo .7s cubic-bezier(.22,.78,.3,1)}
@keyframes lg-combo{
  0%{opacity:0;transform:translate(-50%,8px) scale(.8)}
  22%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  70%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-10px) scale(1)}
}

/* ---- The card over the field (ready / paused / over) -------------------- */
.lg__veil{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;text-align:center;
  padding:20px;
  background:radial-gradient(120% 90% at 50% 45%,rgba(5,7,15,.72),rgba(5,7,15,.93));
  backdrop-filter:blur(3px);
  animation:lg-veil .24s cubic-bezier(.22,.78,.3,1) both;
}
.lg__veil[hidden]{display:none}
@keyframes lg-veil{from{opacity:0}to{opacity:1}}

.lg__veil h3{
  margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.035em;color:#fff;
}
.lg__veil h3 em{
  font-style:normal;
  background:linear-gradient(100deg,#a5b4fc,#22d3ee 62%,#818cf8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lg__veil p{margin:0 auto 16px;color:#98a2c9;font-size:12.8px;line-height:1.6;max-width:34ch}
.lg__veil .lg__score{
  font-size:38px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1;
  margin:0 0 4px;font-variant-numeric:tabular-nums;
}
.lg__veil .lg__sub{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#6b7599;margin:0 0 16px;
}
.lg__veil .lg__new{
  display:inline-block;margin:0 0 14px;padding:4px 11px;border-radius:999px;
  background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(251,146,60,.16));
  border:1px solid rgba(251,191,36,.45);
  color:var(--lg-gold);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  animation:lg-bump .5s cubic-bezier(.34,1.56,.64,1);
}

.lg__go{
  border:0;cursor:pointer;font:inherit;
  padding:12px 26px;border-radius:12px;
  background:linear-gradient(135deg,#6366f1,#4f46e5 55%,#4338ca);
  color:#fff;font-size:14px;font-weight:650;letter-spacing:-.01em;
  box-shadow:0 14px 32px -14px rgba(79,70,229,1);
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .16s cubic-bezier(.22,.78,.3,1),filter .2s,box-shadow .2s;
}
.lg__go:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 20px 40px -16px rgba(79,70,229,1)}
.lg__go:active{transform:translateY(0)}
.lg__go:focus-visible{outline:2px solid var(--lg-cy);outline-offset:3px}

/* The legend on the ready card — what each falling thing is worth. */
.lg__key{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;
  margin:0 0 18px;padding:0;list-style:none;
}
.lg__key li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#98a2c9}
.lg__key span{
  width:15px;height:15px;border-radius:4px;flex:0 0 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.lg__key .k-crate{background:linear-gradient(150deg,#818cf8,#4f46e5)}
.lg__key .k-gold{background:linear-gradient(150deg,#fde68a,#f59e0b)}
.lg__key .k-bad{background:linear-gradient(150deg,#fb7185,#e11d48)}
.lg__key b{color:#c7cdf7;font-weight:650}

/* ---- Footer hint bar ---------------------------------------------------- */
.lg__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;flex:0 0 auto;
  border-top:1px solid var(--lg-line);
  background:rgba(255,255,255,.02);
  font-size:10.5px;color:#6b7599;
}
.lg__foot kbd{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;
  border:1px solid rgba(255,255,255,.16);border-radius:4px;
  padding:1px 5px;color:#98a2c9;background:rgba(255,255,255,.04);
}

/* ---- Small screens ------------------------------------------------------
   The brand column collapses to an auto-height header under 900px, so the
   playfield needs a floor of its own or it opens two pixels tall. */
@media (max-width:900px){
  .brand.is-playing{min-height:min(620px,86dvh)}
  .lg__stat span{display:none}
  .lg__foot span:last-child{display:none}
}
@media (max-width:520px){
  .lg__title span{display:none}
  .lg__stats{gap:12px}
}

/* The page-wide reduced-motion rule kills every animation, including the ones
   this panel needs to be readable. Playing is opt-in, so the game itself keeps
   moving; only the decorative flourishes are dropped (see the JS, which also
   drops screen shake and thins the particles). */
@media (prefers-reduced-motion:reduce){
  .playbtn::after{animation:none;display:none}
  .lg{animation:none}
  .lg__combo.is-on{animation:lg-combo .7s linear}
}