:root {
  --bg: #101418;
  --panel: #1b2229;
  --text: #eef2f5;
  --muted: #9aa7b2;
  --accent: #ffd34d;
  --ok: #5fd28a;
  --warn: #ffb347;
  --bad: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 24px/1.35 system-ui, -apple-system, "LG Smart UI", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#status {
  display: flex;
  flex-wrap: wrap;
  padding: 16px 48px;
  background: var(--panel);
  font-size: 22px;
}
/* Flexbox gap needs Chromium 84+; webOS 6 is Chromium 79, so use margins. */
#status > div { margin: 0 32px 8px 0; }
#status .k { color: var(--muted); margin-right: 6px; }
.card { margin: 0 32px 32px 0; }
#player-view > * { margin-bottom: 16px; }
#player-controls > * { margin-right: 24px; }
.auth-ok { color: var(--ok); }
.auth-lease { color: var(--warn); }
.auth-none { color: var(--bad); }
main { flex: 1; padding: 24px 48px; overflow: hidden; }
h1 { margin: 0 0 8px; font-size: 40px; }
#list-sub { color: var(--muted); margin: 0 0 24px; }
.card {
  width: 400px;
  background: var(--panel);
  color: var(--text);
  border: 4px solid transparent;
  border-radius: 12px;
  padding: 0 0 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}
.card img { width: 100%; height: 225px; object-fit: cover; display: block; background: #000; }
.card .t { padding: 10px 14px 0; font-size: 22px; }
.card .s { padding: 4px 14px 0; font-size: 18px; color: var(--muted); }
.card.unavailable { opacity: 0.55; }
.card.unavailable .s { color: var(--bad); }
/* Watch now, once each: a watched video stays in place, dimmed, with a tick. */
.card .pic { position: relative; }
.card.watched { opacity: 0.45; cursor: default; }
#cards.later-strip { display: flex; flex-wrap: wrap; }
.later-thumb { width: 192px; height: 108px; margin: 0 16px 16px 0; border-radius: 10px; overflow: hidden; opacity: 0.45; filter: grayscale(0.7); }
.later-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fire TV: Parent, Break and Resume are opened with Menu; shown as labels. */
.menu-label { pointer-events: none; }
.card.watched .tick { position: absolute; right: 14px; top: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--ok); color: #101418; font-size: 30px; line-height: 48px; text-align: center; font-weight: 700; }
/* Stopped part way: how far, along the bottom of the picture. */
.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(255, 255, 255, 0.3); }
.card .bar span { display: block; height: 100%; background: #ff4e45; }
.card .t { font-size: 24px; font-weight: 600; }

/* The child's list: title, time left, Parent quiet at the right. */
body:not(.debug) #status, body:not(.debug) #log-strip { display: none; }
#list-view:not([hidden]) { height: 100%; display: flex; flex-direction: column; }
#list-head { display: flex; align-items: center; margin-bottom: 8px; }
#list-head h1 { margin: 0; }
#list-pill { margin-left: 28px; padding: 6px 22px; border-radius: 999px; background: #1f3a2c; color: var(--ok); font-size: 26px; font-weight: 600; white-space: nowrap; }
#list-pill[hidden] { display: none; }
#list-pill.paused { background: #3a3220; color: var(--warn); }
#list-pill .pause-ico { display: inline-block; box-sizing: border-box; width: 16px; height: 20px; margin-right: 10px; vertical-align: -2px; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
#list-sub:empty { display: none; }
#break-clock { display: flex; align-items: center; margin: 8px 0 40px; }
#break-clock[hidden], #break-clock .bc[hidden], #break-clock .bc-arrow[hidden] { display: none; }
#break-clock .bc { display: flex; flex-direction: column; align-items: center; padding: 20px 40px; border-radius: 20px; background: var(--panel); }
#break-clock .bc b { font-size: 96px; line-height: 1; font-weight: 700; }
#break-clock .bc span { margin-top: 12px; font-size: 26px; color: var(--muted); }
#break-clock #bc-back-box b { color: var(--warn); }
#break-clock .bc-arrow { font-size: 72px; color: var(--muted); margin: 0 32px; }
#cards { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 8px 0 0 8px; margin-left: -8px; }
#cards.shelves { display: block; }
#cards.grid { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.shelf .row { align-items: flex-start; }
#cards::-webkit-scrollbar, #cards .row::-webkit-scrollbar { display: none; }
/* Shelves: Down and Up move between them, Left and Right along one; the next
   card peeks in at the right edge. */
.shelf h2 { margin: 4px 0 14px; font-size: 28px; color: var(--muted); font-weight: 600; }
.shelf .row { position: relative; display: flex; overflow-x: hidden; padding: 8px 0 0 8px; margin: 0 0 0 -8px; }
.shelf .card { width: 380px; flex-shrink: 0; }
.shelf .card img { height: 214px; }
button { font: inherit; }
[data-focus]:focus, .focused { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent); }
#player-view { display: flex; flex-direction: column; align-items: center; }
#player-view[hidden], #list-view[hidden], #message-view[hidden], #pin-view[hidden], #break-view[hidden], #btn-parent[hidden], #btn-break[hidden], #btn-break-play[hidden] { display: none; }
.small-btn, #pin-pad button {
  background: var(--panel); color: var(--text); border: 4px solid transparent;
  border-radius: 10px; padding: 12px 28px;
}
#btn-parent { margin-left: auto; font-size: 20px; color: var(--muted); }
#btn-break { margin-left: auto; font-size: 20px; color: var(--muted); }
#btn-break:not([hidden]) + #btn-parent { margin-left: 16px; }
#break-view { text-align: center; padding-top: 120px; }
#break-sub, #break-msg { color: var(--muted); }
#break-opts { margin-top: 40px; }
#break-opts button {
  background: var(--panel); color: var(--text); border: 4px solid transparent;
  border-radius: 10px; padding: 16px 32px; margin: 0 12px; font-size: 28px;
}

