/* =====================================================================================================
   Lobby picker cards (screens/lobby.js): mode + map key-art cards in snap rails, and the guest's locked
   "host's pick" cards. Key art: img/modes/<modeId>.webp and img/maps/<trackId|themeId>.webp (16:10); until a
   file has loaded each card shows its drawn fallback (.lc-fb poster per mode, .map-art for maps).
   Sized for landscape phones (740–932 × 330–430): card widths follow the section width (container units) and are
   the same in both rails, so mode and map cards line up; heights are capped by the viewport height (map cards a
   little shorter) so both rails fit above the match options.
   Logical properties for RTL; motion uses transform / opacity (and the individual scale / translate properties).
   Rotation (lobby.js, settings.mode 'mix' / settings.map 'random'): each rail opens with a hero card ("All games",
   "Random") one column-and-a-bit wide, equally wide in both rails so the columns after it still line up; in mix the
   header carries the up-next strip (.lc-upnext) and, between two rotation games, the settings column opens with
   the NEXT GAME banner and its countdown ring (.lc-banner).
   ===================================================================================================== */

@property --lc-fs { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lc-fe { syntax: '<length>'; inherits: false; initial-value: 0px; }

.lc-sec { container-type: inline-size; min-width: 0; gap: .3rem; }
.lc-sec > .lb-sec-h { position: relative; z-index: 1; min-height: 1.45rem; }

/* ---- Rail ------------------------------------------------------------------------------------------ */
.lc-rail {
  display: grid; grid-auto-flow: column; justify-content: start; align-items: start; gap: .5rem;
  grid-auto-columns: 9.8rem;
  grid-auto-columns: clamp(9.4rem, 34cqi, 13rem);
  /* room for the picked card's scale, glow and focus ring inside the scroll clip */
  padding: .45rem .3rem; margin-block: -.3rem;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: .3rem; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--lc-fs), #000 calc(100% - var(--lc-fe)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--lc-fs), #000 calc(100% - var(--lc-fe)), transparent 100%);
  transition: --lc-fs .25s var(--ease), --lc-fe .25s var(--ease);
}
[dir="rtl"] .lc-rail {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--lc-fs), #000 calc(100% - var(--lc-fe)), transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0, #000 var(--lc-fs), #000 calc(100% - var(--lc-fe)), transparent 100%);
}
.lc-rail::-webkit-scrollbar { display: none; }
.lc-rail.fs { --lc-fs: 1.7rem; }
.lc-rail.fe { --lc-fe: 1.7rem; }
.lc-rail > * { scroll-snap-align: start; }

/* Page buttons for mouse users (lobby.js shows them only when the rail overflows). */
.lc-nav { display: flex; align-items: center; gap: .3rem; flex: none; }
.lc-navbtn {
  display: grid; place-items: center; width: 1.55rem; height: 1.55rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .07); color: var(--text); font-size: .82rem; cursor: pointer;
  transition: opacity .2s var(--ease), transform .12s var(--ease);
}
.lc-navbtn:disabled { opacity: .28; cursor: default; }
.lc-navbtn:active:not(:disabled) { transform: scale(.88); }
@media (hover: hover) { .lc-navbtn:hover:not(:disabled) { border-color: rgba(255, 138, 31, .6); color: var(--brand-hot); } }
@media (hover: none), (pointer: coarse) { .lc-nav { display: none; } }

/* Hero column ("All games" / "Random"): the rail's first column, 1.28 columns wide in both rails. The hero keeps
   its rail's card height (its own aspect ratio would make it taller). */
.lc-rail.lc-hashero {
  grid-template-columns: 12.8rem;
  grid-template-columns: calc(clamp(9.4rem, 34cqi, 13rem) * 1.28);
}
.lb .lc-rail > .lc-card.lc-hero {
  aspect-ratio: auto; max-height: none;
  height: min(6.125rem, 23.5vh);
  height: min(calc(clamp(9.4rem, 34cqi, 13rem) * .625), 23.5vh);
}
.lb .lc-rail > .lc-card.lc-map.lc-hero {
  height: min(5.51rem, 20vh);
  height: min(calc(clamp(9.4rem, 34cqi, 13rem) * .5625), 20vh);
}

/* Big desktop / tablet columns: all modes at once, three across ("All games" as a banner over them); the map rail
   keeps scrolling on the same columns. */
