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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #eee;
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}

#media { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

section, aside, #subs, #error { position: absolute; display: none; }

/* --- Idle --- */
body.idle #idle {
  display: flex; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  background: linear-gradient(135deg, #05060c 0%, #0d1530 100%);
}
#idle img { width: 18vh; height: 18vh; }
#idle h1 { font-size: 6vh; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; }
#idle p { font-size: 2.8vh; color: #8aa0c8; }
body.idle #media { visibility: hidden; }

/* --- Loading / ended --- */
body.loading #loading {
  display: flex; inset: 0; align-items: center; justify-content: center; gap: 5vw; padding: 0 8vw;
  background: linear-gradient(135deg, #05060c 0%, #0d1530 100%);
}
#loading-poster { height: 62vh; max-width: 40vw; object-fit: contain; border-radius: 1vh; box-shadow: 0 2vh 6vh #000a; }
#loading-poster:not([src]), #loading-poster[src=""] { display: none; }
#loading .meta { max-width: 44vw; }
#loading h2 { font-size: 6vh; font-weight: 500; line-height: 1.15; }
#loading p { font-size: 3vh; color: #9db0d3; margin-top: 1.5vh; }
#loading-note { color: #c8d4ee; }
.spinner {
  width: 6vh; height: 6vh; margin-top: 4vh; border-radius: 50%;
  border: .7vh solid #ffffff22; border-top-color: #5eb8ff; animation: spin 1s linear infinite;
}
body.ended .spinner { display: none; }
body.ended #loading { display: flex; inset: 0; align-items: center; justify-content: center; gap: 5vw; padding: 0 8vw;
  background: linear-gradient(135deg, #05060c 0%, #0d1530 100%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Pause / seek overlay --- */
body.overlay #overlay {
  display: block; inset: 0; padding: 0 5vw 6vh;
  background: linear-gradient(to top, #000d 0%, #0006 40%, transparent 70%);
}
#overlay .meta { position: absolute; left: 5vw; right: 5vw; bottom: 17vh; }
#overlay h2 { font-size: 5.2vh; font-weight: 500; text-shadow: 0 .2vh .8vh #000; }
#overlay p { font-size: 3vh; color: #c0cce6; margin-top: .6vh; }
#overlay .bar { position: absolute; left: 5vw; right: 5vw; bottom: 9vh; height: .9vh; background: #ffffff33; border-radius: 1vh; overflow: hidden; }
#ov-fill { height: 100%; width: 0; background: #5eb8ff; }
#overlay .times { position: absolute; left: 5vw; right: 5vw; bottom: 4.5vh; display: flex; justify-content: space-between; font-size: 2.6vh; color: #c0cce6; }
#ov-state { position: absolute; right: 5vw; top: 5vh; font-size: 3.2vh; letter-spacing: .1em; text-transform: uppercase; color: #fff; }

/* --- Subtitles (own renderer, driven by absolute position) --- */
#subs {
  display: block; left: 8vw; right: 8vw; bottom: 8vh; text-align: center; white-space: pre-line;
  font-size: 4.2vh; line-height: 1.25; color: #fff; font-weight: 500;
  text-shadow: 0 0 .5vh #000, 0 .2vh .6vh #000, .2vh .2vh .3vh #000, -.2vh -.2vh .3vh #000;
  pointer-events: none;
}
#subs span { background: #000a; padding: .1vh 1.2vh; border-radius: .6vh; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
#subs:empty { display: none; }
body.overlay #subs { bottom: 24vh; }
body.idle #subs, body.loading #subs { display: none; }

/* --- Up next --- */
#upnext {
  right: 4vw; bottom: 8vh; width: 32vw; padding: 2vh 2vw; border-radius: 1.2vh;
  background: #0d1530ee; border: .2vh solid #5eb8ff66; box-shadow: 0 2vh 5vh #000a;
}
body.upnext #upnext { display: block; }
#upnext .label { font-size: 2.2vh; color: #5eb8ff; text-transform: uppercase; letter-spacing: .12em; }
#upnext-title { font-size: 3.2vh; margin-top: .8vh; }
#upnext-sub { font-size: 2.4vh; margin-top: .4vh; color: #9db0d3; }

/* --- Error --- */
body.error #error {
  display: block; left: 8vw; right: 8vw; top: 6vh; padding: 2.4vh 2.4vw; font-size: 3.2vh; text-align: center;
  background: #4a0f12f2; border: .25vh solid #ff6b6b88; border-radius: 1.2vh; color: #ffd6d6;
}