/* Drama Player — vertical, app-like */
#drama-app{--accent:#ff2d6f;--accent2:#7a5cff;--muted:#9a9ab0;--line:#26263a;
  max-width:430px;margin:0 auto;background:#0a0a0f;color:#f2f2f7;border-radius:18px;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#drama-stage{position:relative;width:100%;aspect-ratio:9/16;background:#000;overflow:hidden}
/* Overscan crop: zooms the YouTube iframe so its title (top) and logo/"Watch on
   YouTube" (bottom-right) are pushed outside the visible stage. Tune scale if the
   logo still peeks (bigger = crops more). Keeps 9:16 aspect, no new letterboxing. */
#drama-ytwrap{position:absolute;inset:0;transform:scale(1.18);transform-origin:center center}
#drama-player-el{width:100%;height:100%}
/* Full-width footer bar: masks the YouTube logo edge-to-edge AND holds the transport
   controls (prev / play-pause / next). Sits above the guard; hidden behind the start
   and paywall overlays (z-30) so it only shows during playback. */
#drama-controls{position:absolute;left:0;right:0;bottom:0;height:44px;z-index:14;
  display:flex;align-items:center;justify-content:center;gap:38px;padding:0 12px;
  background:linear-gradient(to top,#06060c 55%,rgba(6,6,12,.65))}
#drama-controls button.ctl{width:auto;max-width:none;margin:0;padding:5px;line-height:0;
  background:none;border:0;border-radius:9px;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:color .15s,transform .1s}
#drama-controls button.ctl svg{width:23px;height:23px;fill:currentColor;display:block}
#drama-playpause svg{width:28px;height:28px}
#drama-controls button.ctl:hover{color:var(--accent)}
#drama-controls button.ctl:active{transform:scale(.9)}
#drama-playpause .i-pause{display:none}
#drama-playpause.playing .i-play{display:none}
#drama-playpause.playing .i-pause{display:inline-flex}
#drama-guard{position:absolute;inset:0;z-index:10;background:transparent}
#drama-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  z-index:11;opacity:0;transition:opacity .2s;font-size:56px;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
#drama-hint.show{opacity:.9}
#drama-bar{position:absolute;left:0;right:0;bottom:44px;height:4px;background:rgba(255,255,255,.15);z-index:15}
#drama-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
#drama-badge{position:absolute;top:12px;left:12px;z-index:13;background:rgba(0,0,0,.55);padding:5px 10px;
  border-radius:18px;font-size:12px;font-weight:700;backdrop-filter:blur(6px)}
#drama-brand{position:absolute;top:12px;right:12px;z-index:13;font-size:11px;color:var(--muted)}
#drama-start,#drama-gate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:26px;
  background:radial-gradient(120% 90% at 50% 20%,#1c1030,#08080d)}
#drama-gate{display:none;background:rgba(6,6,12,.94);backdrop-filter:blur(8px)}
#drama-gate.show{display:flex}
#drama-start h1,#drama-gate h2{margin:0 0 6px;font-size:20px}
#drama-start p,#drama-gate .sub{color:var(--muted);font-size:13.5px;margin:0 0 22px;max-width:300px}
#drama-gate .lk{font-size:42px;margin-bottom:6px}
#drama-adbox{width:100%;max-width:300px;aspect-ratio:1.15/1;border-radius:14px;border:1px dashed var(--line);
  background:repeating-linear-gradient(45deg,#111119,#111119 12px,#15151f 12px,#15151f 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}
#drama-adbox .tag{font-size:11px;letter-spacing:2px;color:var(--muted)}
#drama-adcount{font-size:38px;font-weight:800}
#drama-app button{border:0;border-radius:40px;font-weight:700;font-size:15px;padding:14px 26px;cursor:pointer;
  width:100%;max-width:300px;margin-top:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
#drama-app button:disabled{opacity:.45;cursor:default}
#drama-app button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}