/* Parent PIN pad: arrow keys move, OK presses; number keys also work. */
#pin-view { text-align: center; padding-top: 40px; }
#pin-sub, #pin-msg { color: var(--muted); }
#pin-msg.bad { color: var(--bad); }
#pin-dots { font-size: 56px; letter-spacing: 16px; min-height: 80px; color: var(--accent); }
#pin-pad { width: 420px; margin: 16px auto 0; }
#pin-pad button { width: 116px; margin: 0 8px 16px; font-size: 32px; padding: 14px 0; }
/* Fire TV: a PIN dialog like Fire TV's own. The remote's ring is the keypad;
   the wheel never highlights a press, so someone watching sees only dots. */
#pin-pad[hidden], #pin-ring[hidden] { display: none; }
#pin-view.ring-mode:not([hidden]) { display: flex; flex-direction: column; align-items: center; padding-top: 60px; }
#pin-view.ring-mode #pin-title, #pin-view.ring-mode #pin-dots, #pin-view.ring-mode #pin-msg { display: none; }
#pin-view.ring-mode #pin-sub { order: 2; margin-top: 30px; color: var(--text); font-size: 28px; }
#pin-ring { order: 1; width: 630px; padding: 26px 30px 40px; box-sizing: border-box; text-align: left;
  background: #0b0b0b; border: 2px solid #4d4d4d; color: #f2f2f2; }
#pin-ring .pr-title { font-size: 28px; }
#pin-ring .pr-slots { display: flex; gap: 14px; margin-top: 30px; height: 60px; }
#pin-ring .pr-slots span { flex: 1; border-bottom: 3px solid #6b6b6b; text-align: center; font-size: 36px; line-height: 56px; }
#pin-ring .pr-hint { margin-top: 14px; font-size: 29px; color: #d9d9d9; min-height: 40px; }
#pin-ring .pr-hint.bad { color: var(--bad); }
#pin-ring .pr-wheel { position: relative; width: 340px; height: 340px; margin: 26px auto 0; border-radius: 50%; background: #262626; }
#pin-ring .pr-wheel span { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; line-height: 90px; text-align: center; font-size: 56px; }
#pin-ring .pr-wheel .c { left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; line-height: 160px; border-radius: 50%; background: #0a0a0a; }
#pin-ring .pr-wheel .u { left: 50%; top: 13%; }
#pin-ring .pr-wheel .r { left: 87%; top: 50%; }
#pin-ring .pr-wheel .d { left: 50%; top: 87%; }
#pin-ring .pr-wheel .l { left: 13%; top: 50%; }
#pin-ring .pr-keys { display: flex; justify-content: space-between; margin-top: 44px; font-size: 26px; color: #d9d9d9; }
#pin-ring .pr-keys span { display: flex; align-items: center; }
.pr-icon { width: 34px; height: 34px; margin-right: 8px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pr-icon .f { fill: currentColor; stroke: none; }
#pin-ring .pr-hint .pr-icon { margin: 0 6px; }
#player-frame { width: 1152px; max-width: 100%; aspect-ratio: 16 / 9; background: #000; }
/* aspect-ratio arrived in Chromium 88; webOS 6 is Chromium 79, so set height too. */
@supports not (aspect-ratio: 16 / 9) { #player-frame { height: 648px; } }
#player-frame iframe, #player { width: 100%; height: 100%; display: block; }
#player-frame { position: relative; }
/* Pointer guard: the player is hidden (not covered) while a pointer exists. */
#player-frame.guarded iframe { visibility: hidden; }
#pointer-guard-msg {
  display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center;
  text-align: center; padding: 48px; font-size: 40px; color: var(--accent);
}
#player-frame.guarded #pointer-guard-msg { display: flex; }
#player-controls { display: flex; align-items: center; }
#player-controls button, #message-view button {
  background: var(--panel); color: var(--text); border: 4px solid transparent;
  border-radius: 10px; padding: 12px 28px;
}
#player-note { color: var(--muted); font-size: 20px; }
/* Break is for the parent: quieter, and set apart from the child's buttons. */
#player-controls #btn-break-play { margin-left: 48px; padding: 8px 22px; font-size: 22px; color: var(--muted); background: transparent; border-color: var(--panel); }

/* Full-screen playback. Our controls never overlay the player (YouTube RMF):
   showing them shrinks the player to make room below it. */
body.playing #status, body.playing #log-strip { display: none; }
body.playing main { padding: 0; }
body.playing #player-view > * { margin-bottom: 0; }
body.playing #player-frame { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; }
body.playing #player-controls { display: none; height: 96px; justify-content: center; }
body.playing.controls-shown #player-frame { height: calc(100vh - 96px); }
body.playing.controls-shown #player-controls { display: flex; }
#message-view { text-align: center; padding-top: 120px; }
#message-body { color: var(--muted); }
#log-strip {
  height: 150px;
  padding: 8px 48px;
  background: #0a0d10;
  font: 16px/1.35 ui-monospace, Menlo, monospace;
  color: var(--muted);
  overflow: hidden;
  white-space: pre;
}
#log-strip .bad { color: var(--bad); }
#log-strip .warn { color: var(--warn); }

@media (max-width: 900px) {
  body { font-size: 16px; overflow: auto; }
  #status, main, #log-strip { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 26px; }
  .card { width: 100%; }
  .card img { height: auto; aspect-ratio: 16 / 9; }
  #player-frame { height: auto; }
}