/* ==========================================================================
   Bad Wolf Arcade — Bar TV Attract Mode (tv.css)
   1080p Bar TV layout + responsive down to 375px portrait with zero overflow.
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--den-bg-canvas, #0A0A14);
  color: var(--den-text-primary, #FFFFFF);
  font-family: var(--den-font-family-ui, 'Den UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.bw-tv-shell {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(155, 89, 182, 0.22), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(217, 165, 32, 0.16), transparent 55%),
    var(--den-bg-canvas, #0A0A14);
}

.bw-tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  background: var(--den-panel-bg, #151525);
  border: 2px solid var(--den-brand-gold, #D9A520);
  border-radius: var(--den-radius-md, 14px);
  box-shadow: var(--den-glow-gold-sm, 0 0 12px rgba(217, 165, 32, 0.4));
}

.bw-tv-brand-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bw-tv-kicker {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--den-cyan-core, #00E5FF);
}

.bw-tv-title {
  margin: 0;
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: clamp(1.6rem, 3.8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-gold-light, #FFD700);
  text-shadow: var(--den-text-glow-gold);
}

.bw-tv-flap-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bw-tv-flap-char {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95em;
  height: 1.45em;
  padding: 0 0.12em;
  background: linear-gradient(180deg, #1A1A2E 0%, #1A1A2E 49%, #0A0A14 51%, #12121F 100%);
  border: 1px solid var(--den-brand-gold, #D9A520);
  border-radius: var(--den-radius-xs, 4px);
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: clamp(1.25rem, 2.2vw, 2.6rem);
  line-height: 1;
  color: var(--den-gold-light, #FFD700);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.6);
  transform-origin: center 50%;
  perspective: 400px;
}

.bw-tv-flap-char::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.85);
}

.bw-tv-flap-char--flip {
  animation: bw-tv-flap 420ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

@keyframes bw-tv-flap {
  0% { transform: rotateX(90deg); opacity: 0.2; }
  60% { transform: rotateX(-12deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-tv-flap-char--flip {
    animation: none;
  }
}

.bw-tv-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: stretch;
}

.bw-tv-board-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--den-panel-bg, #151525);
  border: 1px solid var(--den-brand-purple, #9B59B6);
  border-radius: var(--den-radius-md, 14px);
  box-sizing: border-box;
}

.bw-tv-game-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--den-panel-border, #2E2A4A);
}

.bw-tv-game-name {
  margin: 0;
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-text-primary, #FFFFFF);
}

.bw-tv-game-blurb {
  margin: 4px 0 0;
  color: var(--den-text-secondary, #E8E8F0);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
}

.bw-tv-period-badge {
  padding: 8px 14px;
  border-radius: var(--den-radius-full, 9999px);
  border: 1px solid var(--den-cyan-core, #00E5FF);
  background: rgba(0, 229, 255, 0.12);
  color: var(--den-cyan-core, #00E5FF);
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bw-tv-lb-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bw-tv-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed var(--den-panel-border, #2E2A4A);
  border-radius: var(--den-radius-sm, 8px);
  color: var(--den-gold-light, #FFD700);
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing: 0.06em;
}

.bw-tv-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: var(--den-panel-surface, #1A1A2E);
  border: 2px solid var(--den-brand-gold, #D9A520);
  border-radius: var(--den-radius-md, 14px);
  text-align: center;
  box-sizing: border-box;
}

.bw-tv-qr-wrap {
  background: #FFFFFF;
  padding: 12px;
  border-radius: var(--den-radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  box-sizing: border-box;
}

.bw-tv-qr-img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.bw-tv-cta-title {
  margin: 0;
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--den-gold-light, #FFD700);
  text-transform: uppercase;
}

.bw-tv-cta-url {
  font-family: var(--den-font-family-display, 'Den Display', Impact, sans-serif);
  font-size: 1.15rem;
  color: var(--den-cyan-core, #00E5FF);
  word-break: break-all;
}

.bw-tv-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.bw-tv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--den-panel-border, #2E2A4A);
}

.bw-tv-dot--active {
  background: var(--den-gold-light, #FFD700);
  box-shadow: 0 0 8px var(--den-gold-light, #FFD700);
}

.bw-tv-shell .den-btn,
.bw-tv-shell .den-btn--sm {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  .bw-tv-shell {
    padding: 10px;
    gap: 12px;
  }
  .bw-tv-header {
    padding: 12px;
  }
  .bw-tv-body {
    grid-template-columns: 1fr;
  }
  .bw-tv-board-panel,
  .bw-tv-rail {
    padding: 14px;
  }
  .bw-tv-flap-char {
    font-size: 1.1rem;
  }
}

/* GJ polish: a bar TV shows exactly one screen. On TV-sized displays the shell is one viewport tall and the ten
   leaderboard rows share the board's height, so row 10 and the link under the QR are never cut off at 1080. */
@media (min-width: 1200px) and (min-height: 600px) {
  html, body { height: 100%; overflow: hidden; }
  .bw-tv-shell { height: 100vh; height: 100dvh; min-height: 0; }
  .bw-tv-body, .bw-tv-board-panel, .bw-tv-rail, .bw-tv-lb-rows { min-height: 0; }
  .bw-tv-board-panel, .bw-tv-rail { overflow: hidden; }
  .bw-tv-lb-rows .den-lb-row { flex: 1 1 0; min-height: 0; max-height: 84px; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}