@container (min-width: 36rem) {
  .lc-rail.lc-modes, .lc-rail.lc-modes.lc-hashero { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .lb .lc-rail.lc-modes > .lc-card.lc-hero { grid-column: 1 / -1; height: min(calc((100cqi - 1.6rem) / 3 * .625), 23.5vh); }
  /* a full-width banner lifts less, or it would spill past the column */
  .lb .lc-rail.lc-modes > .lc-card.lc-hero.active { scale: 1.008; }
  .lc-rail.lc-maps { grid-auto-columns: calc((100cqi - 1.6rem) / 3); }
  .lc-rail.lc-maps.lc-hashero { grid-template-columns: calc((100cqi - 1.6rem) / 3); }
  .lb .lc-rail.lc-maps > .lc-card.lc-hero { height: auto; aspect-ratio: 16 / 9; max-height: 20vh; }
}

/* ---- Card ------------------------------------------------------------------------------------------ */
.lb .lc-card {
  --lc-accent: #ff8a1f;
  position: relative; display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; max-height: 23.5vh;
  align-self: start; margin: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  background: #111118; color: #fff; font: inherit; line-height: 1.2; text-align: start; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .42);
  transition: scale .3s var(--ease-back), translate .22s var(--ease), opacity .2s var(--ease);
  animation: lc-in .46s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + 40ms);
}
.lb .lc-card.lc-map { aspect-ratio: 16 / 9; max-height: 20vh; }
/* hairline edge + top highlight */
.lb .lc-card::before {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* picked frame: fades in (opacity) over the hairline */
.lb .lc-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--brand-hot), inset 0 0 0 3.5px rgba(40, 12, 0, .45), inset 0 0 22px rgba(255, 106, 0, .42);
  transition: opacity .22s var(--ease);
}
.lb .lc-card.active { scale: 1.035; box-shadow: 0 0 0 1px rgba(255, 170, 110, .5), 0 4px 14px -2px rgba(255, 106, 0, .72); }
.lb .lc-card.active::after { opacity: 1; }
.lb .lc-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb button.lc-card:active { scale: .965; transition-duration: .1s; }
/* 'from' only: the entrance ends on the card's own scale (the picked card's lift), with no jump at the end. */
@keyframes lc-in { from { opacity: 0; scale: .9; translate: 0 .5rem; } }

/* Art: drawn fallback, key art on top once loaded. Unpicked cards sit a small step back (a little less colour and
   light, never dimmed through to the dark card); the picked and hovered ones are at full strength. */
.lc-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; transition: filter .25s var(--ease); }
.lc-art > * { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s var(--ease-out), opacity .35s var(--ease); }
.lc-img { display: block; object-fit: cover; object-position: 45% 42%; opacity: 0; pointer-events: none; -webkit-user-drag: none; }
.lc-card.lc-art-on .lc-img { opacity: 1; }
.lc-rail .lc-card:not(.active) .lc-art { filter: saturate(.85) brightness(.92); }
html.lowfx .lc-rail .lc-card .lc-art { filter: none; }
@media (hover: hover) {
  .lb button.lc-card:hover { translate: 0 -2px; }
  .lb button.lc-card:hover .lc-art { filter: none; }
  .lb button.lc-card:hover .lc-art > * { transform: scale(1.06); }
}

/* Scrim: from half-way down, a fade behind the name and sub (they also carry a text shadow), and a soft one on the
   reading-start side. Mode cards add a short veil under their top row; map cards have nothing up there to veil. */
.lc-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --lc-veil: linear-gradient(180deg, rgba(6, 6, 10, 0), rgba(6, 6, 10, 0));
  --lc-foot: linear-gradient(180deg, rgba(6, 6, 10, 0) 50%, rgba(6, 6, 10, .58) 76%, rgba(6, 6, 10, .9) 100%);
  --lc-side: linear-gradient(90deg, rgba(6, 6, 10, .3) 0%, rgba(6, 6, 10, 0) 50%);
  background: var(--lc-veil), var(--lc-foot), var(--lc-side);
}
[dir="rtl"] .lc-scrim { --lc-side: linear-gradient(270deg, rgba(6, 6, 10, .3) 0%, rgba(6, 6, 10, 0) 50%); }
.lc-mode .lc-scrim { --lc-veil: linear-gradient(180deg, rgba(6, 6, 10, .34) 0%, rgba(6, 6, 10, 0) 26%); }

/* A light sweep across the picked card now and then. */
.lc-scrim::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-120%);
}
.lc-card.active .lc-scrim::after { opacity: 1; animation: lc-sheen 5.5s var(--ease) 1s infinite; }
@keyframes lc-sheen { 0% { transform: translateX(-120%); } 26%, 100% { transform: translateX(320%); } }
html.lowfx .lc-card.active .lc-scrim::after { animation: none; opacity: 0; }

