/* ============================================================
   Tournament Plugin — Frontend Styles
   Dark + Light Theme · v1.1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Barlow:wght@400;500;600&display=swap');

/* ── DARK THEME (default) ───────────────────────────────────── */
:root,
[data-trn-theme="dark"] {
  --trn-bg:            #0d0f14;
  --trn-bg-card:       #13161e;
  --trn-bg-row:        #191c26;
  --trn-bg-row-alt:    #151820;
  --trn-bg-toggle:     #1e2230;
  --trn-border:        rgba(255,255,255,.07);
  --trn-border-glow:   rgba(255,200,50,.25);
  --trn-border-hover:  rgba(255,255,255,.14);

  --trn-text:          #e8eaf0;
  --trn-text-muted:    #7a7f96;
  --trn-text-label:    #4e5470;

  --trn-gold:          #f5c518;
  --trn-silver:        #adb5c7;
  --trn-bronze:        #cd7f32;
  --trn-accent:        #ff4b4b;
  --trn-accent-2:      #00c4ff;

  --trn-champion-bg:   linear-gradient(135deg, #1a1506 0%, #0d1020 60%);
  --trn-champion-glow: radial-gradient(ellipse at 20% 50%, rgba(245,197,24,.08) 0%, transparent 70%);
  --trn-tag-bg:        rgba(255,255,255,.07);
  --trn-tag-border:    rgba(255,255,255,.1);
  --trn-rank-bg:       rgba(255,255,255,.06);
  --trn-row-hover:     rgba(255,255,255,.05);
  --trn-td-border:     rgba(255,255,255,.04);
  --trn-team-hover-bg: rgba(0,196,255,.06);
  --trn-team-hover-bd: rgba(0,196,255,.3);
  --trn-vod-hover-bg:  rgba(255,75,75,.07);
  --trn-vod-hover-bd:  rgba(255,75,75,.35);
  --trn-name-gradient: linear-gradient(90deg, #fff 30%, #f5c518);

  --trn-toggle-icon:   "☀️";
  --trn-toggle-label:  "Light Mode";
  --trn-shadow:        0 4px 24px rgba(0,0,0,.55);
  --trn-shadow-glow:   0 0 24px rgba(245,197,24,.15);
  --trn-shadow-card:   0 2px 12px rgba(0,0,0,.4);

  --trn-radius:        10px;
  --trn-radius-sm:     6px;
  --trn-font-display:  'Barlow Condensed', sans-serif;
  --trn-font-body:     'Barlow', sans-serif;
}

/* ── LIGHT THEME ────────────────────────────────────────────── */
[data-trn-theme="light"] {
  --trn-bg:            #f0f2f7;
  --trn-bg-card:       #ffffff;
  --trn-bg-row:        #f8f9fc;
  --trn-bg-row-alt:    #f2f4f9;
  --trn-bg-toggle:     #e4e7f0;
  --trn-border:        rgba(0,0,0,.08);
  --trn-border-glow:   rgba(200,160,10,.3);
  --trn-border-hover:  rgba(0,0,0,.18);

  --trn-text:          #1a1d2e;
  --trn-text-muted:    #5a5f7a;
  --trn-text-label:    #9098b8;

  --trn-gold:          #b8860b;
  --trn-silver:        #6b7490;
  --trn-bronze:        #a0622a;
  --trn-accent:        #e03030;
  --trn-accent-2:      #0088bb;

  --trn-champion-bg:   linear-gradient(135deg, #fdf3d0 0%, #eef2ff 60%);
  --trn-champion-glow: radial-gradient(ellipse at 20% 50%, rgba(200,155,10,.07) 0%, transparent 70%);
  --trn-tag-bg:        rgba(0,0,0,.05);
  --trn-tag-border:    rgba(0,0,0,.1);
  --trn-rank-bg:       rgba(0,0,0,.06);
  --trn-row-hover:     rgba(0,0,0,.04);
  --trn-td-border:     rgba(0,0,0,.05);
  --trn-team-hover-bg: rgba(0,136,187,.06);
  --trn-team-hover-bd: rgba(0,136,187,.3);
  --trn-vod-hover-bg:  rgba(224,48,48,.05);
  --trn-vod-hover-bd:  rgba(224,48,48,.3);
  --trn-name-gradient: linear-gradient(90deg, #1a1d2e 30%, #b8860b);

  --trn-toggle-icon:   "🌙";
  --trn-toggle-label:  "Dark Mode";
  --trn-shadow:        0 2px 16px rgba(0,0,0,.1);
  --trn-shadow-glow:   0 0 20px rgba(200,155,10,.1);
  --trn-shadow-card:   0 1px 6px rgba(0,0,0,.08);
}

/* ── OS-level preference fallback (no JS needed) ────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-trn-theme]) {
    --trn-bg:            #f0f2f7;
    --trn-bg-card:       #ffffff;
    --trn-bg-row:        #f8f9fc;
    --trn-bg-row-alt:    #f2f4f9;
    --trn-bg-toggle:     #e4e7f0;
    --trn-border:        rgba(0,0,0,.08);
    --trn-border-glow:   rgba(200,160,10,.3);
    --trn-border-hover:  rgba(0,0,0,.18);
    --trn-text:          #1a1d2e;
    --trn-text-muted:    #5a5f7a;
    --trn-text-label:    #9098b8;
    --trn-gold:          #b8860b;
    --trn-silver:        #6b7490;
    --trn-bronze:        #a0622a;
    --trn-accent:        #e03030;
    --trn-accent-2:      #0088bb;
    --trn-champion-bg:   linear-gradient(135deg, #fdf3d0 0%, #eef2ff 60%);
    --trn-champion-glow: radial-gradient(ellipse at 20% 50%, rgba(200,155,10,.07) 0%, transparent 70%);
    --trn-tag-bg:        rgba(0,0,0,.05);
    --trn-tag-border:    rgba(0,0,0,.1);
    --trn-rank-bg:       rgba(0,0,0,.06);
    --trn-row-hover:     rgba(0,0,0,.04);
    --trn-td-border:     rgba(0,0,0,.05);
    --trn-team-hover-bg: rgba(0,136,187,.06);
    --trn-team-hover-bd: rgba(0,136,187,.3);
    --trn-vod-hover-bg:  rgba(224,48,48,.05);
    --trn-vod-hover-bd:  rgba(224,48,48,.3);
    --trn-name-gradient: linear-gradient(90deg, #1a1d2e 30%, #b8860b);
    --trn-shadow:        0 2px 16px rgba(0,0,0,.1);
    --trn-shadow-glow:   0 0 20px rgba(200,155,10,.1);
    --trn-shadow-card:   0 1px 6px rgba(0,0,0,.08);
  }
}

/* ── THEME TOGGLE BUTTON ────────────────────────────────────── */
.trn-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--trn-bg-toggle);
  border: 1px solid var(--trn-border);
  border-radius: 999px;
  padding: 6px 16px 6px 10px;
  font-family: var(--trn-font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--trn-text-muted);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  margin-bottom: 20px;
  user-select: none;
  letter-spacing: .03em;
}

.trn-theme-toggle:hover {
  border-color: var(--trn-border-hover);
  color: var(--trn-text);
}

.trn-theme-toggle__track {
  position: relative;
  width: 34px;
  height: 18px;
  background: var(--trn-border);
  border-radius: 999px;
  transition: background .25s;
  flex-shrink: 0;
}

[data-trn-theme="light"] .trn-theme-toggle__track,
:root:not([data-trn-theme]) .trn-theme-toggle__track {
  background: var(--trn-accent-2, #0088bb);
}

.trn-theme-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

[data-trn-theme="dark"] .trn-theme-toggle__knob {
  transform: translateX(0);
}

[data-trn-theme="light"] .trn-theme-toggle__knob {
  transform: translateX(16px);
}

.trn-theme-toggle__label {
  white-space: nowrap;
}

/* ── Base wrapper resets ────────────────────────────────────── */
.trn-wrap,
.trn-champion,
.trn-section {
  box-sizing: border-box;
  font-family: var(--trn-font-body);
  color: var(--trn-text);
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s, border-color .25s;
}

/* ============================================================
   CHAMPION BLOCK
   ============================================================ */

.trn-champion {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--trn-champion-bg);
  border: 1px solid var(--trn-border-glow);
  border-radius: var(--trn-radius);
  padding: 32px 36px;
  box-shadow: var(--trn-shadow), var(--trn-shadow-glow);
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  transition: background .3s, box-shadow .3s, border-color .3s;
}

.trn-champion::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--trn-champion-glow);
  pointer-events: none;
}

