:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #0b0b0c;
  color: #e8e8ea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
}
header {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
h1 { font-size: 18px; font-weight: 600; margin: 0; }
.right { display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: #1a1a1d; border: 1px solid #2a2a2f;
  font-size: 12px; color: #b8b8bd;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #555; transition: background .2s, box-shadow .2s; }
.dot.live {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);   }
}
.icon-btn {
  background: #1a1a1d;
  border: 1px solid #2a2a2f;
  color: #e8e8ea;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 36px;
}
.icon-btn:hover { background: #25252b; }
.icon-btn.active { background: #ef4444; border-color: #ef4444; }

.player {
  width: 100%;
  max-width: 1280px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  touch-action: none;
  cursor: default;
}
.player.zoomed { cursor: grab; }
.player.panning { cursor: grabbing; }
.stage {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform .12s ease-out;
  will-change: transform;
}
.stage.dragging { transition: none; }
video { width: 100%; height: 100%; display: block; background: #000; }

.sub-layer {
  position: absolute;
  left: 0; right: 0;
  bottom: 70px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.sub-box {
  max-width: 80%;
  padding: 6px 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: clamp(14px, 2vw, 22px);
  text-align: center;
  border-radius: 6px;
  line-height: 1.3;
  text-shadow: 0 1px 2px #000;
  display: none;
  white-space: pre-wrap;
}
.sub-box.visible { display: block; }
body.subs-off .sub-box { display: none !important; }

.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  color: #999; font-size: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5));
  transition: opacity .4s;
  text-align: center;
  padding: 20px;
  z-index: 2;
}
.overlay.hidden { opacity: 0; }

.bottom-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex; gap: 8px;
  align-items: center;
  z-index: 4;
}
.bottom-bar .spacer { flex: 1; }
.badge {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 4px 8px;
  border-radius: 6px;
  color: #e8e8ea;
  font-size: 12px;
  backdrop-filter: blur(6px);
}

google-cast-launcher {
  --connected-color: #ef4444;
  --disconnected-color: #e8e8ea;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

footer {
  margin-top: 14px;
  font-size: 12px;
  color: #6b6b72;
  max-width: 1280px; width: 100%;
  line-height: 1.6;
  text-align: center;
}
footer code, dialog code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #15151a; border: 1px solid #25252b;
  padding: 1px 6px; border-radius: 4px; color: #c8c8cf;
}

dialog {
  background: #15151a;
  color: #e8e8ea;
  border: 1px solid #2a2a2f;
  border-radius: 10px;
  padding: 22px;
  max-width: 480px;
  width: calc(100vw - 32px);
}
dialog::backdrop { background: rgba(0,0,0,0.7); }
dialog h2 { margin: 0 0 10px; font-size: 16px; }
dialog p { color: #b8b8bd; font-size: 13px; margin: 8px 0; }
dialog .hint { color: #7a7a82; font-size: 12px; }
dialog input {
  width: 100%; padding: 10px;
  background: #0b0b0c; border: 1px solid #2a2a2f;
  color: #e8e8ea; border-radius: 6px; font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 16px;
}
.dialog-actions button {
  background: #1a1a1d; border: 1px solid #2a2a2f;
  color: #e8e8ea; padding: 8px 14px;
  border-radius: 6px; cursor: pointer;
}
.dialog-actions button[value="default"] { background: #ef4444; border-color: #ef4444; }

:fullscreen .player { border-radius: 0; max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; }
:fullscreen header, :fullscreen footer { display: none; }