/* Table floor hub. Classes use the tg- prefix. */
.tg-bal { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1px solid var(--s-line); border-radius: 9px; background: var(--s-panel); }
.tg-bal span { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); }
.tg-bal b { font: 700 14px 'IBM Plex Mono', monospace; color: var(--s-text); font-variant-numeric: tabular-nums; }

.tg-screen { min-height: 760px; }
.tg-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.tg-filter button em { font-style: normal; margin-left: 6px; color: var(--s-faint); font-size: 11px; }
.tg-filter button.on em { color: inherit; opacity: .7; }
.tg-search input { width: 220px; font: 500 13px Inter, sans-serif; color: var(--s-text); background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 9px; padding: 8px 12px; }
.tg-search input:focus { outline: 2px solid var(--you); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tg-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #1d3a2c, #0b1410 70%); }
.tg-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .35s ease; }
.tg-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.tg-ph svg { width: 64px; height: 40px; fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.22); }
.tg-ph b { font-size: 14px; color: rgba(255,255,255,.75); }

.tg-live { appearance: none; border: 1px solid var(--s-line); background: var(--s-panel); color: inherit; text-align: left; cursor: pointer; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px; border-radius: 16px; margin-bottom: 22px; transition: border-color .2s; }
.tg-live:hover { border-color: color-mix(in srgb, var(--you) 60%, var(--s-line)); }
.tg-live:hover .tg-img img { transform: scale(1.03); }
.tg-live-txt { display: flex; flex-direction: column; gap: 10px; padding-right: 10px; }
.tg-live-txt > b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.tg-live-txt > span:not(.tg-onair):not(.tg-clock):not(.s-btn) { color: var(--s-dim); font-size: 15px; max-width: 420px; }
.tg-onair { display: inline-flex; align-items: center; gap: 8px; font: 700 11px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #ff5a6e; }
.tg-onair i { width: 9px; height: 9px; border-radius: 50%; background: #ff3d50; box-shadow: 0 0 0 0 rgba(255,61,80,.6); animation: tgPing 1.6s infinite; }
@keyframes tgPing { 0% { box-shadow: 0 0 0 0 rgba(255,61,80,.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255,61,80,0); } }
.tg-clock { font: 600 13px 'IBM Plex Mono', monospace; color: var(--you); }
.tg-seat { align-self: flex-start; margin-top: 4px; }

.tg-group { margin-bottom: 22px; }
.tg-group h3 { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 800; margin: 0 0 10px; }
.tg-group h3 span { font: 500 11.5px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tg-tile { appearance: none; border: 1px solid var(--s-line); background: var(--s-panel); color: inherit; text-align: left; cursor: pointer; padding: 8px; border-radius: 12px; display: flex; flex-direction: column; gap: 9px; transition: border-color .2s, transform .2s; }
.tg-tile:hover, .tg-tile:focus-visible { border-color: color-mix(in srgb, var(--you) 60%, var(--s-line)); transform: translateY(-2px); outline: none; }
.tg-tile:hover .tg-img img { transform: scale(1.04); }
.tg-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 2px; }
.tg-meta b { font-size: 14px; }
.tg-meta span { font-size: 12px; color: var(--s-dim); display: flex; justify-content: space-between; gap: 8px; }
.tg-meta em { font: 600 11px 'IBM Plex Mono', monospace; font-style: normal; color: var(--up); }
.tg-none { color: var(--s-dim); padding: 30px 0; }

.tg-playbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.tg-now { display: flex; flex-direction: column; min-width: 0; }
.tg-now b { font-size: 16px; }
.tg-now span { font-size: 12px; color: var(--s-dim); }
.tg-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tg-next span { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); margin-right: 2px; }
.tg-next button { appearance: none; border: 1px solid var(--s-line); background: var(--s-panel); color: var(--s-dim); border-radius: 8px; padding: 5px 9px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.tg-next button:hover { color: var(--s-text); border-color: var(--you); }
#tgFrame { display: block; width: 100%; height: min(900px, calc(100vh - 150px)); min-height: 720px; border: 0; border-radius: 14px; background: #08090c; }
.dk-stage:fullscreen #tgFrame { height: calc(100vh - 140px); }
.dk-stage:fullscreen .tg-screen { min-height: 0; }

@media (max-width: 900px) {
  .tg-live { grid-template-columns: 1fr; }
  .tg-live-txt > b { font-size: 24px; }
  .tg-search input { width: 100%; }
  .tg-search { flex: 1; }
  .tg-filter { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 640px) {
  .tg-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tg-bal span { display: none; }
  #tgFrame { min-height: 640px; height: calc(100vh - 120px); }
  .tg-next { display: none; }
}