/* Tuned for a TV viewed from a couch: large type, high contrast, generous
   overscan margins, and no animations heavier than a transform (Android TV
   boxes drop frames on blur/shadow transitions). */
:root {
  --bg: #07080c;
  --fg: #f2f4f8;
  --dim: #8b93a7;
  --tile-w: 15.5vw;
  --safe-x: 4vw;
  --safe-y: 3vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
}

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--safe-y) var(--safe-x) 0.6vh;
}

.topbar h1 {
  margin: 0;
  font-size: 2.4vw;
  letter-spacing: 0.02em;
}

.meta {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  font-size: 1.05vw;
  color: var(--dim);
}

.filter {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  padding: 0.5vh 0.9vw;
  border: 0.18vw solid transparent;
  border-radius: 0.5vw;
  background: #141822;
}

.filter-label { font-size: 0.95vw; }

.filter select {
  background: transparent;
  color: var(--fg);
  border: 0;
  font-size: 1.1vw;
  font-family: inherit;
  font-weight: 600;
  padding: 0;
}

.filter select:focus { outline: none; }
.filter option { background: #141822; color: var(--fg); }

/* Mirrors the tile cursor so it is obvious the remote is on the filter. */
.filter.active {
  border-color: var(--fg);
  background: #1d2432;
}

#board {
  height: calc(100vh - 13vh);
  overflow-y: auto;
  padding: 0 0 1vh;
  scrollbar-width: none;
}

#board::-webkit-scrollbar { display: none; }

.row-head {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: 1.2vh var(--safe-x) 0.6vh;
  font-size: 1.35vw;
  font-weight: 700;
}

.row-head .dot {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
}

.row-head .count { color: var(--dim); font-weight: 400; font-size: 1vw; }

/* The vertical padding is not decoration: overflow-x makes this a scroll
   container, which clips vertically too, so the scaled-up active tile needs
   room above and below or its top edge gets cut off. */
.row {
  display: flex;
  gap: 1vw;
  overflow-x: auto;
  padding: 2.2vh var(--safe-x);
  scrollbar-width: none;
}

.row::-webkit-scrollbar { display: none; }

.tile {
  position: relative;
  flex: 0 0 auto;
  width: var(--tile-w);
  transition: transform 120ms ease-out, width 320ms ease;
}

/* 16:9 at the poster's height works out to exactly 8/3 of a tile width, so the
   row height never changes when a tile expands. */
.tile.preview { width: calc(var(--tile-w) * 8 / 3); }
.tile.preview .poster { aspect-ratio: 16 / 9; }

.tile-trailer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 0.6vw;
  overflow: hidden;
  background: #141822;
  border: 0.25vw solid transparent;
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The D-pad cursor. Scale plus a bright ring reads clearly from 3 metres. */
.tile.active { transform: scale(1.06); z-index: 2; }
.tile.active .poster { border-color: var(--fg); }

.rank {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.2vh 0.7vw;
  background: rgba(7, 8, 12, 0.86);
  border-top-right-radius: 0.5vw;
  font-size: 1.7vw;
  font-weight: 800;
  line-height: 1.2;
}

.badges {
  position: absolute;
  top: 0.5vh;
  right: 0.4vw;
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
  align-items: flex-end;
}

.badge {
  padding: 0.15vh 0.5vw;
  border-radius: 0.3vw;
  font-size: 0.85vw;
  font-weight: 700;
}

