/* live-sheet.css — D152b "ถ่ายทอดสดจากหน้าเล่น + UI เดียวกัน L/R" (docs/front/LIVE/02-ui-shared.md)
 * ไฟล์นี้ต้อง byte-identical บนทั้ง 2 เว็บ: L web/public/assets/css/nhf/live-sheet.css · R web/public/assets/css/live-sheet.css
 * ทุก selector อยู่ใต้ .lvs- (ไม่แตะ class ของเว็บ) · สีตรึงในตัว (ไม่อ่านตัวแปรธีมของเว็บ) · ตัวอักษร ≥ 17 px · ปุ่ม ≥ 48 px · เลขผล ≥ 28 px */
.lvs-root,.lvs-page{--lvs-bg:#121212;--lvs-card:#1c1c1c;--lvs-line:rgba(255,255,255,.12);--lvs-text:#fff;--lvs-muted:#bdbdbd;--lvs-live:#e53935;--lvs-gold:#f5c542;--lvs-ok:#43a047;--lvs-font:"Prompt","Kanit","Sarabun",-apple-system,"Segoe UI",Roboto,sans-serif;font-family:var(--lvs-font);font-size:17px;line-height:1.4;color:var(--lvs-text);box-sizing:border-box}
.lvs-root *,.lvs-page *{box-sizing:inherit;font-family:inherit}
.lvs-root[hidden],.lvs-page[hidden]{display:none}
html.lvs-lock,html.lvs-lock body{overflow:hidden!important;overscroll-behavior:contain}

/* overlay ----------------------------------------------------------------- */
.lvs-root{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center}
.lvs-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);animation:lvs-fade .18s ease-out}
.lvs-sheet{position:relative;width:100%;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;background:var(--lvs-bg);color:var(--lvs-text);border-radius:18px 18px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.55);animation:lvs-up .22s cubic-bezier(.2,.8,.3,1);outline:none}
.lvs-grip{flex:0 0 auto;width:44px;height:5px;margin:10px auto 2px;border-radius:3px;background:rgba(255,255,255,.28)}
@media (min-width:992px){
  .lvs-root{align-items:center;padding:24px}
  .lvs-sheet{width:min(720px,100%);max-height:90vh;border-radius:18px;animation:lvs-pop .18s ease-out}
  .lvs-grip{display:none}
}
@keyframes lvs-fade{from{opacity:0}to{opacity:1}}
@keyframes lvs-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@keyframes lvs-pop{from{transform:scale(.97);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lvs-backdrop,.lvs-sheet{animation:none}}

/* page variant (หน้า /live ใน shell ปกติ) ---------------------------------- */
.lvs-page{display:block;width:100%;max-width:720px;margin:0 auto;padding:12px 0 24px}
.lvs-page .lvs-sheet{max-height:none;border-radius:18px;box-shadow:none;animation:none;overflow:visible}
.lvs-page .lvs-grip,.lvs-page .lvs-close{display:none}
.lvs-page .lvs-body{overflow:visible}

/* header ------------------------------------------------------------------- */
.lvs-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--lvs-line)}
.lvs-head__text{flex:1 1 auto;min-width:0}
.lvs-title{margin:0;font-size:21px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvs-times{margin-top:2px;font-size:17px;color:var(--lvs-muted)}
.lvs-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;font-size:17px;font-weight:700;line-height:1;background:rgba(255,255,255,.14);color:var(--lvs-text);white-space:nowrap}
.lvs-chip--live{background:var(--lvs-live);color:#fff}
.lvs-chip--soon{background:var(--lvs-gold);color:#1a1a1a}
.lvs-chip--resulted{background:var(--lvs-ok);color:#fff}
.lvs-chip--wait{background:#1e88e5;color:#fff}
.lvs-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:currentColor;animation:lvs-blink 1.6s ease-in-out infinite}
@keyframes lvs-blink{0%,100%{opacity:1}50%{opacity:.35}}
.lvs-close{flex:0 0 auto;width:48px;height:48px;margin-right:-4px;border:0;border-radius:50%;background:transparent;color:var(--lvs-text);font-size:30px;line-height:1;cursor:pointer}
.lvs-close:hover,.lvs-close:focus-visible{background:rgba(255,255,255,.12);outline:none}

/* body --------------------------------------------------------------------- */
.lvs-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 20px}
.lvs-hero{margin:0 0 12px}
.lvs-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
@supports not (aspect-ratio:1){.lvs-player{height:0;padding-bottom:56.25%}}
.lvs-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lvs-player__bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.lvs-viewers{flex:1 1 auto;font-size:17px;color:var(--lvs-muted)}
.lvs-source{margin:8px 0 0;font-size:17px;color:var(--lvs-muted)}
.lvs-source--official{color:#81c784}

.lvs-board{padding:18px 16px;border-radius:12px;background:var(--lvs-card);border:1px solid var(--lvs-line);text-align:center}
.lvs-board__title{font-size:19px;font-weight:700;color:var(--lvs-gold)}
.lvs-board__cd{margin:6px 0 2px;font-size:44px;font-weight:700;line-height:1.1;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--lvs-text)}
.lvs-board__sub{font-size:17px;color:var(--lvs-muted)}
.lvs-board--late .lvs-board__cd{color:var(--lvs-gold)}

.lvs-result{padding:18px 16px;border-radius:12px;background:var(--lvs-card);border:1px solid var(--lvs-line);text-align:center}
.lvs-result__title{font-size:19px;font-weight:700;color:var(--lvs-ok)}
.lvs-result__row{display:flex;justify-content:center;gap:28px;margin:10px 0 4px}
.lvs-result__cell small{display:block;font-size:17px;color:var(--lvs-muted)}
.lvs-result__cell b{display:block;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--lvs-gold)}
.lvs-result__full{font-size:21px;color:var(--lvs-text);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.lvs-note{margin:8px 0 0;font-size:17px;color:var(--lvs-muted)}

.lvs-offline{padding:28px 16px;border-radius:12px;background:var(--lvs-card);border:1px dashed var(--lvs-line);text-align:center;font-size:20px;font-weight:600;color:var(--lvs-muted)}
.lvs-stale{margin:12px 0 0;font-size:17px;color:var(--lvs-muted);text-align:center}

/* buttons ------------------------------------------------------------------ */
.lvs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:12px;font-size:17px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.lvs-btn:focus-visible{outline:2px solid var(--lvs-gold);outline-offset:2px}
.lvs-btn--gold{background:var(--lvs-gold);color:#1a1a1a}
.lvs-btn--ghost{background:transparent;color:var(--lvs-text);border-color:rgba(255,255,255,.35)}
.lvs-btn--sound{background:rgba(255,255,255,.14);color:var(--lvs-text)}
.lvs-btn[hidden]{display:none}
.lvs-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.lvs-actions .lvs-btn{flex:1 1 160px}
.lvs-actions:empty{display:none}

/* today list --------------------------------------------------------------- */
.lvs-today{margin-top:4px}
.lvs-today__title{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--lvs-muted)}
.lvs-list{list-style:none;margin:0;padding:0}
.lvs-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 12px;margin:0 0 6px;border:1px solid var(--lvs-line);border-radius:12px;background:var(--lvs-card);color:var(--lvs-text);font-size:17px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lvs-row:hover,.lvs-row:focus-visible{border-color:rgba(255,255,255,.4);outline:none}
.lvs-row--on{border-color:var(--lvs-gold)}
.lvs-row--done{color:var(--lvs-muted)}
.lvs-row__name{flex:1 1 auto;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvs-row__time{flex:0 0 auto;color:var(--lvs-muted);font-variant-numeric:tabular-nums}
.lvs-row__state{flex:0 0 auto;min-height:30px;display:inline-flex;align-items:center;gap:5px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700}
.lvs-row__state--live{background:var(--lvs-live);color:#fff}
.lvs-row__state--soon{background:var(--lvs-gold);color:#1a1a1a}
.lvs-row__state--resulted{background:var(--lvs-ok);color:#fff}
.lvs-row__state .lvs-dot{width:8px;height:8px}
.lvs-row__res{flex:0 0 auto;font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--lvs-gold);font-variant-numeric:tabular-nums}

/* trigger pill (บนหน้าเล่น / การ์ดหวย / หน้าผล) — ใช้สีตรึงเดียวกันทั้ง 2 เว็บ */
.lvs-trig{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:999px;background:#121212;color:#fff;font-family:var(--lvs-font);font-size:17px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;vertical-align:middle;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.lvs-trig[hidden]{display:none}
.lvs-trig:hover,.lvs-trig:focus-visible{background:#2a2a2a;color:#fff;text-decoration:none;outline:none}
.lvs-trig .lvs-dot{width:10px;height:10px;background:#e53935;animation:none}
.lvs-trig--live{background:#e53935}
.lvs-trig--live:hover,.lvs-trig--live:focus-visible{background:#c62828}
.lvs-trig--live .lvs-dot{background:#fff;animation:lvs-blink 1.6s ease-in-out infinite}
.lvs-trig--board{background:#1e88e5}
.lvs-trig--badge{min-height:34px;padding:0 10px;margin-left:6px;font-size:15px;letter-spacing:.04em;gap:6px}   /* D152b-5: card badge = compact symbol (LIVE) */
.lvs-trig--badge .lvs-trig__ico{border-width:5px 0 5px 8px}
.lvs-trig--badge .lvs-dot{width:8px;height:8px}
.lvs-trig__ico{display:inline-block;width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}

/* host-proof (D152b-4, 2026-10-20 13:5x — specificity (0,3,1) beats L's `body.nhf-inner-light .mp-root h2 … !important`): L's theme CSS paints every h2/h3/a with !important (theme-override.css, inner-light.css, member-pages.css)
   and bled into the sheet (white title on white, white-on-gold button). The sheet's own colours are pinned above any host rule — same file on L and R. */
.lvs-root .lvs-sheet h2.lvs-title,.lvs-page .lvs-sheet h2.lvs-title,.lvs-root .lvs-sheet .lvs-title,.lvs-page .lvs-sheet .lvs-title,.lvs-root .lvs-sheet .lvs-row__name,.lvs-page .lvs-sheet .lvs-row__name,.lvs-root .lvs-sheet .lvs-row,.lvs-page .lvs-sheet .lvs-row,.lvs-root .lvs-sheet .lvs-board__cd,.lvs-page .lvs-sheet .lvs-board__cd,.lvs-root .lvs-sheet .lvs-result__full,.lvs-page .lvs-sheet .lvs-result__full,.lvs-root .lvs-sheet .lvs-chip,.lvs-page .lvs-sheet .lvs-chip,.lvs-root .lvs-sheet .lvs-close,.lvs-page .lvs-sheet .lvs-close{color:var(--lvs-text)!important}
.lvs-root .lvs-sheet .lvs-times,.lvs-page .lvs-sheet .lvs-times,.lvs-root .lvs-sheet .lvs-today__title,.lvs-page .lvs-sheet .lvs-today__title,.lvs-root .lvs-sheet .lvs-source,.lvs-page .lvs-sheet .lvs-source,.lvs-root .lvs-sheet .lvs-viewers,.lvs-page .lvs-sheet .lvs-viewers,.lvs-root .lvs-sheet .lvs-note,.lvs-page .lvs-sheet .lvs-note,.lvs-root .lvs-sheet .lvs-board__sub,.lvs-page .lvs-sheet .lvs-board__sub,.lvs-root .lvs-sheet .lvs-offline,.lvs-page .lvs-sheet .lvs-offline,.lvs-root .lvs-sheet .lvs-stale,.lvs-page .lvs-sheet .lvs-stale,.lvs-root .lvs-sheet .lvs-row--done,.lvs-page .lvs-sheet .lvs-row--done,.lvs-root .lvs-sheet .lvs-row__time,.lvs-page .lvs-sheet .lvs-row__time,.lvs-root .lvs-sheet .lvs-result__cell small,.lvs-page .lvs-sheet .lvs-result__cell small{color:var(--lvs-muted)!important}
.lvs-root .lvs-sheet .lvs-source--official,.lvs-page .lvs-sheet .lvs-source--official{color:#81c784!important}
.lvs-root .lvs-sheet .lvs-board__title,.lvs-page .lvs-sheet .lvs-board__title,.lvs-root .lvs-sheet .lvs-board--late .lvs-board__cd,.lvs-page .lvs-sheet .lvs-board--late .lvs-board__cd,.lvs-root .lvs-sheet .lvs-result__cell b,.lvs-page .lvs-sheet .lvs-result__cell b,.lvs-root .lvs-sheet .lvs-row__res,.lvs-page .lvs-sheet .lvs-row__res{color:var(--lvs-gold)!important}
.lvs-root .lvs-sheet .lvs-result__title,.lvs-page .lvs-sheet .lvs-result__title{color:var(--lvs-ok)!important}
.lvs-root .lvs-sheet .lvs-chip--live,.lvs-page .lvs-sheet .lvs-chip--live,.lvs-root .lvs-sheet .lvs-chip--resulted,.lvs-page .lvs-sheet .lvs-chip--resulted,.lvs-root .lvs-sheet .lvs-chip--wait,.lvs-page .lvs-sheet .lvs-chip--wait,.lvs-root .lvs-sheet .lvs-row__state--live,.lvs-page .lvs-sheet .lvs-row__state--live,.lvs-root .lvs-sheet .lvs-row__state--resulted,.lvs-page .lvs-sheet .lvs-row__state--resulted{color:#fff!important}
.lvs-root .lvs-sheet .lvs-chip--soon,.lvs-page .lvs-sheet .lvs-chip--soon,.lvs-root .lvs-sheet .lvs-row__state--soon,.lvs-page .lvs-sheet .lvs-row__state--soon,.lvs-root .lvs-sheet .lvs-btn--gold,.lvs-page .lvs-sheet .lvs-btn--gold{color:#1a1a1a!important}
.lvs-root .lvs-sheet .lvs-btn--gold,.lvs-page .lvs-sheet .lvs-btn--gold{background:var(--lvs-gold)!important}
.lvs-root .lvs-sheet .lvs-btn--ghost,.lvs-page .lvs-sheet .lvs-btn--ghost,.lvs-root .lvs-sheet .lvs-btn--sound,.lvs-page .lvs-sheet .lvs-btn--sound{color:var(--lvs-text)!important}
.lvs-root .lvs-sheet .lvs-btn,.lvs-page .lvs-sheet .lvs-btn,.lvs-root .lvs-sheet a,.lvs-page .lvs-sheet a{text-decoration:none!important}
.lvs-trig,.lvs-trig:hover,.lvs-trig:focus-visible,.lvs-trig--live,.lvs-trig--board{color:#fff!important;text-decoration:none!important}