/*
 * Public live view — a full-screen broadcast board in the TNV red and gold.
 *
 * The stadium is drawn in CSS (no photos), so it scales to any screen and weighs nothing.
 * Mobile first; the stage spreads into two columns from 900px.
 */
:root {
    --ls-red: #AC2019;
    --ls-red-deep: #5A110D;
    --ls-red-dark: #2A0806;
    --ls-night: #14040a;
    --ls-gold: #FFC52E;
    --ls-gold-deep: #E89B0C;
    --ls-ink: #1d1d1f;
    --ls-white: #ffffff;
    --ls-muted: rgba(255, 255, 255, .72);
    --ls-line: rgba(255, 255, 255, .16);
    --ls-card: #ffffff;
    --ls-card-ink: #5A110D;
    --ls-sold: #2f8f3a;
    --ls-unsold: #c62828;
    --ls-avail: #b7791f;
    --ls-radius: 10px;
    --ls-font: 'Fredoka', 'Lexend', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
[hidden] { display: none !important; }

body.ls {
    font-family: var(--ls-font);
    color: var(--ls-white);
    background: var(--ls-night);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ── Stadium backdrop ─────────────────────────────────────────────────────── */
.ls-bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% -10%, #6b1712 0%, #3a0a0c 38%, var(--ls-night) 75%);
}
.ls-bg__lights {
    position: absolute; top: 4%; width: 34vw; height: 38vh; opacity: .75;
    background:
        radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 45% 20%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 70% 35%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 30% 60%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 60% 55%, #fff 0 2px, transparent 3px),
        radial-gradient(ellipse at 45% 40%, rgba(255, 236, 200, .55) 0%, transparent 60%);
    filter: blur(1.5px);
}
.ls-bg__lights--l { left: -6vw; transform: rotate(-18deg); }
.ls-bg__lights--r { right: -6vw; transform: rotate(18deg) scaleX(-1); }
.ls-bg__crowd {
    position: absolute; left: 0; right: 0; top: 46%; height: 26%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 6px, rgba(0, 0, 0, .12) 6px 14px),
        linear-gradient(180deg, rgba(172, 32, 25, .25), rgba(20, 4, 10, .6));
    filter: blur(6px);
}
.ls-bg__pitch {
    position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 8vw, transparent 8vw 16vw),
        linear-gradient(180deg, #2f6b22 0%, #3f8a2a 40%, #1d3f14 100%);
    opacity: 0;
    transition: opacity .4s;
}
/* The pitch belongs to the stage; the list tabs sit on the darker stand. */
body[data-tab="auction"] .ls-bg__pitch { opacity: 1; }
body:not([data-tab="auction"]) .ls-bg__crowd { opacity: .45; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.ls-top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand right" "title title";
    gap: 10px 14px;
    align-items: center;
    padding: 12px 16px 6px;
}
.ls-brand {
    grid-area: brand;
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; font-size: 1.15rem; white-space: nowrap;
}
.ls-brand img { width: 30px; height: 30px; }
.ls-brand b { color: var(--ls-gold); }

