:root {
    --lb-r: 16px;
    --lb-skew: -12deg;
    --lb-gap: 14px;
}

.side.is-v4 {
    background:
        radial-gradient(130% 22% at 0% 0%, rgba(77,141,255,.16), transparent 70%),
        linear-gradient(180deg, #0d1322, #090d17);
}
.side-scroll.v4, .drawer-scroll.v4 { gap: 14px; padding: 14px 12px 12px; }

.drawer-scroll.v4 { overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 12px; }

.v4-wheel {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 64px; padding: 8px 12px 8px 86px; border-radius: 14px; text-align: left; overflow: hidden;
    background:
        radial-gradient(120% 140% at 0% 50%, rgba(160,110,255,.45), transparent 60%),
        linear-gradient(120deg, #2a1b5e, #18245a 60%, #142046);
    box-shadow: inset 0 0 0 1px rgba(170,150,255,.28), 0 10px 24px -16px rgba(120,90,255,.9);
    transition: transform .16s var(--ease), box-shadow .16s;
}
.v4-wheel:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(190,170,255,.45), 0 14px 28px -16px rgba(120,90,255,1); }
.v4-wheel img {
    position: absolute; left: -6px; top: 50%; width: 86px; height: auto; transform: translateY(-50%);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); pointer-events: none;
}
.v4-wheel .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v4-wheel .tx b { font-family: var(--f-display); font-size: 12.5px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.v4-wheel .tx small { font-size: 11px; color: #c7bcff; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-wheel .n, .v4-wheel .go {
    flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
    font-size: 11.5px; font-weight: 800;
}
.v4-wheel .n { color: var(--gold-ink); background: var(--gold-grad); box-shadow: 0 0 0 3px rgba(247,201,75,.18); }
.v4-wheel .go { color: #d9d1ff; background: rgba(255,255,255,.08); padding: 0; width: 24px; }
.v4-wheel .go svg { transform: rotate(180deg); }

.v4-g { display: flex; flex-direction: column; gap: 3px; }
.v4-h {
    display: flex; align-items: center; gap: 8px; padding: 0 6px 5px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.v4-h span { display: flex; align-items: center; gap: 7px; }
.v4-h span::before {
    content: ''; width: 9px; height: 3px; border-radius: 2px; background: var(--acc);
    transform: skewX(var(--lb-skew)); box-shadow: 0 0 8px rgba(77,141,255,.8);
}
.v4-h em {
    margin-left: auto; font-style: normal; letter-spacing: 0; text-transform: none; font-size: 11px; font-weight: 700;
    color: var(--green); display: flex; align-items: center; gap: 5px;
}
.v4-h em i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(54,216,154,.18); }
.v4-g nav { display: flex; flex-direction: column; gap: 2px; }

.v4-i {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 8px 4px 5px;
    border-radius: 11px; color: var(--dim); font-size: 13px; font-weight: 700; isolation: isolate;
    transition: color .15s, background .15s;
}
.v4-i:hover { color: #fff; background: rgba(255,255,255,.045); }
.v4-i .ic {
    position: relative; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent);
}
.v4-i .ic .dt {
    position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 2px #0b101c;
}
.v4-i .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-i .n {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
    font-size: 10.5px; font-weight: 800; color: #fff; background: var(--pink);
}
.v4-live .v4-i .n { color: var(--green); background: rgba(54,216,154,.12); }
.v4-i .mt { flex: none; font-size: 11.5px; font-weight: 700; color: var(--faint); }
.v4-i .tg {
    flex: none; height: 17px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center;
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #ffb4c4; background: rgba(255,102,133,.14);
}

.v4-i.on { color: #fff; }
.v4-i.on::before {
    content: ''; position: absolute; inset: 0 2px; z-index: -1; border-radius: 10px;
    background: var(--acc-grad); transform: skewX(var(--lb-skew));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -10px rgba(77,141,255,1);
}
.v4-i.on .ic { color: #fff; background: rgba(255,255,255,.16); }
.v4-i.on .mt { color: rgba(255,255,255,.75); }

.v4-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.v4-foot a {
    display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 11px;
    font-size: 12.5px; font-weight: 800; transition: filter .15s, background .15s;
}
.v4-tg { color: #fff; background: linear-gradient(135deg, #39a8ee, #1f7fd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.v4-tg:hover { filter: brightness(1.08); }
.v4-sup { color: var(--dim); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.v4-sup:hover { color: #fff; background: var(--surface-4); }

.app[data-rail="1"] .side.is-v4 .v4-h { justify-content: center; padding: 6px 0 4px; }
.app[data-rail="1"] .side.is-v4 .v4-h span { font-size: 0; }
.app[data-rail="1"] .side.is-v4 .v4-h span::before { width: 22px; }
.app[data-rail="1"] .side.is-v4 .v4-h em,
.app[data-rail="1"] .side.is-v4 .v4-i .tx,
.app[data-rail="1"] .side.is-v4 .v4-i .mt,
.app[data-rail="1"] .side.is-v4 .v4-i .tg,
.app[data-rail="1"] .side.is-v4 .v4-wheel .tx,
.app[data-rail="1"] .side.is-v4 .v4-foot span { display: none; }
.app[data-rail="1"] .side.is-v4 .v4-i { justify-content: center; padding: 4px 0; }
.app[data-rail="1"] .side.is-v4 .v4-i .n {
    position: absolute; top: 1px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px;
}
.v4-wheel .ri { display: none; }

.app[data-rail="1"] .side.is-v4 .v4-wheel {
    flex: none; width: 44px !important; height: 44px; min-height: 0; margin: 6px auto 0; padding: 0; justify-content: center; overflow: visible; border-radius: 13px;
}
.app[data-rail="1"] .side.is-v4 .v4-wheel img { display: none; }
.app[data-rail="1"] .side.is-v4 .v4-wheel .ri { display: grid; place-items: center; color: #e6dcff; }
.app[data-rail="1"] .side.is-v4 .v4-wheel .n {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; box-shadow: 0 0 0 2px #0b101c;
}
.app[data-rail="1"] .side.is-v4 .v4-wheel .go { display: none; }
.app[data-rail="1"] .side.is-v4 .v4-foot { grid-template-columns: 1fr; width: 100%; }

.drawer.is-v4 .side-foot { flex: none; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }

body[data-top="lobby"] .topbar { gap: 16px; }
.lb-search {
    position: relative; flex: 1; max-width: 600px; margin-inline: 0 auto; display: flex; align-items: center;
    height: 44px; padding: 0 4px 0 16px; border-radius: 13px;
    background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    transition: box-shadow .16s, background .16s;
}
.lb-search:focus-within { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--acc-line-2), 0 0 0 4px rgba(77,141,255,.12); }
.lb-search input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
    color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
}
.lb-search input::placeholder { color: var(--faint); }
.lb-search input::-webkit-search-cancel-button { display: none; }
.lb-search .go {
    flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    color: #fff; background: var(--acc-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.lb-search .go:hover { filter: brightness(1.08); }
.lb-drop {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: min(70vh, 520px); overflow-y: auto;
    padding: 6px; border-radius: 14px; background: #121a2a; box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -18px #000;
}
.lr-h { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.lr {
    display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 10px; outline: 0;
}
.lr:hover, .lr:focus { background: rgba(255,255,255,.06); }
.lr .t { display: flex; flex-direction: column; min-width: 0; }
.lr b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr small { font-size: 11.5px; color: var(--faint); }
.lr-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.lr-pic { flex: none; width: 48px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--surface-3); }
.lr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-all { display: block; padding: 10px; margin-top: 2px; border-top: 1px solid var(--line-soft); color: var(--acc-2); font-size: 12.5px; font-weight: 800; text-align: center; }
.lr-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.topbar .ibtn.lb-sbtn { display: none !important; }

.lb-guest { gap: 10px; }
.lb-guest button {
    position: relative; height: 42px; padding: 0 22px; isolation: isolate;
    font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.lb-guest button::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 9px; transform: skewX(var(--lb-skew)); transition: filter .15s;
}
.lb-guest button:hover::before { filter: brightness(1.12); }
.lb-in::before { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1.5px var(--acc-line-2); }
.lb-reg::before { background: var(--acc-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -12px rgba(77,141,255,1); }
.lb-reg i {
    position: absolute; top: -9px; right: -6px; display: flex; align-items: center; gap: 3px; height: 17px; padding: 0 7px;
    border-radius: 6px; font-style: normal; font-family: var(--f-body, inherit); font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
    color: var(--gold-ink); background: var(--gold-grad); transform: skewX(var(--lb-skew)); box-shadow: 0 4px 10px -4px rgba(247,201,75,.8);
}

.screen.lobby { display: flex; flex-direction: column; gap: 22px; }

.lb-banners { display: flex; flex-direction: column; gap: var(--lb-gap); }
.lb-r1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lb-gap); }
.lb-r2 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--lb-gap); }

.lb-b {
    position: relative; display: flex; min-height: 232px; border-radius: var(--lb-r); overflow: hidden; isolation: isolate;
    cursor: pointer; text-align: left;
    background:
        radial-gradient(90% 120% at 100% 100%, var(--b-glow, rgba(77,141,255,.45)), transparent 62%),
        linear-gradient(135deg, var(--b-1, #16244a), var(--b-2, #0c1430));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 34px -24px #000;
    transition: transform .2s var(--ease), box-shadow .2s;
}

.lb-b::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background:
        linear-gradient(120deg, transparent 46%, var(--b-line, rgba(110,160,255,.5)) 46.3%, transparent 46.8%),
        linear-gradient(120deg, transparent 63%, var(--b-line, rgba(110,160,255,.5)) 63.2%, transparent 63.6%),
        linear-gradient(28deg, transparent 72%, rgba(255,255,255,.1) 72.2%, transparent 72.6%);
}
.lb-b::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
    transform: translateX(-110%); transition: transform .8s var(--ease);
}
.lb-b:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 22px 40px -22px #000; }
.lb-b:hover::after { transform: translateX(110%); }
.lb-b:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }

.lb-tag {
    position: absolute; left: -10px; top: 0; z-index: 3; height: 32px; padding: 0 20px 0 22px; display: flex; align-items: center;
    background: var(--b-tag, var(--acc-grad)); transform: skewX(var(--lb-skew));
    border-bottom-right-radius: 10px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.8);
}
.lb-tag > span {
    display: flex; align-items: center; gap: 6px; transform: skewX(calc(var(--lb-skew) * -1));
    font-size: 12px; font-weight: 800; color: var(--b-tag-ink, #fff); white-space: nowrap;
}

.lb-tx {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 58%; padding: 50px 0 20px 22px;
}
.lb-tx h3 {
    display: flex; flex-direction: column; margin: 0;
    font-family: var(--f-display); font-size: clamp(17px, 1.45vw, 23px); font-weight: 800; line-height: 1.08;
    letter-spacing: -.02em; text-transform: uppercase; font-style: italic; color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.lb-tx h3 em { font-style: italic; color: var(--b-em, var(--gold-text)); }
.lb-tx p { margin: 0; max-width: 34ch; font-size: 12.5px; line-height: 1.45; color: rgba(225,232,248,.78); }
.lb-tx small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--b-em, var(--gold-text)); }
.lb-cta {
    position: relative; margin-top: auto; height: 38px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; isolation: isolate;
    font-size: 12.5px; font-weight: 800; color: var(--b-cta-ink, var(--gold-ink)); white-space: nowrap;
}
.lb-cta::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 9px; transform: skewX(var(--lb-skew));
    background: var(--b-cta, var(--gold-grad)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -12px rgba(0,0,0,.9);
    transition: filter .15s;
}
.lb-b:hover .lb-cta::before { filter: brightness(1.08); }
.lb-cta i { font-style: normal; transition: transform .2s var(--ease); }
.lb-b:hover .lb-cta i { transform: translateX(3px); }
.lb-acts { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.lb-acts .lb-cta { margin-top: 0; }
.lb-tgb {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #39a8ee, #1f7fd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.lb-tgb:hover { filter: brightness(1.1); }

.lb-art { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: 0; pointer-events: none; }
.lb-art img { position: absolute; filter: drop-shadow(0 16px 22px rgba(0,0,0,.45)); transition: transform .5s var(--ease); transform-origin: 50% 100%; }

.lb-b:hover .lb-art img { transform: scale(1.03); }

.b-wheel { --b-1: #2b1c66; --b-2: #121b46; --b-glow: rgba(160,100,255,.55); --b-line: rgba(190,140,255,.55);
    --b-tag: linear-gradient(120deg, #9d6bff, #5b5cff); }
.b-wheel .a-wheel { right: -2%; bottom: 8%; width: 104%; max-width: none; }

.b-dep { --b-1: #3a2a12; --b-2: #1a1428; --b-glow: rgba(247,180,60,.5); --b-line: rgba(255,200,100,.45);
    --b-tag: var(--gold-grad); --b-tag-ink: var(--gold-ink); --b-em: #ffd76a; }
.b-dep .a-chest { right: 2%; bottom: 6%; width: 86%; }
.b-dep .a-gem { right: 6%; top: 12%; width: 22%; animation-delay: -1.5s; }
.b-dep .a-coin { left: 4%; bottom: 14%; width: 18%; }

.b-tg { --b-1: #0f2d52; --b-2: #0b1730; --b-glow: rgba(57,168,238,.55); --b-line: rgba(100,190,255,.5);
    --b-tag: linear-gradient(120deg, #39a8ee, #1f7fd0); --b-em: #8fd3ff; --b-cta: linear-gradient(135deg, #ffffff, #dbe9ff); --b-cta-ink: #0d2a52; }
.b-tg .a-lion { right: 6%; bottom: 0; height: 94%; width: auto; }

.lb-r2 .lb-b { min-height: 200px; }
.lb-r2 .lb-tx { padding-top: 46px; }
.b-car { --b-1: #13234d; --b-2: #0b1430; --b-glow: rgba(77,141,255,.5); cursor: default; }
.lb-car-track { position: relative; flex: 1; display: flex; }
.lb-slide { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.lb-slide.on { position: relative; flex: 1; opacity: 1; visibility: visible; }
.lb-slide .lb-tx { width: 60%; }
.lb-slide .lb-art { width: 46%; }
.lb-slide .a-hero { right: 8%; bottom: 0; height: 100%; width: auto; }
.lb-car-nav { position: absolute; right: 14px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.lb-car-nav button {
    width: 34px; height: 30px; display: grid; place-items: center; color: #fff; isolation: isolate; position: relative;
}
.lb-car-nav button::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; transform: skewX(var(--lb-skew));
    background: rgba(6,10,22,.6); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: background .15s;
}
.lb-car-nav button:hover::before { background: rgba(30,45,80,.8); }
.lb-car-nav button:last-child svg { transform: rotate(180deg); }
.lb-dots { display: flex; gap: 5px; }
.lb-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); transition: width .25s, background .25s; }
.lb-dots i.on { width: 18px; background: var(--gold); }

.b-light {
    --b-1: #0e3b34; --b-2: #0a1a28; --b-glow: rgba(54,216,154,.42); --b-line: rgba(110,240,190,.42);
    --b-tag: linear-gradient(120deg, #3fe0a4, #1fae7a); --b-tag-ink: #06281c; --b-em: #7ff0c2;
    --b-cta: var(--green-grad); --b-cta-ink: var(--green-ink);
}
.b-light .a-friends { right: -2%; bottom: 0; width: 104%; }

.lb-cats {
    position: sticky; top: calc(var(--topbar) + 0px); z-index: 20; margin: -4px calc(var(--pad-x) * -1) 0; padding: 8px var(--pad-x);
    background: linear-gradient(180deg, rgba(10,15,24,.96), rgba(10,15,24,.82));
    backdrop-filter: blur(16px);
}
.lb-cats-in {
    display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 6px; border-radius: 14px; overflow-x: auto; scrollbar-width: none;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.lb-cats-in::-webkit-scrollbar { display: none; }
.lb-cats-in .sp { flex: 1; }
.lb-cat {
    position: relative; flex: none; height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 0; isolation: isolate;
    color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; transition: color .15s;
}
.lb-cat::before {
    content: ''; position: absolute; inset: 0 2px; z-index: -1; border-radius: 10px; transform: skewX(var(--lb-skew));
    background: transparent; transition: background .18s, box-shadow .18s;
}
.lb-cat:hover { color: #fff; }
.lb-cat:hover::before { background: rgba(255,255,255,.06); }
.lb-cat .ic { display: grid; place-items: center; }
.lb-cat .tx { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .3s var(--ease), opacity .2s, margin .3s; }
.lb-cat:hover .tx { max-width: 140px; opacity: 1; margin-left: 8px; }
.lb-cat.on { color: #fff; padding: 0 20px 0 16px; }
.lb-cat.on::before { background: var(--acc-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -10px rgba(77,141,255,1); }
.lb-cat.on .tx { max-width: 140px; opacity: 1; margin-left: 9px; }
.lb-cat + .lb-cat:not(.on)::after {
    content: ''; position: absolute; left: -2px; top: 13px; bottom: 13px; width: 1.5px; background: rgba(255,255,255,.08); transform: skewX(var(--lb-skew));
}

.lb-view { display: flex; flex-direction: column; gap: 26px; }
.lb-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--topbar) + 76px); }
.lb-h { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.lb-h .ic { display: grid; place-items: center; color: var(--acc-2); }
.lb-sec[data-sec="popular"] .lb-h .ic { color: #ff8a3d; }
.lb-sec[data-sec="new"] .lb-h .ic { color: var(--gold); }
.lb-sec[data-sec="live"] .lb-h .ic { color: #ff5a6e; }
.lb-sec[data-sec="slots"] .lb-h .ic { color: #a98bff; }
.lb-sec[data-sec="solo"] .lb-h .ic { color: var(--cyan); }
.lb-h h2 {
    margin: 0; font-family: var(--f-display); font-size: 18px; font-weight: 800; font-style: italic; letter-spacing: -.01em; text-transform: uppercase;
}
.lb-cnt { height: 22px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--dim); background: var(--surface-3); }
.lb-more { margin-left: 8px; font-size: 13px; font-weight: 800; color: var(--acc-2); transition: color .15s; }
.lb-more:hover { color: #fff; }
.lb-arrows { margin-left: auto; display: flex; gap: 6px; }
.lb-arrows button { position: relative; width: 40px; height: 34px; display: grid; place-items: center; color: #fff; isolation: isolate; }
.lb-arrows button::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 9px; transform: skewX(var(--lb-skew));
    background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .15s;
}
.lb-arrows button:hover:not(:disabled)::before { background: rgba(255,255,255,.14); }
.lb-arrows button:disabled { color: var(--dead); cursor: default; }
.lb-arrows button:last-child svg { transform: rotate(180deg); }
.lb-sec.no-scroll .lb-arrows { visibility: hidden; }
.lb-back { position: relative; width: 36px; height: 34px; display: grid; place-items: center; color: #fff; isolation: isolate; }
.lb-back::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 9px; transform: skewX(var(--lb-skew)); background: rgba(255,255,255,.08); }

.lb-row {
    --cols: 6;
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto);
    grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--lb-gap)) / var(--cols));
    gap: 16px var(--lb-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px 2px 6px; margin: -4px -2px -6px;
}
.lb-row::-webkit-scrollbar { display: none; }
.lb-row > * { scroll-snap-align: start; }
.lb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px var(--lb-gap); }

.lc { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.lc-cv {
    position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; isolation: isolate;
    background: #121a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    transition: transform .22s var(--ease), box-shadow .22s;
}
.lc:hover .lc-cv { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 28px -16px color-mix(in srgb, var(--tone, #4d8dff) 70%, #000); }

.lc-bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--tone) 75%, #fff 0%), transparent 70%),
        repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,.07) 0 9deg, transparent 9deg 22deg),
        linear-gradient(170deg, color-mix(in srgb, var(--env) 92%, #fff 8%), color-mix(in srgb, var(--env) 40%, #060914) 70%);
}
.lc-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5,8,18,.75) 100%);
}
.lc-hero {
    position: absolute; left: 50%; top: 4%; height: 84%; width: auto; transform: translateX(-50%);
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); transition: transform .3s var(--ease);
}
.lc:hover .lc-hero { transform: translateX(-50%) scale(1.06) rotate(-2deg); }
.lc-name {
    position: absolute; left: 6px; right: 6px; bottom: 8px; z-index: 1; text-align: center;
    font-family: var(--f-display); font-size: clamp(14px, 1.25vw, 19px); font-weight: 800; font-style: italic; line-height: 1;
    letter-spacing: -.01em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--tone) 55%, #fff)); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 60%, transparent));
}
.lc-name.long { font-size: clamp(12px, 1.02vw, 16px); }
.lc-bd {
    position: absolute; left: 8px; top: 8px; z-index: 2; height: 20px; padding: 0 9px; display: grid; place-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; border-radius: 6px;
    transform: skewX(var(--lb-skew)); background: var(--acc-grad); box-shadow: 0 6px 12px -6px rgba(0,0,0,.7);
}
.lc-bd.new { background: linear-gradient(120deg, #9d6bff, #5b5cff); }
.lc-bd.live { background: linear-gradient(120deg, #ff6a7d, #e23a52); }
.lc-bd.adm { background: linear-gradient(120deg, #ff6685, #c8306a); }
.lc-bd.day, .lc-bd.fs { color: var(--gold-ink); background: var(--gold-grad); }
.lc-bd.off { background: #4b5367; }
.lc-on {
    position: absolute; right: 8px; top: 8px; z-index: 2; height: 20px; padding: 0 8px; border-radius: 999px;
    display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #fff;
    background: rgba(6,10,20,.6); backdrop-filter: blur(6px);
}
.lc-on i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(54,216,154,.25); }
.lc-play {
    position: absolute; left: 50%; top: 46%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: var(--acc-grad); box-shadow: 0 10px 24px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3);
    opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .2s, transform .2s var(--ease);
}
.lc:hover .lc-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.lc-meta b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-meta small { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lc.is-slot .lc-cv { aspect-ratio: 360 / 472; background: linear-gradient(150deg, #1d2a4a, #10172a); }
.lc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.lc.is-slot:hover .lc-img { transform: scale(1.05); }
.lc-letter {
    position: absolute; inset: 0; display: grid; place-items: center; z-index: -1;
    font-family: var(--f-display); font-size: 40px; font-weight: 800; color: rgba(255,255,255,.15);
}
.lc.is-slot .lc-cv::after { content: ''; position: absolute; inset: 0; background: rgba(4,8,18,0); transition: background .2s; }
.lc.is-slot:hover .lc-cv::after { background: rgba(4,8,18,.35); }

.lc.is-skel .lc-cv, .lc.is-skel .lc-meta b, .lc.is-skel .lc-meta small {
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
    background-size: 200% 100%; animation: lbSkel 1.3s linear infinite;
}
.lc.is-skel .lc-meta b { height: 12px; width: 70%; border-radius: 4px; }
.lc.is-skel .lc-meta small { height: 10px; width: 45%; border-radius: 4px; }
@keyframes lbSkel { to { background-position: -200% 0; } }

.lb-ticker { margin-top: -4px; }
.screen.lobby .legal { margin: 0; }

@media (max-width: 1280px) {
    .lb-row { --cols: 5; }
    .lb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
    .lb-r1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lb-tx { width: 70%; padding-left: 18px; }
    .lb-tx p { display: none; }
    .lb-r2 .lb-tx p { display: block; }
    .lb-row { --cols: 4; }
    .lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
    .lb-search { max-width: none; }
    .lb-r1 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); }
    .lb-r1::-webkit-scrollbar { display: none; }
    .lb-r1 .lb-b { flex: 0 0 min(420px, 78%); scroll-snap-align: center; }
    .lb-r1 .lb-tx p { display: block; }
    .lb-row { --cols: 4; }
}
@media (max-width: 760px) {
    :root { --lb-gap: 10px; }
    .screen.lobby { gap: 18px; }
    body[data-top="lobby"] .topbar { gap: 8px; }
    .topbar .top-right > .ibtn.lb-sbtn { display: grid !important; }

    .lb-search { display: none; }
    .topbar.is-search .lb-search {
        display: flex; position: absolute; left: 10px; right: 10px; top: calc(100% + 6px); z-index: 45;
        background: #121a2a; box-shadow: inset 0 0 0 1px var(--acc-line-2), 0 18px 34px -14px #000;
    }
    .lb-guest { gap: 6px; }
    .lb-guest button { height: 36px; padding: 0 12px; font-size: 10.5px; }
    .lb-reg i { display: none; }
    .lb-r1 .lb-b { flex-basis: 86%; min-height: 200px; }
    .lb-r2 { grid-template-columns: minmax(0, 1fr); }
    .lb-r2 .lb-b { min-height: 190px; }
    .lb-tx { width: 66%; padding: 44px 0 16px 16px; }
    .lb-tx h3 { font-size: 17px; }
    .lb-tx p { font-size: 12px; }
    .lb-cats { margin-top: -6px; padding: 6px var(--pad-x); }
    .lb-cats-in { height: 46px; }
    .lb-cat { height: 36px; padding: 0 10px; }
    .lb-cat:hover .tx { max-width: 0; opacity: 0; margin: 0; }
    .lb-cat.on .tx { max-width: 140px; opacity: 1; margin-left: 8px; }
    .lb-h h2 { font-size: 15px; }
    .lb-more { font-size: 12px; }
    .lb-arrows { display: none; }
    .lb-more { margin-left: auto; }
    .lb-row { grid-auto-columns: 38%; scroll-snap-type: x proximity; }
    .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lc-meta b { font-size: 12.5px; }
    .lc-meta small { font-size: 11px; }
    .lc-name { font-size: 13px; }
    .lc-name.long { font-size: 11px; }
}
@media (min-width: 761px) and (max-width: 1040px) {
    .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html.is-lite .lb-b::after, html.is-lite .lc-hero { transition: none; }
html.is-lite .lb-b:hover, html.is-lite .lc:hover .lc-cv { transform: none; }
html.is-lite .lc:hover .lc-hero { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
    .lb-b, .lb-b::after, .lc-cv, .lc-hero, .lb-slide, .lb-cat .tx { transition: none !important; }
    .lc.is-skel .lc-cv { animation: none; }
}

.site-foot.f4 {
    margin-top: 34px; padding: 0; border-radius: 0; background: none; box-shadow: none;
    display: flex; flex-direction: column; gap: 30px;
}
.f4-cta {
    position: relative; display: flex; align-items: center; gap: 24px; min-height: 132px; padding: 18px 28px 18px 190px;
    border-radius: var(--lb-r); overflow: hidden; isolation: isolate;
    background:
        radial-gradient(60% 140% at 100% 50%, rgba(140,190,255,.35), transparent 60%),
        linear-gradient(120deg, #2f6fe8, #3b7cf6 45%, #1f5ce0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 22px 40px -24px rgba(77,141,255,.9);
}
.f4-cta::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background:
        linear-gradient(130deg, transparent 22%, rgba(255,255,255,.4) 22.2%, transparent 22.6%),
        linear-gradient(130deg, transparent 30%, rgba(255,255,255,.25) 30.2%, transparent 30.5%),
        linear-gradient(50deg, transparent 82%, rgba(255,255,255,.35) 82.2%, transparent 82.6%);
}
.f4-cta-art { position: absolute; left: 40px; bottom: -18px; height: 140px; width: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.f4-cta-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.f4-cta-tx b { font-family: var(--f-display); font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; font-style: italic; text-transform: uppercase; color: #fff; line-height: 1.1; }
.f4-cta-tx span { font-size: 13.5px; color: rgba(235,242,255,.85); }
.f4-play, .f4-ref {
    position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; isolation: isolate;
    font-family: var(--f-display); font-weight: 800; font-style: italic; text-transform: uppercase; white-space: nowrap;
}
.f4-play { height: 52px; padding: 0 38px; font-size: 15px; color: var(--gold-ink); }
.f4-play::before, .f4-ref::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 10px; transform: skewX(var(--lb-skew)); transition: filter .15s;
}
.f4-play::before { background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 24px -12px rgba(0,0,0,.7); }
.f4-play:hover::before, .f4-ref:hover::before { filter: brightness(1.08); }

.f4-sec h3 { margin: 0 0 14px; font-family: var(--f-display); font-size: 18px; font-weight: 800; font-style: italic; text-transform: uppercase; color: #fff; }
.f4-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f4-prov, .f4-pay {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px;
    font-size: 13px; font-weight: 800; color: var(--dim);
    background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line);
}
.f4-prov { transition: color .15s, background .15s, box-shadow .15s; }
.f4-prov:hover { color: #fff; background: rgba(77,141,255,.12); box-shadow: inset 0 0 0 1px var(--acc-line-2); }
.f4-prov i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--faint); }
.f4-prov.is-all { color: var(--acc-2); }
.f4-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.f4-trust a {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
    background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s;
}
.f4-trust a:hover { background: rgba(255,255,255,.055); }
.f4-trust .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--green); background: rgba(54,216,154,.12); }
.f4-trust a:nth-child(2) .ic { color: #5cc0ff; background: rgba(57,168,238,.14); }
.f4-trust .ic.is-18 { color: #ff8a8a; background: none; box-shadow: inset 0 0 0 2px rgba(255,107,107,.55); border-radius: 50%; font-size: 12px; font-weight: 900; }
.f4-trust b { display: block; font-size: 13.5px; color: #fff; }
.f4-trust small { display: block; font-size: 12px; color: var(--faint); line-height: 1.4; }

.f4-main {
    display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 28px;
    padding-top: 28px; border-top: 1px solid var(--line-soft);
}
.f4-logo img { display: block; height: 34px; width: auto; }
.f4-acts { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.f4-ref { height: 44px; padding: 0 22px; font-size: 12.5px; color: #fff; }
.f4-ref::before { background: var(--acc-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -12px rgba(77,141,255,1); }
.f4-ic {
    width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #39a8ee, #1f7fd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.f4-ic:hover { filter: brightness(1.1); }
.f4-col { display: flex; flex-direction: column; gap: 11px; }
.f4-col b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.f4-col a { font-size: 13.5px; font-weight: 600; color: var(--dim); transition: color .15s; }
.f4-col a:hover { color: #fff; }
.f4-bottom {
    display: flex; justify-content: space-between; gap: 12px; padding: 16px 0 6px; border-top: 1px solid var(--line-soft);
    font-size: 12px; color: var(--faint);
}

@media (max-width: 1100px) {
    .f4-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .f4-brand { grid-column: 1 / -1; }
    .f4-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .site-foot.f4 { gap: 24px; margin-bottom: 110px; }
    .f4-cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 20px 22px 20px; min-height: 0; }
    .f4-cta-art { left: auto; right: 6px; bottom: -10px; height: 120px; }
    .f4-cta-tx { padding-right: 90px; }
    .f4-play { height: 46px; padding: 0 28px; font-size: 13.5px; }
    .f4-sec h3 { font-size: 15px; }
    .f4-prov, .f4-pay { height: 36px; padding: 0 12px; font-size: 12px; }
    .f4-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .f4-col:last-child { grid-column: 1 / -1; }
    .f4-bottom { flex-direction: column; }
}

.lb-sec[data-sec="slots"] .lb-row { --cols: 8; --lb-gap: 12px; }
.lb-sec[data-sec="slots"] .lb-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 12px; }
.lc.is-slot { gap: 7px; }
.lc.is-slot .lc-cv { border-radius: 12px; }
.lc.is-slot .lc-meta b { font-size: 12.5px; }
.lc.is-slot .lc-meta small { font-size: 11px; }
.lc.is-slot .lc-play { width: 38px; height: 38px; }
.lc.is-slot .lc-bd { height: 18px; padding: 0 7px; font-size: 9px; }
@media (max-width: 1280px) {
    .lb-sec[data-sec="slots"] .lb-row { --cols: 7; }
    .lb-sec[data-sec="slots"] .lb-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
    .lb-sec[data-sec="slots"] .lb-row { --cols: 5; }
    .lb-sec[data-sec="slots"] .lb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .lb-sec[data-sec="slots"] .lb-row { grid-auto-columns: 29%; }
    .lb-sec[data-sec="slots"] .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
}

.lb-row { --cols: 7; --lb-gap: 12px; }
.lb-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px 12px; }
.lc { gap: 7px; }
.lc-cv { border-radius: 12px; }
.lc-meta b { font-size: 13px; }
.lc-meta small { font-size: 11.5px; }
.lc-name { font-size: clamp(13px, 1.05vw, 17px); bottom: 7px; }
.lc-name.long { font-size: clamp(11px, .88vw, 14px); }
.lc-bd { height: 18px; padding: 0 7px; font-size: 9px; }
.lc-on { height: 18px; padding: 0 7px; font-size: 10px; }
.lc-play { width: 40px; height: 40px; }
@media (max-width: 1280px) {
    .lb-row { --cols: 6; }
    .lb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
    .lb-row { --cols: 5; }
    .lb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .lb-row { grid-auto-columns: 34%; }
    .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
    .lc-name { font-size: 12px; }
    .lc-name.long { font-size: 10px; }
}

@media (max-width: 760px) {
    .lb-banners {
        flex-direction: row; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 2px;
    }
    .lb-banners::-webkit-scrollbar { display: none; }
    .lb-r1, .lb-r2 { display: contents; }
    .lb-banners .lb-b { flex: 0 0 84%; min-height: 150px; scroll-snap-align: center; border-radius: 14px; }
    .lb-banners .lb-tx { width: 60%; padding: 36px 0 12px 14px; gap: 6px; }
    .lb-banners .lb-tx h3 { font-size: 14.5px; }
    .lb-banners .lb-tx p, .lb-banners .lb-tx small { display: none; }
    .lb-banners .lb-art { width: 44%; }
    .lb-tag { height: 24px; padding: 0 14px 0 18px; }
    .lb-tag > span { font-size: 10.5px; gap: 5px; }
    .lb-cta { height: 30px; padding: 0 13px; font-size: 11.5px; }
    .lb-tgb { width: 30px; height: 30px; border-radius: 8px; }
    .lb-tgb svg { width: 15px; height: 15px; }
    .lb-acts { gap: 8px; }
    .lb-acts .lb-cta { padding: 0 11px; }
    .lb-car-nav { top: 6px; right: 8px; gap: 6px; }
    .lb-car-nav button { width: 26px; height: 24px; }
    .lb-dots { display: none; }
    .lb-slide .lb-tx { width: 60%; }
    .lb-slide .lb-art { width: 42%; }
    .lb-slide .a-hero { right: 4%; height: 96%; }
    .b-wheel .a-wheel { right: -6%; bottom: 10%; width: 112%; }
    .b-tg .a-lion { height: 88%; }
}
.lc-bd .s { display: none; }

@media (max-width: 760px) {
    .lb-row, .lb-sec[data-sec="slots"] .lb-row {
        --lb-gap: 10px;
        grid-auto-columns: calc((100% - 2 * var(--pad-x) - 2 * 10px) / 3.25);
        margin: -4px calc(var(--pad-x) * -1) -6px; padding: 4px var(--pad-x) 6px;
        scroll-padding-inline: var(--pad-x); gap: 14px 10px;
    }
    .lb-sec[data-sec="slots"] .lb-row { grid-auto-columns: calc((100% - 2 * var(--pad-x) - 3 * 10px) / 4.25); }
    .lb-sec { gap: 10px; }
    .lb-view { gap: 22px; }
    .lc { gap: 6px; }
    .lc-cv { border-radius: 11px; }
    .lc-hero { height: 80%; top: 5%; }
    .lc-name { font-size: 11px; bottom: 6px; left: 4px; right: 4px; }
    .lc-name.long { font-size: 9.5px; }
    .lc-bd { left: 5px; top: 5px; height: 15px; padding: 0 5px; font-size: 8px; border-radius: 4px; }
    .lc-bd .l { display: none; }
    .lc-bd .s { display: inline; }
    .lc-on { right: 5px; top: 5px; height: 15px; padding: 0 5px; gap: 3px; font-size: 9px; }
    .lc-on i { width: 5px; height: 5px; }
    .lc-meta { padding: 0 1px; }
    .lc-meta b { font-size: 12px; }
    .lc-meta small { font-size: 10.5px; }
    .lc.is-slot .lc-meta b { font-size: 11px; }
    .lc.is-slot .lc-meta small { font-size: 10px; }
    .lc-play { display: none; }
}

body[data-top="lobby"] .topbar { z-index: 30; }

body[data-top="lobby"] .side { z-index: 35; }

@media (max-width: 760px) {
    .lb-row { grid-auto-columns: calc((100% - 2 * var(--pad-x) - 2 * 10px) / 2.5); }
    .lb-sec[data-sec="slots"] .lb-row { grid-auto-columns: calc((100% - 2 * var(--pad-x) - 3 * 10px) / 3.4); }
    .lc-name { font-size: 13px; bottom: 7px; }
    .lc-name.long { font-size: 11px; }
    .lc-meta b { font-size: 13px; }
    .lc-meta small { font-size: 11px; }
    .lc-bd { height: 17px; font-size: 9px; padding: 0 6px; }
    .lc-on { height: 17px; font-size: 10px; }
    .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.app[data-rail="1"] .side.is-v4 .v4-i.on::before { display: none; }
.app[data-rail="1"] .side.is-v4 .v4-i.on .ic {
    color: #fff; background: var(--acc-grad);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(77,141,255,1);
}
.app[data-rail="1"] .side.is-v4 .v4-i:hover { background: none; }
.app[data-rail="1"] .side.is-v4 .v4-i:hover .ic { filter: brightness(1.25); }

.lc-hero { filter: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lc-bg::before {
    content: ''; position: absolute; left: 22%; right: 22%; bottom: 10%; height: 18%;
    background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); pointer-events: none;
}

@media (hover: none) {
    .lc-name { filter: none; }
    .lb-art img, .f4-cta-art, .v4-wheel img { filter: none; }
}