/* ==========================================================
   Chamber TV display — designed for 1920×1080 (scales to any screen)
   ========================================================== */
:root {
  --bg: #062427; --bg2: #0a3a3f; --panel: rgba(255, 255, 255, .055); --line: rgba(255, 255, 255, .1);
  --gold: #d6b36c; --gold-2: #b58f45; --text: #e7f0ef; --muted: #8fb0ad; --red: #ef5a5f;
  --f: "Hind Siliguri", "Plus Jakarta Sans", system-ui, sans-serif;
  --num: "Plus Jakarta Sans", "Hind Siliguri", system-ui, sans-serif;
}
body.lang-en { --f: "Plus Jakarta Sans", "Hind Siliguri", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--f); color: var(--text); cursor: none;
  background: radial-gradient(70vw 60vh at 30% 45%, rgba(214, 179, 108, .16), transparent 60%),
              radial-gradient(60vw 60vh at 100% 0%, rgba(18, 128, 138, .35), transparent 60%),
              linear-gradient(160deg, var(--bg2), var(--bg) 60%, #031517);
  display: grid; grid-template-rows: auto 1fr auto; padding: 2.4vh 2.6vw; gap: 2vh; }
body.show-cursor { cursor: default; }
.ic { width: 1em; height: 1em; vertical-align: -.12em; }