/* Top row, one line: glass icon chip (start), one type tag (end). */
.lc-top { position: absolute; z-index: 2; top: .4rem; inset-inline: .45rem; display: flex; align-items: center; gap: .3rem; pointer-events: none; }
.lc-chip {
  flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 7px; font-size: .94rem; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .07)), rgba(12, 12, 18, .46);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 10px rgba(0, 0, 0, .38);
  transform: skewX(var(--skew));
}
.lc-chip > * { transform: skewX(var(--unskew)); }
.lc-chip .ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.lc-card.active .lc-chip { background: var(--grad-brand); border-color: rgba(255, 214, 180, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 12px rgba(255, 106, 0, .55); }
/* Track outline chip (map cards, only once the key art covers the drawn outline): small and light, a thin glass
   plate; the picked card gets an orange edge and an orange glow line, not a solid fill. */
.lc-chip.lc-trk {
  display: none; width: 1.95rem; height: 1.2rem; padding: .1rem .14rem; border-radius: 5px;
  background: rgba(8, 8, 14, .32); border-color: rgba(255, 255, 255, .2); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.lc-chip.lc-trk > svg { width: 100%; height: 100%; transform: skewX(var(--unskew)); overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.lc-chip.lc-trk path { vector-effect: non-scaling-stroke; }
.lc-chip.lc-trk path:first-of-type { stroke-width: 2.8px; opacity: .55; }
.lc-chip.lc-trk path:last-of-type { stroke-width: 1.3px; }
.lc-card.active .lc-chip.lc-trk { background: rgba(8, 8, 14, .32); border-color: var(--brand-hot); box-shadow: 0 0 0 1px rgba(255, 106, 0, .35), 0 2px 10px rgba(255, 106, 0, .45); }
.lc-card.active .lc-chip.lc-trk path:first-of-type { stroke: var(--brand-hot); opacity: .9; }
.lc-card.lc-art-on .lc-chip.lc-trk { display: grid; }
.lc-card.lc-art-on .map-art .ma-track { opacity: 0; }

/* Check badge (the guest's lock) on the chip's top-end corner, so the name keeps the card's full width. With no chip
   in front of it (arena maps, or a track whose outline chip waits for its key art) it sits in the corner itself. */
.lc-mark {
  position: relative; z-index: 1; flex: none; align-self: flex-start; display: grid; place-items: center;
  width: 1.02rem; height: 1.02rem; margin-block-start: -.24rem; margin-inline-start: -.8rem; border-radius: 50%; font-size: .64rem; color: #fff;
  background: var(--grad-brand); box-shadow: 0 0 0 2px rgba(10, 10, 16, .6), 0 2px 8px rgba(255, 106, 0, .6);
  opacity: 0; scale: .3; transition: opacity .18s var(--ease), scale .32s var(--ease-back);
}
.lc-chip.lc-trk + .lc-mark { margin-inline-start: -.62rem; }
.lc-top > .lc-mark:first-child, .lc-card:not(.lc-art-on) .lc-chip.lc-trk + .lc-mark { margin: 0; }
.lc-mark svg { stroke-width: 3.4px; }
.lc-card.active .lc-mark { opacity: 1; scale: 1; }

.lc-tags { margin-inline-start: auto; display: flex; justify-content: flex-end; min-width: 0; }
.lc-tag {
  position: relative; z-index: 0; display: inline-flex; align-items: center; gap: .22em; height: 1.1rem; padding: 0 .42rem;
  font-size: .6rem; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff;
}
.lc-tag::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 4px; transform: skewX(var(--skew));
  background: rgba(10, 10, 16, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
html[lang="ar"] .lc-tag, [dir="rtl"] .lc-tag { letter-spacing: 0; font-size: .66rem; }
.lc-k-teams::before { background: linear-gradient(180deg, #4f91ff, #2f6ce8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.lc-k-coop { color: #04210f; }
.lc-k-coop::before { background: linear-gradient(180deg, #6ff0a6, #2fc474); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.lc-k-opt::before { box-shadow: inset 0 0 0 1px rgba(79, 145, 255, .8); }

/* Body: name (the full card width; wraps to a second line rather than being cut), one-line sub row. */
.lc-body { position: absolute; z-index: 2; inset-inline: .5rem; bottom: .38rem; display: flex; flex-direction: column; gap: .06rem; min-width: 0; pointer-events: none; }
.lc-row { display: flex; align-items: center; min-width: 0; }
/* No clamp: names are short and wrap (balanced) instead of being cut; the body grows upward. */
.lb .lc-card .lc-name {
  display: block; flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; background: none; overflow: visible;
  font-size: 1.02rem; font-weight: 800; line-height: 1.08; color: #fff; white-space: normal; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .45);
}
html[lang="ar"] .lb .lc-card .lc-name { line-height: 1.2; }
.lb .lc-card.lc-map .lc-name { font-size: .9rem; }
/* Sub row: the sub, then the meta (length / players) on wide cards. One line: a meta that does not fit wraps out of
   sight instead of cutting the sub. */
.lc-subrow {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: .5em; row-gap: 3em; min-width: 0; max-height: 1.3em; overflow: hidden;
  font-size: .66rem; font-weight: 600; line-height: 1.2; color: rgba(236, 237, 243, .86); text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}
html[lang="ar"] .lc-subrow { font-size: .7rem; }
.lc-card.active .lc-subrow { color: #fff; }
.lc-sub { display: block; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-meta { display: none; flex: none; align-items: center; gap: .5em; font-weight: 700; white-space: nowrap; }
.lc-meta::before { content: ''; flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .65; }
.lc-len { display: inline-flex; align-items: center; gap: .22em; }
.lc-len .ico { font-size: 1.15em; color: var(--brand-hot); }
@container (min-width: 11.2rem) { .lc-meta:not(:empty) { display: inline-flex; } }
/* Big cards (desktop grid): the top row and the text grow with them. */
@container (min-width: 15rem) {
  .lc-top { top: .6rem; inset-inline: .65rem; }
  .lc-chip { width: 1.9rem; height: 1.9rem; font-size: 1.15rem; }
  .lc-chip.lc-trk { width: 2.4rem; height: 1.45rem; }
  .lc-tag { height: 1.25rem; font-size: .66rem; }
  .lc-body { inset-inline: .7rem; bottom: .55rem; }
  .lb .lc-card .lc-name { font-size: 1.2rem; }
  .lb .lc-card.lc-map .lc-name { font-size: 1.05rem; }
  .lc-subrow { font-size: .74rem; }
  html[lang="ar"] .lc-subrow { font-size: .78rem; }
}

/* ---- Mode fallback posters (a gradient, a pattern and the mode glyph, cropped big at the far side) -------- */
.lc-fb { background: radial-gradient(90% 110% at 25% 15%, var(--lc-accent) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(160deg, #2a2a36, #0d0d13); }
.lc-fb::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.lc-glyph {
  position: absolute; top: 50%; inset-inline-end: -6%; width: auto; height: 118%; aspect-ratio: 1; translate: 0 -50%; rotate: -12deg;
  color: rgba(255, 255, 255, .2); filter: drop-shadow(0 0 10px var(--lc-accent));
}
[dir="rtl"] .lc-glyph { rotate: 12deg; }
.lc-glyph svg { stroke-width: 1.25px; }
html.lowfx .lc-glyph { filter: none; }

.lc-fb[data-art="race"] {
  background:
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0) 0 15px, rgba(255, 255, 255, .07) 15px 17px),
    radial-gradient(80% 110% at 16% 0%, rgba(255, 190, 110, .75) 0%, rgba(255, 140, 40, 0) 60%),
    linear-gradient(158deg, #ff7a1a 0%, #c43d00 46%, #4a1000 100%);
}
.lc-fb[data-art="race"]::before {
  inset: auto; bottom: 30%; inset-inline-start: -8%; width: 78%; height: 20%; opacity: .2;
  background: conic-gradient(#fff 25%, #17171d 0 50%, #fff 0 75%, #17171d 0) 0 0 / 11px 11px;
  transform: skewY(-10deg);
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.lc-fb[data-art="snake"] {
  background:
    radial-gradient(circle at 1px 1px, rgba(190, 255, 220, .2) 1px, rgba(0, 0, 0, 0) 1.6px) 0 0 / 11px 11px,
    radial-gradient(70% 90% at 72% 30%, rgba(110, 255, 175, .7) 0%, rgba(40, 200, 120, 0) 62%),
    linear-gradient(160deg, #117047 0%, #07301f 55%, #03140d 100%);
}
.lc-fb[data-art="snake"]::before {
  inset: auto; top: 18%; inset-inline-start: 10%; width: 70%; height: 90%; border-radius: 50%;
  border: 3px solid rgba(140, 255, 190, .55); border-color: rgba(140, 255, 190, .55) transparent transparent transparent;
  filter: drop-shadow(0 0 6px #35d07f); rotate: -8deg;
}
.lc-fb[data-art="color"] {
  background:
    repeating-linear-gradient(0deg, rgba(10, 4, 24, .22) 0 1px, rgba(0, 0, 0, 0) 1px 13px),
    repeating-linear-gradient(90deg, rgba(10, 4, 24, .22) 0 1px, rgba(0, 0, 0, 0) 1px 13px),
    radial-gradient(42% 62% at 16% 30%, #ff3d9a 0%, rgba(255, 61, 154, 0) 72%),
    radial-gradient(48% 62% at 82% 20%, #1ee3ff 0%, rgba(30, 227, 255, 0) 72%),
    radial-gradient(54% 60% at 58% 104%, #ffd21f 0%, rgba(255, 210, 31, 0) 72%),
    linear-gradient(160deg, #3d1478, #170833);
}
.lc-fb[data-art="soccer"] {
  background:
    radial-gradient(circle 1.35rem at 50% 50%, rgba(255, 255, 255, 0) calc(100% - 2px), rgba(255, 255, 255, .5) calc(100% - 2px) 100%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) calc(50% - 1px), rgba(255, 255, 255, .5) calc(50% - 1px) calc(50% + 1px), rgba(255, 255, 255, 0) calc(50% + 1px)),
    radial-gradient(55% 95% at 0% 50%, rgba(47, 123, 255, .6), rgba(47, 123, 255, 0) 72%),
    radial-gradient(55% 95% at 100% 50%, rgba(255, 61, 154, .55), rgba(255, 61, 154, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg, #31a04d 0 17px, #2a8d43 17px 34px);
}
.lc-fb[data-art="pool"] {
  background:
    radial-gradient(circle .5rem at 30% 42%, #fff 0 .08rem, #ffd21f .12rem .42rem, rgba(0, 0, 0, 0) .46rem),
    radial-gradient(circle .5rem at 40% 58%, #fff 0 .08rem, #ff3d5a .12rem .42rem, rgba(0, 0, 0, 0) .46rem),
    radial-gradient(circle .5rem at 22% 60%, #fff 0 .08rem, #2f7bff .12rem .42rem, rgba(0, 0, 0, 0) .46rem),
    radial-gradient(90% 95% at 42% 38%, #22a58e 0%, #0e6a5a 52%, #063a31 100%);
  box-shadow: inset 0 0 0 5px #3b2414, inset 0 0 0 6px rgba(0, 0, 0, .45), inset 0 0 26px rgba(0, 0, 0, .5);
}
.lc-fb[data-art="virus"] {
  background:
    radial-gradient(circle .22rem at 18% 70%, rgba(170, 255, 90, .85) 0 .16rem, rgba(0, 0, 0, 0) .22rem),
    radial-gradient(circle .16rem at 30% 30%, rgba(170, 255, 90, .7) 0 .1rem, rgba(0, 0, 0, 0) .16rem),
    radial-gradient(circle .28rem at 44% 82%, rgba(170, 255, 90, .6) 0 .2rem, rgba(0, 0, 0, 0) .28rem),
    radial-gradient(62% 72% at 72% 38%, rgba(141, 255, 43, .42), rgba(141, 255, 43, 0) 70%),
    radial-gradient(95% 110% at 26% 16%, #9636ea 0%, #3d1070 52%, #15052b 100%);
}

/* "All games" and "Random" drawn posters: one slanted band per mode / per world, darkened toward the bottom. */
.lc-fb[data-art="mix"] {
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0) 35%, rgba(8, 8, 12, .55)),
    linear-gradient(112deg, #d9570a 0 17%, #11603e 17% 34%, #b8246e 34% 51%, #1f5ec7 51% 67%, #0d7d6c 67% 84%, #6a2aa8 84%);
}
.lc-fb[data-art="random"] {
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0) 35%, rgba(8, 8, 12, .55)),
    linear-gradient(112deg, #7a1f6e 0 20%, #b8602a 20% 40%, #16307a 40% 60%, #2f6a2c 60% 80%, #3b5c9a 80%);
}

/* ---- Hero cards: "All games" (mode rail) and "Random" (map rail) ----------------------------------------- */
/* A spectrum edge along the bottom (the six mode colours / the five world colours) marks them as "every one". */
.lc-hero .lc-scrim::before {
  content: ''; position: absolute; z-index: 2; inset: auto 0 0 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #ff8a1f 0 16.7%, #35d07f 16.7% 33.3%, #ff3d9a 33.3% 50%, #2f7bff 50% 66.7%, #1ee3c8 66.7% 83.3%, #b44dff 83.3%);
  box-shadow: 0 0 10px rgba(255, 255, 255, .25);
}
.lc-map.lc-hero .lc-scrim::before { background: linear-gradient(90deg, #ff3dd6 0 20%, #ff9a3d 20% 40%, #1ee3ff 40% 60%, #8dff2b 60% 80%, #7fe8ff 80%); }
[dir="rtl"] .lc-hero .lc-scrim::before { scale: -1 1; }
.lb .lc-card.lc-hero .lc-name { font-size: 1.12rem; }
.lb .lc-card.lc-map.lc-hero .lc-name { font-size: .98rem; }
.lc-hero .lc-img { object-position: 50% 45%; }
/* the unpicked hero stays at full strength: it is the default everyone starts from */
.lc-rail .lc-card.lc-hero:not(.active) .lc-art { filter: none; }
.lc-k-mix { color: #fff; }
.lc-k-mix::before { background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 8px rgba(255, 106, 0, .45); }
@container (min-width: 15rem) {
  .lb .lc-card.lc-hero .lc-name { font-size: 1.3rem; }
  .lb .lc-card.lc-map.lc-hero .lc-name { font-size: 1.12rem; }
}

/* ---- Map fallback art -------------------------------------------------------------------------------- */
.lc-map .map-art { background-size: cover; }
.lc-map .map-art .ma-track { inset: 6% 20% 40% 20%; transition: opacity .3s var(--ease); }

/* ---- Guest: the host's pick, locked ------------------------------------------------------------------- */
.lc-lockico { color: var(--brand-hot); font-size: .95rem; }
.lc-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; padding: .3rem .2rem .15rem; }
.lb .lc-pick .lc-card { aspect-ratio: 16 / 10; max-height: none; cursor: default; }
.lb .lc-pick .lc-card.active { scale: 1; }
.lc-static .lc-mark { opacity: 1; scale: 1; color: var(--brand-hot); background: rgba(12, 12, 18, .78); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .7), 0 2px 8px rgba(0, 0, 0, .5); }
.lc-static .lc-mark svg { stroke-width: 2.4px; }
.lb .lc-card.lc-swap { animation: lc-swap .5s var(--ease-back) both; }
@keyframes lc-swap { from { opacity: .2; scale: .92; } }
.lc-desc {
  font-size: .74rem; line-height: 1.38; color: #c8c9d2; padding-inline: .2rem;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* ---- Rotation: up-next strip (header) ------------------------------------------------------------------ */
/* The strip takes the header's free space between the title and the chips and sheds detail as that space shrinks:
   the order chips first, then the order, then the thumbnail. */
.lb .lc-upslot { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; container-type: inline-size; }
.lb .lc-upslot[hidden] { display: none; }
.lc-next { --lc-accent: #ff8a1f; position: relative; isolation: isolate; display: flex; align-items: center; min-width: 0; color: #fff; }
.lc-next [hidden] { display: none !important; }
.lc-upnext {
  max-width: 100%; height: 2.5rem; gap: .5rem; padding-block: .22rem; padding-inline: .22rem .75rem; border-radius: 11px;
  background: linear-gradient(90deg, rgba(255, 106, 0, .18), rgba(14, 14, 20, 0) 55%), rgba(14, 14, 20, .72);
  background: linear-gradient(90deg, color-mix(in srgb, var(--lc-accent) 26%, transparent), rgba(14, 14, 20, 0) 55%), rgba(14, 14, 20, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .38);
  animation: lc-up-in .45s var(--ease-out) .15s backwards;
}
[dir="rtl"] .lc-upnext {
  background: linear-gradient(270deg, rgba(255, 106, 0, .18), rgba(14, 14, 20, 0) 55%), rgba(14, 14, 20, .72);
  background: linear-gradient(270deg, color-mix(in srgb, var(--lc-accent) 26%, transparent), rgba(14, 14, 20, 0) 55%), rgba(14, 14, 20, .72);
}
@keyframes lc-up-in { from { opacity: 0; translate: 0 -.4rem; } }

/* Key art thumbnail: the next mode's art (the banner adds its map as an inset) over the mode's drawn poster. */
.lc-nx-art {
  position: relative; flex: none; height: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #15151c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 3px 10px rgba(0, 0, 0, .45);
}
.lc-nx-art > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-nx-art > img { object-fit: cover; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; -webkit-user-drag: none; }
.lc-nx-art > img.on { opacity: 1; }
.lc-nx-fb > .ico { position: absolute; inset: 0; margin: auto; width: 58%; height: 58%; color: rgba(255, 255, 255, .5); }
.lc-nx-art > .lc-nx-pimg {
  inset: auto; inset-inline-end: .22rem; bottom: .22rem; width: 44%; height: auto; aspect-ratio: 16 / 10; border-radius: 4px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 2px 8px rgba(0, 0, 0, .6);
}

.lc-nx-txt { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .02rem; }
.lc-nx-top { display: flex; align-items: center; gap: .32rem; min-width: 0; font-size: .58rem; font-weight: 800; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
html[lang="ar"] .lc-nx-top, [dir="rtl"] .lc-nx-top { letter-spacing: 0; font-size: .64rem; }
.lc-nx-k { flex: none; color: var(--brand-hot); }
.lc-nx-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.lc-nx-n::before { content: ''; display: inline-block; width: 3px; height: 3px; margin-inline-end: .32rem; vertical-align: middle; border-radius: 50%; background: currentColor; opacity: .7; }
.lc-nx-name { display: flex; align-items: center; gap: .28rem; min-width: 0; font-size: .86rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.lc-nx-ico { flex: none; display: grid; font-size: 1.02rem; color: var(--lc-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lc-accent) 60%, transparent)); }
.lc-nx-mode { flex: none; }
.lc-nx-sep { flex: none; width: 3px; height: 3px; margin-inline: .1rem; border-radius: 50%; background: var(--muted); }
.lc-nx-map { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; font-weight: 700; color: #d2d3db; }

/* The rest of this cycle: small mode chips after a "then" arrow, then "n of 6". */
.lc-nx-order { flex: none; display: flex; align-items: center; gap: .3rem; }
.lc-upnext .lc-nx-order { align-self: stretch; padding-inline-start: .6rem; margin-block: .2rem; border-inline-start: 1px solid rgba(255, 255, 255, .13); }
.lc-nx-then { flex: none; display: grid; font-size: .82rem; color: var(--muted); }
.lc-nx-order.lc-nx-last .lc-nx-then { display: none; }
.lc-nx-chips { display: flex; align-items: center; gap: .2rem; }
.lc-oc {
  --c: #ff8a1f; position: relative; z-index: 0; flex: none; display: grid; place-items: center; width: 1.32rem; height: 1.32rem; font-size: .8rem; color: var(--c);
}
.lc-oc::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 5px; transform: skewX(var(--skew));
  background: rgba(20, 20, 28, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  background: color-mix(in srgb, var(--c) 16%, rgba(20, 20, 28, .85)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent);
}
.lc-oc .ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
/* later games fade a little: the order reads from the next one outward */
.lc-oc:nth-child(n + 3) { opacity: .82; }
.lc-oc:nth-child(n + 4) { opacity: .66; }
.lc-nx-cyc { flex: none; margin-inline-start: .1rem; font-size: .64rem; font-weight: 800; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[lang="ar"] .lc-nx-cyc { font-size: .68rem; }

@container (max-width: 23rem) { .lc-upnext .lc-nx-chips, .lc-upnext .lc-nx-then { display: none; } }
@container (max-width: 17rem) { .lc-upnext .lc-nx-order { display: none; } }
@container (max-width: 11.5rem) { .lc-upnext .lc-nx-art { display: none; } .lc-upnext { padding-inline-start: .7rem; } }

/* The next game changed (a pick, or the rotation moved on): the strip / banner pops. */
.lc-next.lc-nx-swap .lc-nx-art, .lc-next.lc-nx-swap .lc-nx-txt { animation: lc-nx-pop .45s var(--ease-back); }
@keyframes lc-nx-pop { from { opacity: .25; scale: .94; } }

/* ---- Rotation: NEXT GAME banner (between two games) ---------------------------------------------------- */
/* (below the settings column's top fade, so its edge and notch stay crisp) */
.lc-bansec { flex: none; margin-block-start: .4rem; container-type: inline-size; }
.lc-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 12px;
  background: linear-gradient(100deg, rgba(255, 106, 0, .2), rgba(18, 18, 26, 0) 60%), rgba(18, 18, 26, .7);
  background: linear-gradient(100deg, color-mix(in srgb, var(--lc-accent) 28%, transparent), rgba(18, 18, 26, 0) 62%), rgba(18, 18, 26, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .42), inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 22px rgba(0, 0, 0, .38);
  animation: lc-ban-in .5s var(--ease-back) backwards;
}
[dir="rtl"] .lc-banner {
  background: linear-gradient(260deg, rgba(255, 106, 0, .2), rgba(18, 18, 26, 0) 60%), rgba(18, 18, 26, .7);
  background: linear-gradient(260deg, color-mix(in srgb, var(--lc-accent) 28%, transparent), rgba(18, 18, 26, 0) 62%), rgba(18, 18, 26, .7);
}
/* brand notch on the top edge, like the results' NEXT GAME card */
.lc-banner::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 1rem; width: 2.4rem; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--brand); box-shadow: 0 0 12px rgba(255, 106, 0, .7);
}
@keyframes lc-ban-in { from { opacity: 0; scale: .96; translate: 0 .35rem; } }
.lc-banner .lc-nx-art { width: 6.4rem; height: auto; }
.lc-banner .lc-nx-txt { gap: .1rem; }
.lc-banner .lc-nx-top { font-size: .66rem; }
html[lang="ar"] .lc-banner .lc-nx-top, [dir="rtl"] .lc-banner .lc-nx-top { font-size: .72rem; }
/* mode on its own line (the name stays whole), the map under it */
.lc-banner .lc-nx-name { flex-wrap: wrap; row-gap: 0; font-size: 1.14rem; line-height: 1.15; }
.lc-banner .lc-nx-ico { font-size: 1.2rem; }
.lc-banner .lc-nx-sep { display: none; }
.lc-banner .lc-nx-map { flex-basis: 100%; font-size: .78rem; }
.lc-banner .lc-nx-order { margin-block-start: .18rem; }
.lc-banner .lc-oc { width: 1.2rem; height: 1.2rem; font-size: .74rem; }
.lc-nx-end { display: flex; flex-direction: column; align-items: center; gap: .22rem; min-width: 3.2rem; }
.lc-nx-ring {
  --p: 1; position: relative; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--p) * 360deg), rgba(255, 255, 255, .1) 0);
  box-shadow: 0 0 14px rgba(255, 106, 0, .35);
}
.lc-nx-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #121218; }
.lc-nx-sec { position: relative; font-size: 1.14rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.lc-nx-ring.go { animation: lc-ring-go 1s var(--ease) infinite; }
.lc-nx-ring.go .lc-nx-sec { font-size: .74rem; color: var(--brand-hot); }
@keyframes lc-ring-go { 50% { box-shadow: 0 0 22px rgba(255, 106, 0, .75); } }
.lc-nx-when { max-width: 5.6rem; font-size: .6rem; font-weight: 700; line-height: 1.15; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang="ar"] .lc-nx-when { font-size: .64rem; }
html.lowfx .lc-nx-ring.go { animation: none; }
/* Big desktop / tablet column: the banner grows with it. */
@container (min-width: 36rem) {
  .lc-banner { gap: 1rem; padding: .7rem .9rem; }
  .lc-banner .lc-nx-art { width: 9.5rem; border-radius: 10px; }
  .lc-banner .lc-nx-top { font-size: .74rem; }
  .lc-banner .lc-nx-name { font-size: 1.5rem; }
  .lc-banner .lc-nx-ico { font-size: 1.5rem; }
  .lc-banner .lc-nx-map { font-size: .92rem; }
  .lc-banner .lc-oc { width: 1.55rem; height: 1.55rem; font-size: .92rem; }
  .lc-banner .lc-nx-cyc { font-size: .74rem; }
  .lc-banner .lc-nx-ring { width: 3.8rem; height: 3.8rem; }
  .lc-banner .lc-nx-ring::before { inset: 5px; }
  .lc-banner .lc-nx-sec { font-size: 1.55rem; }
  .lc-banner .lc-nx-when { max-width: 8rem; font-size: .72rem; }
}

/* "All games": under bots + bot skill, why there are no other options here. */
.lb .lc-rulehint { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 0; padding-inline: .5rem; font-size: .72rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.lb .lc-rulehint .ico { flex: none; font-size: .95rem; color: var(--brand-hot); }

/* Footer, a guest between two games: nothing to confirm; "You're in the next game" where the ready button was. */
.lb .lc-inpill {
  display: inline-flex; align-items: center; gap: .5rem; min-height: max(50px, 3.7rem); padding: 0 1.3rem; border-radius: 11px;
  font-size: 1rem; font-weight: 800; line-height: 1.1; white-space: nowrap; color: #c9f7dc;
  background: linear-gradient(180deg, rgba(53, 208, 127, .2), rgba(53, 208, 127, .08));
  box-shadow: inset 0 0 0 1px rgba(53, 208, 127, .5), inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .3);
  transform: skewX(var(--skew)); animation: lc-ban-in .45s var(--ease-back) backwards;
}
.lb .lc-inpill > * { transform: skewX(var(--unskew)); }
.lb .lc-inpill .ico { font-size: 1.3em; color: var(--ok); filter: drop-shadow(0 0 6px rgba(53, 208, 127, .6)); }
.lb .lc-inpill[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lc-rail { transition: none; }
  .lb .lc-card.active { scale: 1; }
  .lc-upnext, .lc-banner, .lb .lc-inpill, .lc-next.lc-nx-swap .lc-nx-art, .lc-next.lc-nx-swap .lc-nx-txt, .lc-nx-ring.go { animation: none; }
}