/* ===========================================================================
   SmartScorer · Auction LIVE VIEW (static v2) — streaming OVERLAY
   Lower-third auction card over a configurable background (chroma green /
   white / black / transparent / image / video / camera). Built to be dropped
   into OBS / vMix as a browser source, or shown on a chroma-key background.
   =========================================================================== */
:root {
    --lv-font: 'Poppins', system-ui, -apple-system, sans-serif;
    --lv-gold: #ffd54a;
    --lv-cyan: #28e0ff;
    --lv-green: #22c98a;
    --lv-red: #ff5a63;
    --lv-ease: cubic-bezier(.16, 1, .3, 1);
    --lv-chroma: #00b140;      /* broadcast chroma green */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--lv-font); overflow: hidden; background: transparent; }

.lv { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

/* ---- background layer (what shows behind the overlay) ---- */
.lv-bg { position: absolute; inset: 0; z-index: 0; }
.lv[data-bg="green"] .lv-bg { background: var(--lv-chroma); }
.lv[data-bg="white"] .lv-bg { background: #ffffff; }
.lv[data-bg="black"] .lv-bg { background: #000000; }
.lv[data-bg="transparent"] .lv-bg { background: transparent; }
.lv-bg__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-bg__media[hidden] { display: none; }

/* ---- controls (hidden from the stream with H) ---- */
.lv-ctrl { position: absolute; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lv-ctrl.is-hidden { display: none; }
.lv-ctrl__gear { width: 40px; height: 40px; border-radius: 11px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 15, 25, .6); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); transition: background .2s var(--lv-ease); }
.lv-ctrl__gear:hover { background: rgba(10, 15, 25, .85); }
.lv-ctrl__gear svg { width: 20px; height: 20px; }
.lv-ctrl__panel { width: 290px; max-width: calc(100vw - 32px); background: rgba(12, 18, 30, .94); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 14px; color: #eef4ff; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); backdrop-filter: blur(14px); }
.lv-ctrl__panel[hidden] { display: none; }
.lv-ctrl__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #9fb2d0; }
.lv-ctrl__x { border: none; background: none; color: #9fb2d0; font-size: 22px; line-height: 1; cursor: pointer; }
.lv-ctrl__x:hover { color: #fff; }
.lv-ctrl__row { display: flex; flex-wrap: wrap; gap: 7px; }
.lv-chip { cursor: pointer; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #cdd9ee; border-radius: 999px; padding: 7px 13px; font-family: var(--lv-font); font-size: 12px; font-weight: 700; transition: all .16s var(--lv-ease); }
.lv-chip:hover { border-color: rgba(40, 224, 255, .5); color: #fff; }
.lv-chip.is-on { background: linear-gradient(135deg, #1a97f0, #0a74d6); border-color: transparent; color: #fff; }
.lv-ctrl__media { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.lv-ctrl__media[hidden] { display: none; }
.lv-ctrl__url { height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font-family: var(--lv-font); font-size: 13px; padding: 0 12px; }
.lv-ctrl__url:focus { outline: none; border-color: var(--lv-cyan); }
.lv-ctrl__file { display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .28); color: #cdd9ee; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lv-ctrl__file:hover { border-color: var(--lv-cyan); color: #fff; }
.lv-ctrl__hint { margin-top: 10px; font-size: 11px; line-height: 1.5; color: #7f93b5; }
.lv-ctrl__hint b { color: #cdd9ee; }

/* ---- connection pill (small, bottom-left) ---- */
.lv-conn { position: absolute; left: 16px; bottom: 16px; z-index: 40; font-size: 10px; font-weight: 700; color: #cdd9ee; background: rgba(10, 15, 25, .55); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(6px); }
.lv-conn[data-on="true"] { color: #8affd0; }
.lv-ctrl.is-hidden ~ .lv-conn { display: none; }

/* ---- welcome (centered lower) ---- */
.lv-welcome { position: absolute; left: 0; right: 0; bottom: 14vh; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lv-welcome[hidden] { display: none; }
.lv-welcome__hi { font-size: clamp(44px, 9vw, 120px); font-weight: 900; color: #fff; letter-spacing: .04em; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.lv-welcome__nm { font-size: clamp(22px, 4vw, 52px); font-weight: 800; color: var(--lv-gold); text-transform: capitalize; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }

/* ---- bottom overlay (lower third) ---- */
.lv-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; gap: 10px; padding: 0 clamp(16px, 3vw, 52px) clamp(14px, 2vw, 30px); }
.lv-overlay[hidden] { display: none; }
.lv-card { display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 28px); background: rgba(12, 16, 24, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: clamp(12px, 1.3vw, 20px); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); backdrop-filter: blur(22px); }

.lv-photo { position: relative; width: clamp(120px, 12vw, 190px); flex: 0 0 auto; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #0a0f19; border: 4px solid rgba(255, 255, 255, .22); box-shadow: 0 16px 36px rgba(0, 0, 0, .7); }
.lv-photo__img, .lv-photo__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-photo__img[hidden] { display: none; }
.lv-photo__ph { display: grid; place-items: center; color: rgba(255, 255, 255, .35); }
.lv-photo__ph svg { width: 46%; height: 46%; }
.lv-photo__loading { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; }
.lv-photo__loading[hidden] { display: none; }
.lv-photo__token { position: absolute; left: 8px; bottom: 8px; z-index: 3; font-size: clamp(12px, 1vw, 16px); font-weight: 900; color: #fff; background: linear-gradient(135deg, #1a97f0, #0a74d6); padding: 4px 11px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(26, 151, 240, .8); }
.lv-photo__stamp { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.lv-photo__stamp[hidden] { display: none; }
.lv-photo__stamp span { font-size: clamp(20px, 2.4vw, 34px); font-weight: 900; letter-spacing: .04em; padding: 5px 14px; border-radius: 10px; transform: rotate(-11deg); animation: lv-stamp .5s var(--lv-ease); }
.lv-photo__stamp.is-sold span { color: var(--lv-green); border: 4px solid var(--lv-green); background: rgba(34, 201, 138, .14); }
.lv-photo__stamp.is-unsold span { color: var(--lv-red); border: 4px solid var(--lv-red); background: rgba(255, 90, 99, .14); }

.lv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1vw, 14px); }
.lv-body__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lv-name { font-size: clamp(20px, 2.6vw, 46px); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; text-shadow: 0 4px 16px rgba(0, 0, 0, .8); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lv-badges { display: flex; gap: 8px; flex: 0 0 auto; }
.lv-badge { display: flex; flex-direction: column; gap: 1px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .15); border-radius: 11px; padding: 5px 13px; }
.lv-badge small { font-size: clamp(8px, .6vw, 10px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.lv-badge b { font-size: clamp(12px, 1vw, 17px); font-weight: 900; color: #fff; white-space: nowrap; }
.lv-badge[hidden] { display: none; }

.lv-body__bottom { display: flex; gap: clamp(8px, .9vw, 15px); align-items: stretch; }
.lv-stat { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-width: 0; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: clamp(6px, .6vw, 11px) clamp(9px, 1vw, 15px); flex: 1 1 0; }
.lv-stat small { font-size: clamp(8px, .6vw, 10px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.lv-stat b { font-size: clamp(12px, 1.1vw, 19px); font-weight: 900; color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-stat--type { color: var(--lv-gold) !important; }
.lv-stat--bat { color: var(--lv-cyan) !important; }
.lv-stat--base b, .lv-stat.lv-stat--base b { color: var(--lv-gold); }
.lv-stat--base { background: linear-gradient(135deg, rgba(255, 213, 74, .18), rgba(255, 213, 74, .05)); border-color: rgba(255, 213, 74, .34); }

.lv-bid { display: flex; flex-direction: column; gap: 2px; justify-content: center; flex: 1.6 1 0; min-width: 0; background: linear-gradient(135deg, rgba(26, 151, 240, .28), rgba(0, 0, 0, .45)); border: 1px solid rgba(40, 224, 255, .4); border-radius: 12px; padding: clamp(6px, .6vw, 11px) clamp(10px, 1.1vw, 17px); transition: all .3s var(--lv-ease); }
.lv-bid.is-sold { background: linear-gradient(135deg, rgba(34, 201, 138, .3), rgba(0, 0, 0, .45)); border-color: rgba(34, 201, 138, .5); }
.lv-bid small { font-size: clamp(8px, .6vw, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.lv-bid__team { font-size: clamp(12px, 1vw, 18px); font-weight: 800; color: #fff; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-bid__amount { font-size: clamp(18px, 1.9vw, 34px); font-weight: 900; color: var(--lv-gold); line-height: 1; font-variant-numeric: tabular-nums; }
.lv-bid.is-sold .lv-bid__amount { color: #8affd0; }

/* ---- ticker ---- */
.lv-ticker { overflow: hidden; background: rgba(0, 0, 0, .68); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 7px 0; }
.lv-ticker__track { display: flex; align-items: center; gap: 22px; white-space: nowrap; animation: lv-scroll 40s linear infinite; padding-left: 100%; font-size: clamp(11px, .9vw, 15px); font-weight: 700; color: #fff; }
.lv-ticker__sep { color: var(--lv-cyan); }

.lv-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: lv-spin .7s linear infinite; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-scroll { to { transform: translateX(-50%); } }
@keyframes lv-stamp { from { opacity: 0; transform: rotate(-45deg) scale(2.2); } to { opacity: 1; transform: rotate(-11deg) scale(1); } }

@media (max-width: 720px) {
    .lv-card { flex-direction: column; align-items: center; text-align: center; }
    .lv-photo { width: 120px; }
    .lv-body__top { flex-direction: column; align-items: center; }
    .lv-body__bottom { flex-wrap: wrap; justify-content: center; }
    .lv-name { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) { .lv-ticker__track { animation: none; } }