.trn-champion__badge {
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(245,197,24,.6));
  flex-shrink: 0;
  animation: trn-trophy-pulse 3s ease-in-out infinite;
}

@keyframes trn-trophy-pulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(245,197,24,.6)); transform: scale(1); }
  50%       { filter: drop-shadow(0 0 28px rgba(245,197,24,.9)); transform: scale(1.06); }
}

.trn-champion__label {
  font-family: var(--trn-font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--trn-gold);
  margin: 0 0 4px;
  text-transform: uppercase;
}

.trn-champion__name {
  font-family: var(--trn-font-display);
  font-size: 2.8rem;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1;
  text-transform: uppercase;
  background: var(--trn-name-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.trn-champion__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.trn-tag {
  display: inline-block;
  background: var(--trn-tag-bg);
  border: 1px solid var(--trn-tag-border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--trn-text-muted);
}

.trn-tag--gold {
  background: rgba(245,197,24,.1);
  border-color: rgba(245,197,24,.3);
  color: var(--trn-gold);
}

/* ============================================================
   SHARED SECTION WRAPPER
   ============================================================ */

.trn-section {
  background: var(--trn-bg-card);
  border: 1px solid var(--trn-border);
  border-radius: var(--trn-radius);
  padding: 28px 28px 24px;
  box-shadow: var(--trn-shadow-card);
  margin-bottom: 2rem;
  overflow: hidden;
  transition: background .3s, border-color .3s, box-shadow .3s;
}

.trn-section__title {
  font-family: var(--trn-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trn-text);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--trn-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.trn-icon { font-size: 1.1em; }

/* ============================================================
   STANDINGS TABLE
   ============================================================ */

.trn-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.trn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 380px;
}

.trn-th {
  font-family: var(--trn-font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--trn-text-label);
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--trn-border);
  white-space: nowrap;
}

.trn-th--rank  { width: 52px; text-align: center; }
.trn-th--right { text-align: right; }

.trn-tr { transition: background .15s; }
.trn-tr:nth-child(odd)  { background: var(--trn-bg-row); }
.trn-tr:nth-child(even) { background: var(--trn-bg-row-alt); }
.trn-tr:hover           { background: var(--trn-row-hover); }
.trn-tr:first-child .trn-td { border-top: none; }

.trn-td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--trn-td-border);
  vertical-align: middle;
}

