cp 'Till.the.End.of.the.Moon.S01E25.VIKI.x264.1080p[MkvDrama.Org].mp4' /var/www/files/ && \
cd /var/www/files && \
ffmpeg -i 'Till.the.End.of.the.Moon.S01E25.VIKI.x264.1080p[MkvDrama.Org].mp4' \
  -map 0:s:12 legenda_pt_e25.srt && \
ffmpeg -i legenda_pt_e25.srt legenda_pt_e25.vtt && \
cat > player_e25.html << 'EOF'
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Till the End of the Moon — EP 25</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400&family=Cinzel:wght@400;600&display=swap');
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { --ink: #070508; --paper: #f5f0e8; --gold: #c8a96e; --muted: #6b5b4e; }
  body { background: var(--ink); color: var(--paper); font-family: 'Cinzel', serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 70% 50% at 15% 85%, #1a0808 0%, transparent 55%), radial-gradient(ellipse 50% 70% at 85% 15%, #090412 0%, transparent 50%), #070508; z-index: 0; pointer-events: none; }
  body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 180px; opacity: 0.3; z-index: 0; pointer-events: none; }
  .wrapper { position: relative; z-index: 1; width: 100%; max-width: 1120px; padding: 2rem 1.5rem 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
  header { text-align: center; animation: fadeDown 0.8s ease both; }
  .ep-label { font-size: 0.65rem; letter-spacing: 0.4em; color: var(--gold); opacity: 0.7; margin-bottom: 0.45rem; text-transform: uppercase; }
  h1 { font-family: 'Cinzel', serif; font-size: clamp(1rem, 2.8vw, 1.75rem); font-weight: 400; letter-spacing: 0.14em; color: var(--paper); line-height: 1.4; }
  h1 span { color: var(--gold); }
  .divider { width: 100px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 0.55rem auto 0; opacity: 0.45; }
  .video-wrap { position: relative; width: 100%; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(200,169,110,0.12), 0 25px 70px rgba(0,0,0,0.85); animation: fadeUp 0.9s 0.15s ease both; }
  video { display: block; width: 100%; max-height: 82vh; background: #000; }
  video::cue { font-family: 'Noto Serif SC', Georgia, serif; font-size: 1.05em; color: #fff; background: rgba(0,0,0,0.6); text-shadow: 0 1px 5px rgba(0,0,0,0.95); }
  .orn { position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none; opacity: 0.45; }
  .orn svg { fill: none; stroke: var(--gold); stroke-width: 1.4; }
  .orn.tl { top: 9px; left: 9px; } .orn.tr { top: 9px; right: 9px; transform: scaleX(-1); }
  .orn.bl { bottom: 9px; left: 9px; transform: scaleY(-1); } .orn.br { bottom: 9px; right: 9px; transform: scale(-1,-1); }
  .status { font-size: 0.62rem; letter-spacing: 0.18em; color: var(--muted); min-height: 1em; animation: fadeUp 0.9s 0.3s ease both; }
  .status.ok { color: var(--gold); }
  @keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
</style>
</head>
<body>
<div class="wrapper">
  <header>
    <p class="ep-label">Episódio 25</p>
    <h1>Till the End of <span>the Moon</span></h1>
    <div class="divider"></div>
  </header>
  <div class="video-wrap">
    <div class="orn tl"><svg viewBox="0 0 26 26"><polyline points="0,18 0,0 18,0"/></svg></div>
    <div class="orn tr"><svg viewBox="0 0 26 26"><polyline points="0,18 0,0 18,0"/></svg></div>
    <div class="orn bl"><svg viewBox="0 0 26 26"><polyline points="0,18 0,0 18,0"/></svg></div>
    <div class="orn br"><svg viewBox="0 0 26 26"><polyline points="0,18 0,0 18,0"/></svg></div>
    <video id="vid" controls preload="metadata">
      <source src="Till.the.End.of.the.Moon.S01E25.VIKI.x264.1080p[MkvDrama.Org].mp4" type="video/mp4">
      <track kind="subtitles" src="legenda_pt_e25.vtt" srclang="pt" label="Português" default>
    </video>
  </div>
  <p class="status" id="status"></p>
</div>
<script>
  const vid = document.getElementById('vid');
  const status = document.getElementById('status');
  const KEY = 'tteom_e25';
  vid.addEventListener('loadedmetadata', () => {
    for (let t of vid.textTracks) t.mode = 'showing';
    const saved = parseFloat(localStorage.getItem(KEY) || 0);
    if (saved > 5 && saved < vid.duration - 5) {
      vid.currentTime = saved;
      status.textContent = '▶ Retomando de ' + fmt(saved);
      status.className = 'status ok';
    }
  });
  vid.addEventListener('timeupdate', () => localStorage.setItem(KEY, vid.currentTime));
  function fmt(s) {
    const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), ss = Math.floor(s%60).toString().padStart(2,'0');
    return h ? `${h}:${String(m).padStart(2,'0')}:${ss}` : `${m}:${ss}`;
  }
</script>
</body>
</html>
EOF
