/*
 * The homepage game lobby — the statistics section rebuilt as promotion.
 * Ported from the approved concept at /lab/stats-concept-lobby.html; classes
 * carry the lb- prefix so nothing here can collide with the event kit.
 *
 * Colour notes: the chart fills ride at alphas whose COMPOSITED values pass
 * the dataviz six-checks on this surface (see the concept page's comment) —
 * do not "simplify" them back to raw tokens.
 */

.lb { --lb-panel: #12161d; --lb-panel-2: #171c25; --lb-line: #232a36;
  --lb-gold: #f0bc52; --lb-azure: #3b8ae8; }

/* ── section head ── */
.lb-head { margin-bottom: 8px; }
.lb-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--rise); }
.lb-h2 { font-family: var(--disp); font-weight: 900; text-transform: uppercase;
  font-size: clamp(46px, 6.4vw, 80px); line-height: .88; margin: .16em 0 .1em;
  color: var(--ink); }
.lb-h2 .lb-alt { color: var(--rise); }
.lb-deck { color: var(--ink-dim); font-size: 17px; max-width: 58ch;
  line-height: 1.55; margin: 0; }

/* ── the arena ── */
.lb-arena { position: relative; margin-top: 44px; border: 1px solid var(--lb-line);
  border-radius: 10px; overflow: hidden; min-height: 560px;
  background:
    radial-gradient(60% 46% at 32% 30%, color-mix(in oklab, var(--rise) 10%, transparent), transparent 65%),
    radial-gradient(100% 70% at 50% 110%, #101722, transparent 70%),
    var(--lb-panel);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.lb-arena::before { content: ""; position: absolute; left: -20%; right: -20%;
  bottom: -6%; height: 58%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--rise) 16%, transparent) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--rise) 12%, transparent) 0 1px, transparent 1px 46px);
  transform: perspective(640px) rotateX(58deg); transform-origin: 50% 100%;
  opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 88%, transparent); }
.lb-arena::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px); }
.lb-ghost { position: absolute; left: -8px; top: 6px; font-family: var(--disp);
  font-weight: 900; text-transform: uppercase; font-size: 190px; line-height: .8;
  letter-spacing: -.01em; color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--rise) 26%, transparent);
  opacity: .5; transform: skewX(-6deg); pointer-events: none; white-space: nowrap; }

.lb-stage { position: relative; z-index: 2; min-height: 560px; display: block;
  text-decoration: none; }
.lb-glow { position: absolute; left: 50%; bottom: 34px; width: 340px; height: 58px;
  transform: translateX(-50%); border-radius: 50%; filter: blur(6px); opacity: .8;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--rise) 42%, transparent), transparent 70%); }
.lb-hero { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  height: 470px; width: auto; z-index: 2;
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--rise) 26%, transparent))
          drop-shadow(0 22px 32px rgba(0, 0, 0, .75)); }
.lb-selname { position: absolute; left: 26px; top: 24px; z-index: 3; display: block; }
.lb-streakb { display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: #0a0d12;
  background: var(--lb-gold); padding: 5px 10px; border-radius: 2px;
  transform: skewX(-6deg); }
.lb-nm { display: block; font-family: var(--disp); font-weight: 900;
  text-transform: uppercase; font-size: 56px; line-height: .86; margin: 14px 0 6px;
  color: var(--ink); }
.lb-arch { display: block; font-family: var(--mono); font-size: 13px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rise); }
.lb-nickq { display: block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; color: var(--ink-dim); margin-top: 6px; }

/* build panel */
.lb-build { position: relative; z-index: 2; align-self: center;
  padding: 38px 34px 120px 8px; }