/* Header */
.tv-head { display: flex; justify-content: space-between; align-items: center; gap: 2vw; }
.tv-doc { display: flex; align-items: center; gap: 1.4vw; min-width: 0; }
.tv-mark { width: 7vh; height: 7vh; border-radius: 2vh; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(140deg, #0f6168, #072d31); color: var(--gold); border: 1px solid rgba(214, 179, 108, .4); font-size: 4vh; }
.tv-doc h1 { margin: 0; font-size: 4.4vh; line-height: 1.15; font-weight: 700; }
.tv-doc p { margin: .3vh 0 0; color: var(--muted); font-size: 2.3vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-meta { text-align: right; flex-shrink: 0; }
.tv-clock { font-family: var(--num); font-size: 6vh; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.lang-bn .tv-clock { font-family: var(--f); }
.tv-date { color: var(--muted); font-size: 2.2vh; margin-top: .6vh; }

/* Main */
.tv-main { display: grid; grid-template-columns: 1.65fr 1fr; gap: 2.2vw; min-height: 0; }
.tv-now { position: relative; border-radius: 4vh; padding: 3vh 2vw; text-align: center; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border: 2px solid rgba(214, 179, 108, .45);
  box-shadow: 0 4vh 10vh -4vh rgba(0, 0, 0, .6), inset 0 0 12vh rgba(214, 179, 108, .06); overflow: hidden; }
.tv-chamber { position: absolute; top: 2.6vh; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1.2vw; font-size: 2.6vh; color: var(--muted); flex-wrap: wrap; padding: 0 2vw; }
.tv-hours { background: var(--panel); padding: .3vh 1vw; border-radius: 99px; }
.tv-live { display: inline-flex; align-items: center; gap: .6vw; background: rgba(239, 90, 95, .14); color: #ffb3b5; padding: .4vh 1vw; border-radius: 99px; font-weight: 700; }
.tv-live i { width: 1.3vh; height: 1.3vh; border-radius: 50%; background: var(--red); animation: live 1.6s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(239, 90, 95, .7); } 70% { box-shadow: 0 0 0 1.6vh rgba(239, 90, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 90, 95, 0); } }
.tv-label { margin: 4vh 0 0; font-size: 5vh; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.tv-label small { display: block; font-family: var(--num); font-size: 2vh; letter-spacing: .4em; color: var(--muted); font-weight: 600; margin-top: .4vh; }
.lang-en .tv-label small { font-family: var(--f); letter-spacing: .1em; }
.tv-number { font-family: var(--num); font-weight: 800; line-height: .95; color: #fff; font-size: min(42vh, 30vw); letter-spacing: -.04em;
  text-shadow: 0 1vh 6vh rgba(214, 179, 108, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1.2), color .5s; }
.lang-bn .tv-number { font-family: var(--f); letter-spacing: 0; line-height: 1.05; }
.tv-number.bump { transform: scale(1.12); color: var(--gold); }
.tv-sub { margin: 1vh 0 0; font-size: 3vh; color: var(--text); opacity: .85; }

/* Side */
.tv-side { display: flex; flex-direction: column; gap: 2vh; min-height: 0; }
.tv-side h2 { margin: 0; font-size: 3.6vh; color: var(--gold); font-weight: 700; }
.tv-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh; flex: 1; align-content: start; }
.tv-next li { background: var(--panel); border: 1px solid var(--line); border-radius: 2.4vh; text-align: center; font-family: var(--num); font-weight: 800; font-size: 8vh; line-height: 1.5; color: #fff; }
.lang-bn .tv-next li { font-family: var(--f); }
.tv-next li.first { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(214, 179, 108, .28), rgba(214, 179, 108, .1)); border-color: rgba(214, 179, 108, .6); font-size: 10vh; }
.tv-next li.none { grid-column: 1 / -1; color: var(--muted); }
.tv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2vw; }
.tv-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 2vh; padding: 1.6vh .6vw; text-align: center; }
.tv-stats strong { display: block; font-size: 5vh; line-height: 1.1; font-weight: 800; }
.tv-stats small { color: var(--muted); font-size: 2vh; }

/* Footer */
.tv-foot { display: flex; align-items: center; gap: 2vw; background: rgba(0, 0, 0, .25); border-radius: 2vh; padding: 1.4vh 1.6vw; position: relative; overflow: hidden; }
.tv-ticker { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tv-ticker span { display: inline-block; padding-left: 100%; font-size: 2.8vh; animation: ticker 28s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.tv-book { flex-shrink: 0; font-size: 2.4vh; color: var(--muted); }
.tv-book b { color: var(--gold); }
.tv-net { position: absolute; inset: 0; display: grid; place-items: center; background: #7a1d20; color: #fff; font-size: 2.6vh; font-weight: 700; }
.tv-net[hidden] { display: none; }

/* Start overlay (needed once so the browser allows sound) */
.tv-start { position: fixed; inset: 0; background: rgba(3, 21, 23, .88); display: grid; place-items: center; z-index: 10; cursor: default; }
.tv-start.hide { display: none; }
.tv-start button { font: inherit; color: var(--text); background: linear-gradient(160deg, #0f6168, #072d31); border: 3px solid var(--gold); border-radius: 4vh; padding: 5vh 5vw; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; cursor: pointer; }
.tv-start button:focus { outline: .8vh solid rgba(214, 179, 108, .5); outline-offset: 1vh; }
.tv-start .ic { width: 12vh; height: 12vh; color: var(--gold); }
.tv-start strong { font-size: 5vh; }
.tv-start small { font-size: 2.4vh; color: var(--muted); max-width: 50vw; text-align: center; }

/* Full-screen call flash */
.tv-flash { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; text-align: center; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at 50% 45%, rgba(214, 179, 108, .35), transparent 60%), #041b1e; }
.tv-flash.on { opacity: 1; }
.tv-flash div { font-size: 7vh; font-weight: 700; color: var(--gold); }
.tv-flash strong { display: block; font-family: var(--num); font-size: min(60vh, 45vw); line-height: 1; color: #fff; font-weight: 800; animation: pop .6s cubic-bezier(.2, .8, .2, 1.3); }
.lang-bn .tv-flash strong { font-family: var(--f); }
.tv-flash p { font-size: 4vh; margin: 2vh 0 0; color: var(--text); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Portrait TVs / small screens */
@media (orientation: portrait), (max-width: 900px) {
  body { overflow: auto; height: auto; min-height: 100%; }
  html { overflow: auto; }
  .tv-main { grid-template-columns: 1fr; }
  .tv-now { min-height: 55vh; }
  .tv-number { font-size: 34vw; }
  .tv-doc p { white-space: normal; }
  .tv-foot { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .tv-ticker span { animation: none; padding-left: 0; } }
.has-logo { background: #fff !important; padding: 4px; overflow: hidden; } .has-logo img { width: 100%; height: 100%; object-fit: contain; }