/* Additive display: pure black = transparent. Keep backgrounds black, UI bright. */
* { box-sizing: border-box; }
html, body {
  margin: 0; width: 600px; height: 600px; overflow: hidden;
  background: #000; color: #f2f2f2;
  font: 22px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hidden { display: none !important; }
.screen { width: 600px; height: 600px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bar { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.logo { font-size: 26px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.dim { color: #9ab; font-size: 18px; }
.label { color: #9ab; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; }
.row { display: flex; gap: 10px; align-items: stretch; }
.note { color: #9ab; font-size: 17px; margin: 0; }

.focusable { transition: border-color 120ms, box-shadow 120ms, background 120ms; border: 3px solid #333; }
.focusable:focus, .focusable.focused {
  outline: none; border-color: #00d4ff; box-shadow: 0 0 18px rgba(0, 212, 255, .55);
}

.field {
  flex: 1; min-height: 72px; padding: 0 16px; border-radius: 14px;
  background: #111; color: #fff; font: inherit; font-size: 22px;
}
.field.full { width: 100%; }
.field::placeholder { color: #8a99a6; }
.btn {
  min-height: 72px; padding: 0 22px; border-radius: 14px; background: #0b1a22; color: #fff;
  font: inherit; font-size: 22px; font-weight: 600; cursor: pointer;
}
.btn.small { min-width: 88px; padding: 0 12px; }
.btn.wide { flex: 1; }
.btn:focus { background: #06303d; }

.list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.list::-webkit-scrollbar { display: none; }
.list.short { flex: 1; min-height: 0; }
.list.tall { flex: 1; min-height: 0; }
.item {
  display: flex; gap: 12px; align-items: center; min-height: 88px; padding: 8px; border-radius: 14px;
  background: #0a0a0a; color: #fff; text-align: left; font: inherit; width: 100%; cursor: pointer; flex-shrink: 0;
}
.item img { width: 128px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #111; }
.item .meta { min-width: 0; display: flex; flex-direction: column; }
.item .t { font-size: 21px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item .c { font-size: 17px; color: #9ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: #8a99a6; font-size: 19px; padding: 8px 4px; }

/* Player */
#screen-player { padding: 0 0 12px; gap: 8px; }
#player-wrap { width: 600px; height: 338px; background: #000; position: relative; }
#player-wrap iframe, #player { width: 600px; height: 338px; border: 0; display: block; }
#fs-layer { display: none; }

/* App-level full screen. It only changes CSS sizes and positions via body.fs: the iframe is never moved,
   re-parented or hidden, so YouTube never reloads, and no ancestor of it is display:none.
   The player takes the whole 600 px width and everything above a 104 px strip at the bottom. Everything else
   is pure black, which is transparent on the glasses. The fading overlay sits in that strip, never over the
   player (YouTube RMF forbids overlays on the embed). The switch is instant: no transitions on any size. Pixel
   sizes are used rather than vw/vh because the app is a fixed 600x600 canvas, like the rest of styles.css. */
#player-wrap, #player-wrap iframe, #player { transition: none; }
body.fs { background: #000; }
body.fs #screen-player { padding: 0; gap: 0; }
body.fs #screen-player > :not(#player-wrap) { display: none !important; }
body.fs #player-wrap { position: absolute; left: 0; top: 0; width: 600px; height: 600px; z-index: 5; background: #000; }
body.fs #player-wrap iframe, body.fs #player { width: 600px; height: 496px; pointer-events: none; }
body.fs #fs-layer { display: block; position: absolute; left: 0; top: 496px; width: 600px; height: 104px; outline: none; background: #000; }
body.fs .toast { display: none; }
/* Overlay: appears instantly, fades out with an opacity-only transition, which is GPU-cheap. */
.fs-osd { position: absolute; left: 16px; right: 16px; bottom: 10px; padding: 6px 4px; color: #fff; opacity: 0; pointer-events: none; }
.fs-osd.fading { transition: opacity .3s linear; }
.fs-osd.show { opacity: 1; transition: none; }
.fs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; }
.fs-row #fs-state { font-size: 26px; min-width: 32px; }
.fs-row #fs-time { flex: 1; font-variant-numeric: tabular-nums; }
.fs-bar { margin-top: 8px; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
#fs-fill { height: 100%; width: 0; background: #ff3b3b; }
.fs-hint { margin-top: 6px; font-size: 16px; color: #9ab; }
.fs-hint.hidden { display: none; }
.now-title { padding: 0 16px; font-size: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { margin: 0 16px; height: 8px; background: #222; border-radius: 4px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: #ff3b3b; }
.times { display: flex; justify-content: space-between; padding: 0 16px; font-size: 17px; color: #9ab; }
.controls { display: flex; gap: 8px; padding: 0 12px; }
.ctl {
  flex: 1; min-height: 88px; border-radius: 14px; background: #0a0a0a; color: #fff;
  font-size: 30px; display: flex; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
}
.ctl small { font-size: 15px; }
.ctl:focus { background: #06303d; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: 560px;
  background: #102a35; color: #fff; border: 2px solid #00d4ff; border-radius: 12px; padding: 10px 16px; font-size: 19px; z-index: 10;
}

/* Home tiles */
.tiles { display: flex; gap: 10px; }
.tile {
  flex: 1; min-height: 88px; border-radius: 14px; background: #0a0a0a; color: #fff; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 4px;
}
.tile .i { font-size: 28px; line-height: 1; }
.tile .l { font-size: 17px; font-weight: 600; white-space: nowrap; }
.tile:focus { background: #06303d; }
.tile.primary { flex: 3; flex-direction: row; gap: 12px; font-size: 22px; font-weight: 700; }

/* Sign-in (device flow) */
.signin { display: flex; gap: 18px; align-items: center; }
.qr { width: 216px; height: 216px; flex-shrink: 0; background: #fff; border-radius: 10px; padding: 8px; }
.qr img, .qr svg { width: 200px; height: 200px; display: block; image-rendering: pixelated; }
.signin-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.verify-url { font-size: 24px; font-weight: 700; color: #7fe3ff; word-break: break-all; }
.user-code {
  font: 700 34px/1.1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #fff;
  letter-spacing: .04em; word-break: break-all; /* fits 15 'W' chars across two lines max */
}
.signin-status { font-size: 20px; color: #cfe; min-height: 52px; }
.acct-label { flex: 1; display: flex; align-items: center; font-size: 19px; color: #dde; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.signin-setup { padding: 8px 4px 4px; font-size: 21px; line-height: 1.35; }
.signin-setup p { margin: 0 0 14px; }
.signin-setup .big { font-size: 27px; font-weight: 700; }
.signin-setup .dim { font-size: 17px; }
#fs-vol.hot { color: #00d4ff; }