.trn-td--right { text-align: right; }
.trn-td--club  { font-weight: 600; color: var(--trn-text); }

.trn-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--trn-font-display);
  font-weight: 700;
  font-size: .9rem;
  background: var(--trn-rank-bg);
  color: var(--trn-text-muted);
  margin: 0 auto;
}

.trn-rank--gold   { background: rgba(245,197,24,.18); color: var(--trn-gold);   border: 1px solid rgba(245,197,24,.4); }
.trn-rank--silver { background: rgba(173,181,199,.15); color: var(--trn-silver); border: 1px solid rgba(173,181,199,.35); }
.trn-rank--bronze { background: rgba(205,127,50,.15);  color: var(--trn-bronze); border: 1px solid rgba(205,127,50,.35); }

.trn-prize  { font-family: var(--trn-font-display); font-weight: 700; font-size: 1rem; color: var(--trn-gold); letter-spacing: .02em; }
.trn-points { font-family: var(--trn-font-display); font-weight: 700; font-size: 1rem; color: var(--trn-accent-2); }

/* ============================================================
   TEAMS GRID
   ============================================================ */

.trn-teams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.trn-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--trn-bg-row);
  border: 1px solid var(--trn-border);
  border-radius: var(--trn-radius);
  padding: 20px 14px 16px;
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  cursor: default;
}

.trn-team-card:hover {
  border-color: var(--trn-team-hover-bd);
  background: var(--trn-team-hover-bg);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Logo slot */
.trn-team-logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* URL / Code (img) logos */
.trn-logo--img,
.trn-logo--code {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* SVG logos */
.trn-logo--svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.trn-logo--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Initials fallback */
.trn-logo--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--trn-font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  background: hsl(var(--trn-logo-hue, 220deg), 55%, 38%);
  border: 2px solid hsl(var(--trn-logo-hue, 220deg), 55%, 55%);
  box-shadow: 0 0 0 3px hsl(var(--trn-logo-hue, 220deg), 55%, 25%);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  user-select: none;
}

[data-trn-theme="light"] .trn-logo--initials {
  background: hsl(var(--trn-logo-hue, 220deg), 55%, 48%);
  border-color: hsl(var(--trn-logo-hue, 220deg), 55%, 65%);
  box-shadow: 0 0 0 3px hsl(var(--trn-logo-hue, 220deg), 40%, 85%);
}

.trn-team-name { color: var(--trn-text); line-height: 1.3; }

/* ============================================================
   VOD LIST
   ============================================================ */

.trn-vods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trn-vod-card {
  display: grid;
  grid-template-columns: 40px 64px 1fr 28px;
  align-items: center;
  gap: 12px;
  background: var(--trn-bg-row);
  border: 1px solid var(--trn-border);
  border-radius: var(--trn-radius-sm);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--trn-text);
  transition: border-color .2s, background .2s, transform .2s, color .2s;
}