.ls-title { grid-area: title; position: relative; padding-left: 46px; min-width: 0; }
.ls-title__badge {
    position: absolute; left: 0; top: 0; z-index: 2;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #e0473c, var(--ls-red) 60%, var(--ls-red-deep));
    border: 3px solid var(--ls-gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.ls-title__badge img { width: 34px; height: 34px; }
.ls-title__bar {
    margin-left: 4px;
    padding: 6px 28px 6px 20px;
    background: linear-gradient(100deg, var(--ls-red-deep), var(--ls-red) 55%, #d0352b);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    border-top: 2px solid rgba(255, 255, 255, .35);
}
.ls-title__name {
    display: block; font-weight: 700; font-style: italic; letter-spacing: .02em;
    font-size: 1.15rem; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-title__sub {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 0 16px; padding: 2px 26px 2px 12px;
    background: linear-gradient(90deg, var(--ls-gold-deep), var(--ls-gold));
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    color: var(--ls-ink); font-size: .78rem; font-weight: 500;
    width: fit-content; max-width: 100%;
}
.ls-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }

.ls-right { grid-area: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.ls-meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.ls-views { display: inline-flex; align-items: center; gap: 5px; color: var(--ls-muted); }
.ls-views b { color: var(--ls-white); }
.ls-conn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; color: var(--ls-muted);
}
.ls-conn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f0b429; }
.ls-conn.is-live::before { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.ls-conn.is-down::before { background: #ff5b5b; }

.ls-tabs {
    display: flex; gap: 2px; overflow-x: auto; max-width: 100%;
    scrollbar-width: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    justify-content: space-around;
    background: rgba(26, 6, 5, .94);
    border-top: 1px solid var(--ls-line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    backdrop-filter: blur(8px);
}
.ls-tabs::-webkit-scrollbar { display: none; }
.ls-tabs > * {
    text-decoration: none;
    background: none; border: 0; padding: 8px 10px; border-radius: 8px;
    font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ls-white); white-space: nowrap;
}
.ls-tabs > *.is-on { color: var(--ls-gold); background: rgba(255, 197, 46, .1); }

.ls-actions { display: flex; gap: 6px; }
.ls-icon {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255, 255, 255, .1); border: 1px solid var(--ls-line);
    text-decoration: none; font-size: 1rem;
    transition: background .15s, transform .15s;
}
.ls-icon:hover { background: rgba(255, 255, 255, .2); }
.ls-icon--gold { background: var(--ls-gold); color: var(--ls-ink); border-color: var(--ls-gold); }
.ls-icon.is-on { color: var(--ls-gold); }
.ls-icon.is-spin i { animation: ls-spin .6s linear; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.ls-main { padding: 8px 16px 110px; }
.ls-panel { animation: ls-in .25s ease; }
@keyframes ls-in { from { opacity: 0; transform: translateY(6px); } }

.ls-empty { text-align: center; padding: 60px 10px; color: var(--ls-muted); }
.ls-empty i { font-size: 2.2rem; display: block; margin-bottom: 8px; }

.ls-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 999px; padding: 11px 22px;
    font-weight: 600; text-decoration: none;
}
.ls-btn--gold { background: linear-gradient(180deg, var(--ls-gold), var(--ls-gold-deep)); color: var(--ls-ink); }

/* Welcome */
.ls-welcome { text-align: center; padding-top: 6vh; }
.ls-welcome__kicker { margin: 0; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ls-welcome__mark { width: 110px; height: 110px; margin: 14px auto 6px; display: block; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5)); }
.ls-welcome__brand { margin: 0 0 22px; font-size: 2.4rem; font-weight: 500; }
.ls-welcome__brand b { color: var(--ls-gold); font-weight: 700; }
.ls-welcome__card {
    max-width: 460px; margin: 0 auto; padding: 22px 20px;
    background: rgba(255, 255, 255, .07); border: 1px solid var(--ls-line);
    border-radius: 16px; backdrop-filter: blur(6px);
}
.ls-welcome__name { font-size: 1.5rem; font-weight: 700; }
.ls-welcome__facts { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 14px; color: var(--ls-muted); }
.ls-welcome__facts b { color: var(--ls-gold); }
.ls-welcome__sponsor { color: var(--ls-muted); font-size: .9rem; margin: 0 0 16px; }

/* ── Stage ───────────────────────────────────────────────────────────────── */
.ls-stage { position: relative; }
.ls-stage__body {
    position: relative;
    display: grid; gap: 22px;
    padding-top: 10px;
}

.ls-player { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ls-photo {
    position: relative; width: 170px; height: 170px; flex: none;
    border-radius: 50%; padding: 5px;
    background: conic-gradient(var(--ls-gold), #fff3c4, var(--ls-gold-deep), var(--ls-gold));
    box-shadow: 0 0 0 6px rgba(255, 197, 46, .18), 0 12px 30px rgba(0, 0, 0, .5);
}
.ls-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.ls-photo__no {
    position: absolute; top: 4px; left: 4px;
    min-width: 42px; height: 42px; padding: 0 6px;
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe083, var(--ls-gold-deep));
    color: var(--ls-ink); font-weight: 700; font-size: 1.15rem;
    border: 3px solid #fff5d6; box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.ls-player__info { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ls-cat { font-weight: 700; font-size: 1.2rem; text-transform: uppercase; }
.ls-strip {
    background: linear-gradient(90deg, var(--ls-gold), #ffd760);
    color: var(--ls-ink);
    font-weight: 600; font-size: 1.2rem;
    padding: 8px 26px 8px 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.ls-strip--1 { font-size: 1.45rem; font-weight: 700; }
.ls-strip--2 { width: 92%; }
.ls-strip--3 { width: 84%; }
.ls-facts { font-weight: 600; font-size: 1.05rem; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.ls-base {
    display: inline-flex; align-self: flex-start; align-items: stretch;
    border-radius: 6px; overflow: hidden; border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.ls-base span { background: #e9e9ee; color: #444; padding: 4px 10px; font-weight: 500; }
.ls-base b { background: linear-gradient(180deg, #d13a2f, var(--ls-red)); padding: 4px 14px; }

.ls-bid { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ls-squad {
    background: var(--ls-red-deep); border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 4px; padding: 3px 10px; font-weight: 600; font-size: .95rem;
}
.ls-team-logo {
    width: 116px; height: 116px; border-radius: 14px;
    display: grid; place-items: center; overflow: hidden;
    background: #2b2f36; box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.ls-team-logo img { width: 100%; height: 100%; object-fit: cover; }
.ls-team-logo--empty i { font-size: 2.8rem; color: var(--ls-gold); }
.ls-team-name { font-weight: 700; font-size: 1.35rem; }
.ls-price {
    width: 100%; max-width: 440px;
    border-top: 1px solid var(--ls-line); border-bottom: 1px solid var(--ls-line);
    padding: 6px 0 8px;
}
.ls-price small { display: block; color: var(--ls-muted); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
.ls-price div { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ls-price b { font-size: 3.2rem; font-weight: 700; color: var(--ls-gold); line-height: 1.1; }
.ls-coin {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #ffe89a, var(--ls-gold-deep));
    color: #8a4b00; font-weight: 700; font-size: 1.4rem;
    border: 3px solid #ffd45c;
}
.ls-timer {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0, 0, 0, .35); border: 1px solid var(--ls-line);
    border-radius: 999px; padding: 4px 14px; font-size: 1rem;
}
.ls-timer.is-low { background: var(--ls-red); animation: ls-pulse .8s infinite alternate; }
@keyframes ls-pulse { to { transform: scale(1.06); } }

.ls-stage__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ls-maxbid {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, #7a1812, var(--ls-red-deep));
    border: 2px solid #fff; border-radius: 8px; padding: 4px 14px;
}
.ls-maxbid small { font-size: .7rem; line-height: 1; font-weight: 700; }
.ls-maxbid b { font-size: 1.35rem; }
.ls-counters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ls-count { border: 2px solid rgba(255, 255, 255, .85); border-radius: 5px; padding: 3px 12px; font-weight: 600; }
.ls-count--sold { background: var(--ls-sold); }
.ls-count--unsold { background: var(--ls-unsold); }
.ls-count--avail { background: var(--ls-avail); }

.ls-flag {
    position: absolute; top: 40px; left: 50%; transform: translateX(-50%) rotate(-8deg);
    padding: 6px 22px; border: 4px solid currentColor; border-radius: 8px;
    font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; white-space: nowrap;
    background: rgba(0, 0, 0, .35);
}
.ls-flag--sold { color: #6ef08a; }
.ls-flag--unsold { color: #ff7a7a; }

.ls-waiting { text-align: center; padding: 8vh 0 2vh; }
.ls-waiting img { width: 90px; height: 90px; opacity: .9; }
.ls-waiting h2 { margin: 12px 0 4px; font-size: 1.8rem; }
.ls-waiting p { margin: 0 0 16px; color: var(--ls-muted); }

.ls-video {
    position: fixed; right: 16px; top: 130px; z-index: 15;
    width: 42vw; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 12px; border: 2px solid var(--ls-gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6); background: #000;
}

/* ── Break banner and sold stamp ─────────────────────────────────────────── */
.ls-break {
    position: fixed; left: 50%; top: 140px; transform: translateX(-50%); z-index: 30;
    background: var(--ls-gold); color: var(--ls-ink);
    padding: 10px 22px; border-radius: 999px; font-weight: 600;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); text-align: center;
}
.ls-stamp {
    position: fixed; inset: 0; z-index: 40;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: clamp(3rem, 12vw, 8rem); font-weight: 700; letter-spacing: .06em;
    background: rgba(10, 2, 4, .55); pointer-events: none;
    animation: ls-stamp 3.2s ease forwards;
}
.ls-stamp small { font-size: clamp(1rem, 3vw, 1.8rem); letter-spacing: 0; margin-top: 6px; color: #fff; }
.ls-stamp--sold { color: #6ef08a; text-shadow: 0 0 30px rgba(110, 240, 138, .6); }
.ls-stamp--unsold { color: #ff7a7a; text-shadow: 0 0 30px rgba(255, 122, 122, .6); }
@keyframes ls-stamp {
    0% { opacity: 0; transform: scale(1.6); }
    12% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Dock ────────────────────────────────────────────────────────────────── */
.ls-dock {
    position: fixed; right: 12px; bottom: 74px; z-index: 21;
    display: flex; flex-direction: column; gap: 8px;
}
.ls-sponsor { text-align: center; color: var(--ls-muted); font-size: .85rem; margin: -90px 0 90px; }

/* ── List tabs: toolbar, cards, tables ───────────────────────────────────── */
.ls-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--ls-line);
}
.ls-bar__title { font-size: 1.3rem; font-weight: 600; }
.ls-bar__title span { color: var(--ls-muted); font-size: 1rem; }
.ls-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }

.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-chips button {
    background: #fff; color: var(--ls-red); border: 0; border-radius: 4px;
    padding: 6px 12px; font-weight: 600; font-size: .85rem; text-transform: uppercase;
}
.ls-chips button b { margin-left: 2px; }
.ls-chips button.is-on { background: var(--ls-red); color: #fff; box-shadow: inset 0 0 0 2px var(--ls-gold); }

.ls-search {
    position: relative; flex: 1 1 200px; display: block;
}
.ls-search input {
    width: 100%; padding: 9px 36px 9px 12px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .3); color: #fff;
    font: inherit;
}
.ls-search input::placeholder { color: rgba(255, 255, 255, .6); }
.ls-search i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.ls-select {
    flex: 1 1 140px; padding: 9px 10px; border-radius: 6px; font: inherit;
    border: 0; background: #fff; color: var(--ls-red); font-weight: 600;
}

.ls-view-toggle { display: inline-flex; gap: 4px; }
.ls-view-toggle button {
    width: 36px; height: 36px; border-radius: 6px; border: 0;
    background: rgba(255, 255, 255, .12); font-size: 1.1rem;
}
.ls-view-toggle button.is-on { background: #fff; color: var(--ls-red); }

.ls-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

.ls-card {
    display: grid; grid-template-columns: 110px 1fr; align-items: stretch;
    background: linear-gradient(135deg, var(--ls-red-deep), var(--ls-red));
    border-radius: 4px; overflow: hidden; position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.ls-card.is-lead { box-shadow: 0 0 0 3px var(--ls-gold), 0 8px 20px rgba(0, 0, 0, .35); }
.ls-card__logo { padding: 10px; display: grid; place-items: center; }
.ls-card__logo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #2b2f36; }
.ls-card__logo--photo { position: relative; }
.ls-card__no {
    position: absolute; top: 6px; left: 6px; z-index: 1;
    min-width: 24px; height: 24px; padding: 0 4px; border-radius: 50%;
    background: var(--ls-red); border: 2px solid #fff;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.ls-card__rows { margin: 0; display: grid; }
.ls-card__rows > div { display: grid; grid-template-columns: 96px 1fr; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.ls-card__rows dt {
    padding: 7px 8px; font-weight: 600; font-size: .78rem; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.ls-card__rows dd {
    margin: 0; padding: 7px 10px; background: var(--ls-card); color: var(--ls-card-ink);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: .92rem; min-width: 0; overflow-wrap: anywhere;
}
.ls-card__more, .ls-card__status {
    grid-column: 1 / -1; border: 0; padding: 8px 12px; font-size: .85rem;
    background: rgba(0, 0, 0, .25); text-align: center;
}
.ls-card__more { font-weight: 600; }
.ls-card__more:hover { background: rgba(0, 0, 0, .4); }
.ls-card--player.is-sold .ls-card__status { background: rgba(47, 143, 58, .55); }
.ls-card--player.is-unsold .ls-card__status { background: rgba(198, 40, 40, .55); }

.ls-tag {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: rgba(255, 255, 255, .2); color: #fff;
}
.ls-tag--sold { background: var(--ls-sold); }
.ls-tag--unsold { background: var(--ls-unsold); }
.ls-tag--live { background: var(--ls-gold); color: var(--ls-ink); }

.ls-table-wrap { overflow-x: auto; border-radius: 6px; }
.ls-table { width: 100%; border-collapse: collapse; background: #fff; color: var(--ls-card-ink); min-width: 560px; }
.ls-table th {
    background: var(--ls-red); color: #fff; text-align: left;
    padding: 10px 12px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}
.ls-table td { padding: 9px 12px; border-bottom: 1px solid #f0dcda; vertical-align: middle; }
.ls-table tr.is-lead td { background: #fff4d6; }
.ls-table .ls-tag { color: #fff; }
.ls-mini-logo {
    width: 30px; height: 30px; border-radius: 6px; overflow: hidden;
    display: inline-block; vertical-align: middle; margin-right: 8px; background: #2b2f36;
}
.ls-mini-logo--round { border-radius: 50%; }
.ls-mini-logo img { width: 100%; height: 100%; object-fit: cover; }
.ls-link { background: none; border: 0; color: var(--ls-red); font-weight: 600; padding: 0; }

.ls-cat-card {
    background: #fff; color: var(--ls-card-ink); border-radius: 4px; overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.ls-cat-card header {
    padding: 9px 16px; font-weight: 700; font-size: 1.1rem; color: #fff;
    background: repeating-linear-gradient(120deg, var(--ls-red) 0 60px, #c02a22 60px 120px);
}
.ls-cat-card dl { margin: 0; }
.ls-cat-card dl > div { display: flex; justify-content: space-between; padding: 9px 16px; border-bottom: 1px solid #f0dcda; }
.ls-cat-card dt { font-weight: 500; }
.ls-cat-card dd { margin: 0; font-weight: 600; }
.ls-cat-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.ls-cat-card footer span { color: #8a5a57; font-size: .85rem; }
.ls-pill-btn {
    border: 0; border-radius: 999px; padding: 7px 16px;
    background: var(--ls-red); color: #fff; font-weight: 600;
}

/* ── Wider screens ───────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .ls-grid--players, .ls-grid--teams, .ls-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-card { grid-template-columns: 140px 1fr; }
}

@media (min-width: 900px) {
    .ls-top {
        grid-template-columns: auto minmax(0, 520px) 1fr;
        grid-template-areas: "brand title right";
        padding: 16px 32px 8px;
    }
    .ls-title__name { font-size: 1.5rem; }
    .ls-tabs {
        position: static; background: none; border: 0; padding: 0; backdrop-filter: none;
        justify-content: flex-end;
    }
    .ls-tabs > * { font-size: .9rem; padding: 6px 10px; }
    .ls-tabs > * + * { position: relative; }
    .ls-tabs > * + *::before {
        content: ""; position: absolute; left: -2px; top: 25%; bottom: 25%; width: 2px;
        background: rgba(255, 255, 255, .6);
    }
    .ls-main { padding: 12px 32px 40px; }
    .ls-dock { bottom: 20px; right: 20px; flex-direction: row; }
    .ls-sponsor { margin: 0 0 20px; }

    .ls-stage__body {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        min-height: calc(100vh - 170px);
        padding-top: 0;
    }
    .ls-player { flex-direction: row; align-items: center; gap: 0; }
    .ls-photo { width: 250px; height: 250px; margin-right: -28px; z-index: 1; }
    .ls-photo__no { width: 56px; height: 56px; font-size: 1.5rem; }
    .ls-player__info { padding-top: 0; }
    .ls-strip { padding-left: 48px; font-size: 1.6rem; }
    .ls-strip--1 { font-size: 1.9rem; }
    .ls-facts, .ls-cat, .ls-base { margin-left: 34px; }
    .ls-team-logo { width: 140px; height: 140px; }
    .ls-price b { font-size: 4.2rem; }
    .ls-coin { width: 58px; height: 58px; font-size: 1.8rem; }
    .ls-stage__foot {
        grid-column: 1 / -1;
        align-items: flex-end;
    }
    .ls-video { top: 110px; }

    .ls-grid--cats { max-width: 920px; margin: 8vh auto 0; }
}

@media (min-width: 1280px) {
    .ls-grid--players { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ls-grid--teams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Phones: keep the top bar inside the screen ─────────────────────────── */
@media (max-width: 899px) {
    .ls-right { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
    .ls-meta { gap: 6px; }
    .ls-conn { font-size: 0; gap: 0; }
    .ls-actions { gap: 4px; }
    .ls-actions .ls-icon { width: 30px; height: 30px; font-size: .9rem; }
    .ls-tabs { justify-content: space-between; }
    .ls-tabs > * { font-size: .7rem; padding: 8px 5px; letter-spacing: .02em; }
    .ls-brand span { display: none; }
}

/* ── Auctioneer sign-in ("Manage from laptop") ───────────────────────────── */
.ls-login {
    max-width: 760px; margin: 4vh auto 0;
    display: grid; grid-template-columns: 1fr;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.ls-login__form { background: #fff; color: var(--ls-ink); padding: 30px 28px; }
.ls-login__form h1 {
    margin: 0; text-align: center; color: var(--ls-red);
    font-size: 2rem; text-transform: uppercase; letter-spacing: .04em;
}
.ls-login__lead { text-align: center; margin: 4px 0 18px; color: #6b5a58; font-size: .92rem; }
.ls-login__lead b { color: var(--ls-red-deep); }
.ls-login__error {
    background: #fdecea; color: #a1231b; border-radius: 8px;
    padding: 9px 12px; margin-bottom: 14px; font-size: .9rem;
}
.ls-field { display: block; margin-bottom: 14px; }
.ls-field > span:first-child { display: block; font-size: .8rem; color: #6b5a58; margin-bottom: 4px; }
.ls-field input {
    width: 100%; padding: 12px 14px; border-radius: 8px; font: inherit;
    border: 1px solid #d9c9c7; background: #fff; color: var(--ls-ink);
}
.ls-field input:focus { outline: none; border-color: var(--ls-red); box-shadow: 0 0 0 3px rgba(172, 32, 25, .15); }
.ls-field__wrap { position: relative; display: block; }
.ls-field__wrap input { padding-right: 44px; }
.ls-field__eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: 0; background: none; color: #555; width: 34px; height: 34px; font-size: 1.05rem;
}
.ls-login__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 16px; font-size: .85rem; }
.ls-login__row a, .ls-login__foot a { color: var(--ls-red); font-weight: 500; }
.ls-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ls-check input { width: 17px; height: 17px; accent-color: var(--ls-red); }
.ls-login__submit {
    width: 100%; border: 0; border-radius: 8px; padding: 12px;
    background: linear-gradient(180deg, #c42a21, var(--ls-red)); color: #fff;
    font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
}
.ls-login__submit:hover { background: linear-gradient(180deg, var(--ls-red), var(--ls-red-deep)); }
.ls-login__foot { text-align: center; margin: 16px 0 0; font-size: .85rem; color: #6b5a58; }

.ls-login__art {
    position: relative; min-height: 180px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background:
        linear-gradient(180deg, transparent 55%, #2f6b22 55%, #3f8a2a 75%, #1d3f14 100%),
        radial-gradient(90% 60% at 50% 0%, #7a1812 0%, var(--ls-red-deep) 45%, var(--ls-night) 100%);
}
.ls-login__lights {
    position: absolute; inset: 0 0 45% 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(255, 240, 210, .8) 0 3px, transparent 4px),
        radial-gradient(circle at 25% 18%, rgba(255, 240, 210, .8) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 22%, rgba(255, 240, 210, .8) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 30%, rgba(255, 240, 210, .8) 0 3px, transparent 4px),
        radial-gradient(ellipse at 20% 20%, rgba(255, 230, 190, .35), transparent 45%),
        radial-gradient(ellipse at 82% 25%, rgba(255, 230, 190, .35), transparent 45%);
}
.ls-login__mark { position: relative; width: 110px; height: 110px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.ls-login__word { position: relative; font-size: 1.7rem; font-weight: 600; text-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
.ls-login__word b { color: var(--ls-gold); }
.ls-login__gavel {
    position: absolute; right: 12%; bottom: 7%;
    font-size: 4.2rem; color: #8b4a1c; transform: rotate(-20deg);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}

@media (min-width: 720px) {
    .ls-login { grid-template-columns: 1fr 1fr; margin-top: 8vh; }
    .ls-login__form { padding: 40px 34px; }
    .ls-login__art { min-height: 440px; }
}
body[data-tab="login"] .ls-bg__crowd { opacity: .45; }

/* ── Site sign-in (/login): plain top bar, notices, secondary buttons ────── */
.ls-top--plain { grid-template-columns: auto 1fr; grid-template-areas: "brand links"; }
.ls-top__links { grid-area: links; display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.ls-top__links a { text-decoration: none; font-weight: 500; font-size: .92rem; opacity: .9; }
.ls-top__links a:hover { color: var(--ls-gold); opacity: 1; }
.ls-top--plain .ls-brand span { display: inline; }
.ls-login__notice {
    background: #fff4d6; color: #7a4d00; border-radius: 8px;
    padding: 9px 12px; margin-bottom: 14px; font-size: .9rem;
}
.ls-divider {
    display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
    color: #8a7572; font-size: .82rem;
}
.ls-divider::before, .ls-divider::after { content: ""; flex: 1; height: 1px; background: #e6d6d4; }
.ls-login__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-login__pair form { margin: 0; }
.ls-login__alt {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px; border-radius: 8px; border: 1px solid #e0cfcd; background: #fff;
    color: var(--ls-red-deep); font-weight: 500; font-size: .88rem; text-decoration: none;
}
.ls-login__alt:hover { border-color: var(--ls-red); background: #fdf3f2; }