/* ------------------------------------------------------------------
   DRAMA TV - stylesheet for an old Android/Google TV browser.

   Rules followed here on purpose:
     - no CSS variables, no grid, no calc(), no rem
     - inline-block layout so the page still reads if flexbox misbehaves
     - px and vh/vw only (both supported since Chrome 20)
     - focus states use outline + border, never colour alone
     - nothing depends on :hover

   Sizing strategy: TV browsers report wildly different viewport sizes
   (1920x1080, 1280x720, and some report ~960 wide). Rather than guess,
   the layout adapts at width breakpoints, and the video is sized in vh
   so the player always fits one screen without scrolling.
   ------------------------------------------------------------------ */

html {
  background-color: #000000;
}

body {
  margin: 0;
  padding: 0;
  background-color: #101010;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 1.4;
  /* Never allow sideways scrolling on a TV: there is no way to scroll back. */
  overflow-x: hidden;
}

/*
 * Overscan safety. Many TVs crop the outer few percent of the picture, so
 * nothing important sits hard against an edge.
 */
.page {
  max-width: 1720px;
  margin: 0 auto;
  padding: 36px 4% 80px 4%;
  box-sizing: border-box;
}

/* The player page must fit one screen: no bottom padding to waste. */
.page-player {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ---------- typography ---------- */

h1,
.site-title {
  font-size: 52px;
  line-height: 1.15;
  margin: 0 0 24px 0;
  color: #ffffff;
  letter-spacing: 1px;
}

h2,
.section-title {
  font-size: 38px;
  margin: 40px 0 18px 0;
  color: #ffd24a;
  border-bottom: 3px solid #333333;
  padding-bottom: 10px;
}

h3 {
  font-size: 30px;
  margin: 0 0 12px 0;
}

p {
  font-size: 24px;
  margin: 0 0 16px 0;
}

.muted {
  color: #b8b8b8;
}

.center {
  text-align: center;
}

.inline {
  display: inline;
}

/* ---------- status / messages ---------- */

.status {
  font-size: 30px;
  padding: 24px 22px;
  margin: 20px 0;
  background-color: #1b1b1b;
  border-left: 10px solid #555555;
  color: #ffffff;
}

.status-error {
  border-left-color: #ff5252;
  color: #ffdede;
}

.status-empty {
  border-left-color: #ffd24a;
}

.hidden {
  display: none;
}

/* ---------- search bar ---------- */

.search-row {
  margin: 0 0 20px 0;
}

.search-input {
  display: inline-block;
  width: 56%;
  max-width: 900px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding: 18px 20px;
  margin: 0 16px 16px 0;
  color: #ffffff;
  background-color: #000000;
  border: 4px solid #666666;
  box-sizing: border-box;
  vertical-align: middle;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: bold;
  padding: 18px 34px;
  margin: 0 14px 14px 0;
  color: #ffffff;
  background-color: #b3121a;
  border: 4px solid #b3121a;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.btn-secondary {
  background-color: #2a2a2a;
  border-color: #555555;
}

.btn-big {
  font-size: 32px;
  padding: 24px 46px;
}

.btn-block {
  display: block;
  width: 100%;
  margin-right: 0;
  box-sizing: border-box;
}

/* ---------- focus: must be unmistakable from across a room ---------- */

.tv-focusable:focus,
.btn:focus,
.search-input:focus,
.card:focus,
.episode:focus,
.chip:focus {
  outline: 6px solid #ffd24a;
  outline-offset: 2px;
  border-color: #ffd24a;
  background-color: #2f2f2f;
  color: #ffffff;
}

/* Some old WebKit builds ignore outline on some elements; this is a backup
   signal that does not depend on outline rendering at all. */
.card:focus,
.episode:focus {
  box-shadow: 0 0 0 6px #ffd24a;
}

.btn:focus {
  background-color: #e01b24;
}

/* ---------- poster grid (inline-block, not grid/flex) ---------- */

.card-list {
  margin: 0;
  padding: 0;
  font-size: 0; /* removes inline-block whitespace gaps */
}

/*
 * Percentage widths so the row count follows the screen and the grid can
 * never cause a horizontal scrollbar.
 */
.card {
  display: inline-block;
  vertical-align: top;
  width: 17.8%;
  margin: 0 2% 28px 0;
  padding: 0 0 14px 0;
  background-color: #1b1b1b;
  border: 4px solid #333333;
  text-align: left;
  text-decoration: none;
  color: #ffffff;
  font-size: 24px; /* restore after the font-size:0 trick */
  box-sizing: border-box;
  cursor: pointer;
}

.card-poster {
  display: block;
  width: 100%;
  height: 300px;
  height: 20vw;
  max-height: 420px;
  background-color: #000000;
  border: 0;
  /* Posters vary in aspect ratio; crop rather than distort where supported. */
  object-fit: cover;
}

.card-noimage {
  display: block;
  width: 100%;
  height: 300px;
  height: 20vw;
  max-height: 420px;
  background-color: #000000;
  color: #777777;
  font-size: 24px;
  text-align: center;
  line-height: 300px;
  line-height: 20vw;
  overflow: hidden;
  box-sizing: border-box;
}

.card-title {
  display: block;
  font-size: 26px;
  font-weight: bold;
  padding: 12px 14px 4px 14px;
  /* Long titles must not blow the card width open. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-meta {
  display: block;
  font-size: 20px;
  color: #bcbcbc;
  padding: 0 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- recent search chips ---------- */

.chip {
  display: inline-block;
  font-size: 24px;
  padding: 14px 26px;
  margin: 0 14px 14px 0;
  background-color: #2a2a2a;
  border: 4px solid #555555;
  color: #ffffff;
  cursor: pointer;
}

/* ---------- drama detail ---------- */

.detail-poster {
  display: inline-block;
  vertical-align: top;
  width: 260px;
  height: 372px;
  margin: 0 36px 20px 0;
  background-color: #000000;
  object-fit: cover;
}

.detail-info {
  display: inline-block;
  vertical-align: top;
  max-width: 1100px;
}

.detail-line {
  font-size: 24px;
  margin: 0 0 10px 0;
  color: #d8d8d8;
}

.detail-label {
  color: #ffd24a;
  font-weight: bold;
}

.description {
  font-size: 23px;
  color: #d8d8d8;
  max-width: 1200px;
}

/* ---------- episode rows ---------- */

.episode {
  display: block;
  width: 100%;
  margin: 0 0 18px 0;
  padding: 18px 22px;
  background-color: #1b1b1b;
  border: 4px solid #333333;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.episode-thumb {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 113px;
  margin-right: 22px;
  background-color: #000000;
  object-fit: cover;
}

.episode-text {
  display: inline-block;
  vertical-align: middle;
  max-width: 74%;
}

.episode-number {
  display: block;
  font-size: 30px;
  font-weight: bold;
}

.episode-meta {
  display: block;
  font-size: 22px;
  color: #bcbcbc;
}

.episode-badge {
  display: inline-block;
  font-size: 18px;
  padding: 4px 12px;
  margin-left: 14px;
  background-color: #b3121a;
  color: #ffffff;
  vertical-align: middle;
}

.episode-badge-muted {
  background-color: #444444;
  color: #dddddd;
}

/* ---------- player ---------- */

/*
 * Everything the remote needs sits in this bar at the TOP of the page, so it
 * is on screen the moment the player opens. Putting FULL SCREEN below the
 * video pushed it off the bottom of a 720p TV.
 */
.player-bar {
  margin: 0 0 12px 0;
  white-space: nowrap;
  overflow: hidden;
}

.player-heading {
  display: inline-block;
  vertical-align: middle;
  margin-left: 18px;
  max-width: 52%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-drama {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
}

.player-episode {
  font-size: 26px;
  color: #bcbcbc;
  margin-left: 14px;
}

.player-box {
  width: 100%;
  background-color: #000000;
  margin: 0 0 14px 0;
}

/*
 * Height in vh, not px: the video then fills whatever is left of the screen
 * on any TV, and the page never needs scrolling to reach the controls.
 */
#videoPlayer,
#embedFrame,
#testVideo {
  display: block;
  width: 100%;
  /* px first as a fallback for any engine without vh, then the vh value. */
  height: 480px;
  height: 68vh;
  min-height: 200px;
  background-color: #000000;
  border: 0;
}

/*
 * Fullscreen. These must stay as SEPARATE rules: a browser that does not
 * understand one of these pseudo-classes discards the whole selector list,
 * so combining them with commas would break fullscreen everywhere.
 */
#videoPlayer:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

#videoPlayer:-moz-full-screen {
  width: 100%;
  height: 100%;
}

#videoPlayer:fullscreen {
  width: 100%;
  height: 100%;
}

