/* Dark theme for Meta Ray-Ban Display (additive lens: black = transparent, bright = visible).
   Designed for a 600x600 monocular display, D-pad (arrow keys + Enter) input. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red1: #ff4d4d;        /* YouTube-ish accent */
  --red2: #ff7a7a;
  --sky1: #6cb6e8;        /* focus highlight */
  --bg: #000;
  --card-bg: #111;
  --card-border: #222;
  --text: #f5f7fa;
  --muted: #7a8899;
  --green: #4ade80;
  --warn: #fbbf24;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  line-height: 1.35;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#root { height: 100%; display: flex; flex-direction: column; }

/* Header */
.head {
  background: #0c0c10;
  border-bottom: 1px solid var(--card-border);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Fredoka One', 'Nunito', cursive;
}
.head .title { color: var(--red1); font-size: 22px; }
.head .ctx { color: var(--muted); font-size: 14px; font-family: 'Nunito', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

/* Results list */
.list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 10px 12px 4px;
}
.list::-webkit-scrollbar { display: none; }

.list li {
  background: var(--card-bg);
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  border-left: 4px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}
.list li.focusable.focused {
  background: #1c2733;
  border-left-color: var(--sky1);
  color: #fff;
}
.list li .thumb {
  width: 92px; height: 52px; flex: 0 0 auto;
  border-radius: 6px; object-fit: cover; background: #000;
}
.list li .meta { flex: 1; min-width: 0; }
.list li .vtitle {
  font-size: 18px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.list li .vchan { font-size: 14px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

.list li.noop {
  background: transparent; border-left: none; color: var(--muted);
  text-align: center; padding: 28px 12px; font-size: 18px; display: block;
}

/* Player screen */
#player-screen { flex: 1; display: none; flex-direction: column; }
#player-screen.on { display: flex; }
#player-frame { flex: 1; position: relative; background: #000; }
#player-frame iframe, #player-frame > div {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0;
}
.player-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: #0a0a0a; border-top: 1px solid var(--card-border);
  padding: 6px 12px; font-size: 14px; color: var(--muted);
}
.player-bar .ptitle { flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.player-bar .pstate { margin-left: 10px; color: var(--sky1); white-space: nowrap; }

/* Fallback "open on phone" card shown when the embed can't play */
#fallback { display: none; flex: 1; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 24px; gap: 12px; }
#fallback.on { display: flex; }
#fallback .fb-title { font-family: 'Fredoka One', 'Nunito', cursive; color: var(--red1);
  font-size: 22px; }
#fallback .fb-vtitle { font-size: 18px; }
#fallback .fb-cta {
  margin-top: 8px; background: #1c2733; border: 1px solid var(--sky1);
  border-radius: 12px; padding: 12px 18px; font-size: 20px; font-weight: 700; color: #fff;
}
#fallback .fb-cta.focused { background: #234; box-shadow: 0 0 0 2px var(--sky1); }
#fallback .fb-note { font-size: 14px; color: var(--muted); }

/* Footer */
.footer {
  display: flex; justify-content: space-between;
  background: #0a0a0a; border-top: 1px solid var(--card-border);
  color: var(--muted); font-size: 14px; padding: 6px 14px;
}
.footer .hint { color: #444; }
.footer .status.err { color: var(--warn); }