.trn-vod-card:hover {
  border-color: var(--trn-vod-hover-bd);
  background: var(--trn-vod-hover-bg);
  transform: translateX(4px);
  color: var(--trn-text);
  text-decoration: none;
}

.trn-vod-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--trn-accent);
  color: #fff;
  font-size: .85rem;
  flex-shrink: 0;
  transition: box-shadow .2s;
}

.trn-vod-card:hover .trn-vod-play { box-shadow: 0 0 14px rgba(255,75,75,.5); }

.trn-vod-day {
  font-family: var(--trn-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--trn-text-label);
  white-space: nowrap;
}

.trn-vod-title { font-weight: 500; font-size: .9rem; line-height: 1.3; color: var(--trn-text); }

.trn-vod-arrow {
  color: var(--trn-text-label);
  font-size: 1rem;
  transition: color .2s, transform .2s;
  text-align: right;
}

.trn-vod-card:hover .trn-vod-arrow {
  color: var(--trn-accent);
  transform: translateX(3px);
}


/* ============================================================
   TEAM CARD — clickable hint
   ============================================================ */

.trn-team-card {
  cursor: pointer;
}

.trn-team-hint {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--trn-text-label);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}

.trn-team-card:hover .trn-team-hint,
.trn-team-card:focus .trn-team-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MODAL OVERLAY
   ============================================================ */

.trn-no-scroll { overflow: hidden; }

.trn-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: trn-overlay-in .2s ease;
}

.trn-modal-overlay[hidden] {
  display: none !important;
}

@keyframes trn-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal box ── */
.trn-modal {
  position: relative;
  background: var(--trn-bg-card);
  border: 1px solid var(--trn-border);
  border-radius: 16px;
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  animation: trn-modal-in .25s cubic-bezier(.34,1.4,.64,1);
  text-align: center;
  font-family: var(--trn-font-body);
  color: var(--trn-text);
}

[data-trn-theme="light"] .trn-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
}

@keyframes trn-modal-in {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Close button */
.trn-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--trn-border);
  background: var(--trn-bg-row);
  color: var(--trn-text-muted);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .15s;
  line-height: 1;
}

.trn-modal-close:hover {
  background: var(--trn-accent);
  color: #fff;
  border-color: var(--trn-accent);
  transform: rotate(90deg);
}

/* Logo in modal */
.trn-modal-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  width: 80px;
  height: 80px;
}

.trn-modal-logo .trn-logo--img,
.trn-modal-logo .trn-logo--code {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}

.trn-modal-logo .trn-logo--svg {
  width: 72px;
  height: 72px;
}

.trn-modal-logo .trn-logo--initials {
  width: 72px;
  height: 72px;
  font-size: 1.8rem;
}

/* Title */
.trn-modal-title {
  font-family: var(--trn-font-display);
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 4px;
  color: var(--trn-text);
}

.trn-modal-subtitle {
  font-family: var(--trn-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--trn-accent-2);
  margin: 0 0 24px;
}

/* Divider line */
.trn-modal-subtitle::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--trn-accent-2), transparent);
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Roster list */
.trn-modal-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.trn-modal-player {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--trn-bg-row);
  border: 1px solid var(--trn-border);
  border-radius: 8px;
  padding: 11px 16px;
  transition: background .15s, border-color .15s, transform .15s;
}

.trn-modal-player:hover {
  background: var(--trn-row-hover);
  border-color: var(--trn-border-hover);
  transform: translateX(3px);
}

.trn-player-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--trn-rank-bg);
  color: var(--trn-text-label);
  font-family: var(--trn-font-display);
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.trn-player-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--trn-text);
  font-family: var(--trn-font-display);
  font-size: 1.05rem;
  letter-spacing: .02em;
}

.trn-modal-empty {
  color: var(--trn-text-muted);
  font-style: italic;
  text-align: center;
  padding: 16px 0;
  font-size: .9rem;
}

/* Responsive */
@media (max-width: 480px) {
  .trn-modal {
    padding: 28px 20px 24px;
    border-radius: 12px;
  }
  .trn-modal-title { font-size: 1.4rem; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  .trn-champion {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 16px;
  }
  .trn-champion__meta { justify-content: center; }
  .trn-champion__name { font-size: 2rem; }
  .trn-section        { padding: 20px 16px; }
  .trn-vod-card {
    grid-template-columns: 36px 1fr 24px;
    grid-template-rows: auto auto;
  }
  .trn-vod-day  { display: none; }
  .trn-vod-title { font-size: .82rem; }
  .trn-teams { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}