/* ---------- diagnostics table ---------- */

.diag-row {
  padding: 14px 0;
  border-bottom: 2px solid #2c2c2c;
}

.diag-label {
  display: inline-block;
  width: 400px;
  font-size: 24px;
  color: #ffd24a;
  vertical-align: top;
}

.diag-value {
  display: inline-block;
  font-size: 24px;
  color: #ffffff;
  max-width: 60%;
  vertical-align: top;
  /* User agent strings are long and must not cause sideways scrolling. */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.yes {
  color: #6ee36e;
}

.no {
  color: #ff6b6b;
}

.maybe {
  color: #ffd24a;
}

/* ==================================================================
   Breakpoints. TVs land in several of these depending on how the
   browser reports its viewport.
   ================================================================== */

/* ---- 1080p TVs and large laptops: 5 cards per row (the default above) ---- */

/* ---- 720p TVs / smaller laptops: 4 per row, slightly smaller type ---- */
@media screen and (max-width: 1450px) {
  body {
    font-size: 22px;
  }
  h1,
  .site-title {
    font-size: 44px;
  }
  h2,
  .section-title {
    font-size: 32px;
  }
  .card {
    width: 22%;
  }
  .card-poster,
  .card-noimage {
    height: 260px;
    height: 25vw;
  }
  .card-noimage {
    line-height: 260px;
    line-height: 25vw;
  }
  .btn {
    font-size: 24px;
    padding: 15px 28px;
  }
  .search-input {
    font-size: 26px;
  }
  .detail-poster {
    width: 220px;
    height: 314px;
  }
  .player-drama {
    font-size: 26px;
  }
  .player-episode {
    font-size: 22px;
  }
}

/* ---- narrow TV viewports / tablets: 3 per row ---- */
@media screen and (max-width: 1100px) {
  .card {
    width: 30.6%;
  }
  .card-poster,
  .card-noimage {
    height: 300px;
    height: 34vw;
  }
  .card-noimage {
    line-height: 300px;
    line-height: 34vw;
  }
  .episode-text {
    max-width: 66%;
  }
}

/*
 * Short screens (many TVs report 720px or less of height). Give the video
 * more of the screen and trim the chrome around it.
 */
@media screen and (max-height: 800px) {
  .page-player {
    padding-top: 12px;
  }
  .player-bar {
    margin-bottom: 8px;
  }
  .btn {
    padding: 12px 24px;
  }
  #videoPlayer,
  #embedFrame {
    height: 420px;
    height: 70vh;
  }
}