.badge.new { background: #d7263d; }
.badge.up { background: #1f9d55; }
.badge.imdb { background: #f5c518; color: #101010; }

.tile h3 {
  margin: 0.7vh 0 0.2vh;
  font-size: 1.05vw;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tile .sub {
  font-size: 0.9vw;
  color: var(--dim);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row-empty {
  padding: 2vh var(--safe-x);
  color: var(--dim);
  font-size: 1.1vw;
}

.hints {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 2.2vw;
  padding: 1vh var(--safe-x) var(--safe-y);
  font-size: 0.95vw;
  color: var(--dim);
  background: linear-gradient(transparent, var(--bg) 45%);
}

.hints b { color: var(--fg); }

/* Full genre list, opened with OK on the filter. A custom overlay rather than the
   native dropdown, because a native picker cannot be driven predictably by a
   remote across TV browsers. */
.genre-list {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.genre-list[hidden] { display: none; }

.genre-list-inner {
  width: 46vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}

.genre-list h2 {
  margin: 0 0 1.5vh;
  font-size: 2vw;
}

.genre-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
}

.genre-list ul::-webkit-scrollbar { display: none; }

.genre-list li {
  padding: 1.1vh 1.4vw;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  border: 0.18vw solid transparent;
}

.genre-list li.active {
  background: #1d2432;
  border-color: var(--fg);
}

.genre-list li.current::after {
  content: " ✓";
  color: #4ade80;
}

.panel {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.96);
  display: flex;
  align-items: center;
  z-index: 10;
}

.panel[hidden] { display: none; }

/* The media fills the screen and the text sits on top of it, bottom-left. */
.panel-inner {
  position: absolute;
  inset: 0;
  width: 100%;
}

.panel-media {
  position: absolute;
  inset: 0;
}

.panel-media .trailer,
.panel-media img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

/* Backdrops are 16:9 and fill nicely; a poster is 2:3 and would be badly
   cropped, so it is contained and centred instead of covering. */
.panel-media img { object-fit: cover; }
.panel-media img.poster-fallback { object-fit: contain; }

/* Keeps the overlay readable over bright footage without dimming the whole frame. */
.panel-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 6, 10, 0.95) 0%, rgba(5, 6, 10, 0.7) 28%, rgba(5, 6, 10, 0) 55%),
    linear-gradient(to right, rgba(5, 6, 10, 0.85) 0%, rgba(5, 6, 10, 0) 55%);
}

.panel-text {
  position: absolute;
  left: var(--safe-x);
  bottom: var(--safe-y);
  max-width: 46vw;
  z-index: 2;
}

/* The overlay fades out once playback is under way and returns on pause. */
.panel-text,
.panel-scrim {
  transition: opacity 600ms ease;
}

.panel.overlay-hidden .panel-text,
.panel.overlay-hidden .panel-scrim {
  opacity: 0;
}

.panel-text h2 { font-size: 2.8vw; }
#panel-desc {
  font-size: 1.2vw;
  /* Long synopses would otherwise push the overlay up the screen. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.panel-text h2 {
  margin: 0 0 1.2vh;
  font-size: 3.2vw;
  line-height: 1.1;
}

.title-en {
  margin: -0.6vh 0 1.2vh;
  font-size: 1.4vw;
  color: var(--dim);
  font-style: italic;
}

.title-en[hidden] { display: none; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vw;
  margin-bottom: 2vh;
  font-size: 1.15vw;
}

.facts span {
  padding: 0.3vh 0.8vw;
  border: 1px solid #2a3040;
  border-radius: 0.4vw;
  color: var(--dim);
}

.facts span.imdb { background: #f5c518; color: #101010; border-color: #f5c518; font-weight: 700; }
.facts span.tomato-fresh { background: #fa320a; color: #fff; border-color: #fa320a; font-weight: 700; }
.facts span.tomato-rotten { background: #0ac855; color: #05230f; border-color: #0ac855; font-weight: 700; }

#panel-desc {
  margin: 0 0 2vh;
  font-size: 1.35vw;
  line-height: 1.5;
  color: #d5dae6;
}

.chart-info { font-size: 1.1vw; color: var(--dim); }

/* Phones and desktop preview: the vw-based scale would be unreadable. */
@media (max-width: 900px) {
  :root { --tile-w: 38vw; --safe-x: 5vw; }
  .topbar h1 { font-size: 5vw; }
  .meta, .row-head .count, .tile .sub, .hints { font-size: 3vw; }
  .row-head { font-size: 4.2vw; }
  .tile h3 { font-size: 3.4vw; }
  .rank { font-size: 5vw; }
  .badge { font-size: 2.6vw; }
  .panel-text { max-width: 88vw; }
  .panel-text h2 { font-size: 7vw; }
  #panel-desc { font-size: 3.6vw; }
  .title-en { font-size: 4vw; }
  .panel-text h2 { font-size: 7vw; }
  .facts, .chart-info { font-size: 3.2vw; }
  #panel-desc { font-size: 3.6vw; }
}