.lb-bh { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; }
.lb-bt { font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-dim); }
.lb-form { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--ink-dim); white-space: nowrap; }
.lb-form i { display: inline-block; width: 16px; height: 16px; border-radius: 2px;
  margin-left: 6px; font-style: normal; text-align: center; line-height: 16px;
  font-size: 10px; color: #0a0d12; }
.lb-form i.lb-pW { background: var(--sub, #a6db3d); }
.lb-form i.lb-pL { background: var(--ko, #ff2d55); }
.lb-form i.lb-pD { background: #6b7686; }
.lb-brow { display: grid; grid-template-columns: 150px 1fr 30px; gap: 12px;
  align-items: center; padding: 4px 0; font-family: var(--mono); font-size: 11px; }
.lb-bl { color: var(--ink-dim); letter-spacing: .08em; text-transform: uppercase; }
.lb-bv { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.lb-pips { display: flex; gap: 3px; }
.lb-pips i { flex: 1; height: 9px; border-radius: 1px; background: #1b222c;
  transform: skewX(-12deg); }

/* dock */
.lb-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; gap: 10px; padding: 14px 18px; justify-content: center;
  background: linear-gradient(180deg, transparent, rgba(7, 10, 14, .9) 40%); }
.lb-slot { position: relative; width: 86px; height: 96px;
  border: 1px solid var(--lb-line); border-radius: 6px; overflow: hidden;
  background: var(--lb-panel-2); cursor: pointer; padding: 0; }
.lb-slot img { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  height: 112px; }
.lb-sn { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); text-align: center; background: rgba(7, 10, 14, .85);
  padding: 3px 2px; }
.lb-slot.lb-sel { border-color: var(--rise);
  box-shadow: 0 0 0 1px var(--rise), 0 0 18px color-mix(in oklab, var(--rise) 40%, transparent); }
.lb-slot.lb-sel .lb-sn { color: var(--rise); }

/* ── patch + tonight ── */
.lb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.lb-panel { border: 1px solid var(--lb-line); border-radius: 10px;
  background: var(--lb-panel); overflow: hidden; }
.lb-ph { display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 22px 14px; border-bottom: 1px solid var(--lb-line); }
.lb-pt { font-family: var(--disp); font-weight: 900; text-transform: uppercase;
  font-size: 26px; color: var(--ink); }
.lb-pt .lb-alt { color: var(--rise); }
.lb-ps { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); }
.lb-plist { padding: 10px 22px 16px; }
.lb-pline { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px;
  align-items: baseline; padding: 9px 0; font-family: var(--mono); font-size: 12.5px;
  border-bottom: 1px solid color-mix(in oklab, var(--lb-line) 55%, transparent); }
.lb-pline:last-child { border-bottom: none; }
.lb-up { color: var(--sub, #a6db3d); }
.lb-who { color: var(--ink); letter-spacing: .02em; }
.lb-who a { color: var(--ink); text-decoration: none; }
.lb-who a:hover { color: var(--rise); }
.lb-lose { color: #6b7686; }
.lb-chip { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); }
.lb-chip b { font-weight: 400; }
.lb-chip .lb-m-ko { color: var(--ko, #ff2d55); }
.lb-chip .lb-m-sub { color: var(--sub, #a6db3d); }
.lb-chip .lb-m-dec { color: var(--rise); }

/* VS screens */
.lb-vslist { padding: 6px 22px 18px; }
.lb-vs { display: block; text-decoration: none; padding: 14px 0 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--lb-line) 55%, transparent); }
.lb-vs:last-child { border-bottom: none; }
.lb-vsnames { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: baseline; }
.lb-va, .lb-vb { font-family: var(--disp); font-weight: 900;
  text-transform: uppercase; font-size: 21px; color: var(--ink); }
.lb-va { text-align: right; }
.lb-vx { font-family: var(--mono); font-size: 11px; color: var(--ko, #ff2d55);
  transform: skewX(-8deg); }
.lb-gauge { position: relative; display: block; height: 10px; border-radius: 2px;
  overflow: hidden; margin: 10px 0 7px; background: #1b222c; }
.lb-gauge i { position: absolute; top: 0; bottom: 0; }
.lb-gl { left: 0; background: linear-gradient(90deg, #b3202f, var(--ko, #ff2d55)); }
.lb-gr { right: 0; background: linear-gradient(90deg, var(--lb-azure), #2b6cd4); }
.lb-gcut { width: 3px; background: #0a0d12; transform: skewX(-14deg); }
.lb-vpcts { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); }
.lb-vpcts b { font-weight: 400; color: var(--ink); }
.lb-stamp { display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rise);
  margin-top: 7px; }
.lb-tb { color: var(--lb-gold); }

/* ── charts ── */
.lb-charts { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px;
  margin-top: 22px; }
.lb-chart { border: 1px solid var(--lb-line); border-radius: 10px;
  background: var(--lb-panel); padding: 16px 20px 12px; }
.lb-ch { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; gap: 14px; }
.lb-ct { font-family: var(--disp); font-weight: 900; text-transform: uppercase;
  font-size: 20px; color: var(--ink); }
.lb-cs { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.lb-cleg { display: flex; gap: 18px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
  margin-top: 8px; }
.lb-cleg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  vertical-align: -1px; margin-right: 6px; }

/* ── doors ── */
.lb-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 24px; }
.lb-door { position: relative; border: 1px solid var(--lb-line); border-radius: 10px;
  background: var(--lb-panel); text-decoration: none; display: block;
  overflow: hidden; transition: border-color .15s, transform .15s; }
.lb-door:hover { border-color: var(--rise); transform: translateY(-2px); }
.lb-dtx { position: relative; z-index: 2; display: block; padding: 14px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(7, 10, 14, .6) 30%); }
.lb-dk { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rise); }
.lb-dt { display: block; font-family: var(--disp); font-weight: 900;
  text-transform: uppercase; font-size: 23px; color: var(--ink); margin-top: 4px; }
.lb-dd { display: block; color: var(--ink-dim); font-size: 13px; line-height: 1.5;
  margin-top: 4px; }
.lb-dv { position: relative; display: block; height: 150px; overflow: hidden; }
.lb-dv-roster .lb-dglow { position: absolute; left: 50%; bottom: -6px; width: 220px;
  height: 36px; transform: translateX(-50%); border-radius: 50%; filter: blur(8px);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--rise) 45%, transparent), transparent 70%); }
.lb-dv-roster img { position: absolute; bottom: -14px; height: 150px; width: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) saturate(.9);
  transition: transform .18s; }
.lb-door:hover .lb-dv-roster img { transform: translateY(-4px); }
.lb-dv-call { display: grid; place-items: center; }
.lb-ring { position: relative; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 26px color-mix(in oklab, var(--ko, #ff2d55) 22%, transparent); }
.lb-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--lb-panel); }
.lb-ring-idle { background: conic-gradient(#1b222c 0 100%); box-shadow: none; }
.lb-rv { position: relative; z-index: 2; text-align: center; font-family: var(--mono); }
.lb-ra { display: block; font-family: var(--disp); font-weight: 900; font-size: 26px;
  color: var(--ink); }
.lb-rb { display: block; font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 2px; }
.lb-vsn { position: absolute; font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.lb-vsn.lb-vl { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-vsn.lb-vr { right: 14px; top: 50%; transform: translateY(-50%); text-align: right; }
.lb-vsn b { display: block; font-family: var(--disp); font-weight: 900;
  font-size: 17px; letter-spacing: 0; }
.lb-vsn.lb-vl b { color: var(--ko, #ff2d55); }
.lb-vsn.lb-vr b { color: var(--lb-azure); }
.lb-dv-meta svg { display: block; width: 100%; height: 100%; }

/* ── smaller screens ── */
@media (max-width: 960px) {
  .lb-arena { grid-template-columns: 1fr; min-height: 0; }
  .lb-stage { min-height: 480px; }
  .lb-build { padding: 24px 24px 120px; }
  .lb-ghost { font-size: 110px; }
  .lb-duo, .lb-charts { grid-template-columns: 1fr; }
  .lb-doors { grid-template-columns: 1fr; }
  .lb-dock { overflow-x: auto; justify-content: flex-start; }
}