@media screen and (max-height: 560px) {
  #videoPlayer,
  #embedFrame {
    height: 320px;
    height: 64vh;
  }
  .player-drama {
    font-size: 22px;
  }
  .player-episode {
    font-size: 18px;
  }
}

/* ---- phones ---- */
@media screen and (max-width: 760px) {
  body {
    font-size: 18px;
  }
  .page {
    padding: 16px 16px 48px 16px;
  }
  h1,
  .site-title {
    font-size: 30px;
  }
  h2,
  .section-title {
    font-size: 24px;
  }
  .search-input {
    display: block;
    width: 100%;
    max-width: none;
    font-size: 20px;
    margin-right: 0;
  }
  .btn {
    font-size: 18px;
    padding: 13px 20px;
  }
  .btn-big {
    font-size: 20px;
    padding: 16px 24px;
  }
  .card {
    width: 48%;
    margin-right: 3%;
  }
  .card:nth-child(2n) {
    margin-right: 0;
  }
  .card-poster,
  .card-noimage {
    height: 230px;
    height: 62vw;
  }
  .card-noimage {
    line-height: 230px;
    line-height: 62vw;
    font-size: 18px;
  }
  .card-title {
    font-size: 20px;
  }
  .card-meta {
    font-size: 16px;
  }
  .detail-poster {
    width: 130px;
    height: 186px;
    margin-right: 16px;
  }
  .detail-line,
  .description {
    font-size: 17px;
  }
  .episode {
    padding: 12px 14px;
  }
  .episode-thumb {
    width: 112px;
    height: 63px;
    margin-right: 14px;
  }
  .episode-text {
    max-width: 60%;
  }
  .episode-number {
    font-size: 20px;
  }
  .episode-meta {
    font-size: 15px;
  }
  .episode-badge {
    font-size: 13px;
    margin-left: 8px;
  }
  /* On a phone the heading would squeeze the buttons; give it its own line. */
  .player-bar {
    white-space: normal;
  }
  .player-heading {
    display: block;
    margin-left: 0;
    margin-top: 6px;
    max-width: 100%;
  }
  .player-drama {
    font-size: 20px;
  }
  .player-episode {
    font-size: 16px;
    margin-left: 8px;
  }
  #videoPlayer,
  #embedFrame {
    height: 200px;
    height: 32vh;
    min-height: 180px;
  }
  .diag-label {
    width: 100%;
    display: block;
    font-size: 17px;
  }
  .diag-value {
    max-width: 100%;
    font-size: 17px;
  }
  .status {
    font-size: 20px;
    padding: 16px 14px;
  }
}

/* ---- very small phones: one card per row ---- */
@media screen and (max-width: 440px) {
  .card {
    width: 100%;
    margin-right: 0;
  }
  .card-poster,
  .card-noimage {
    height: 380px;
    height: 120vw;
  }
  .card-noimage {
    line-height: 380px;
    line-height: 120vw;
  }
}