<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>MTG Draft Night</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600;700&display=swap');

    body {
      font-family: 'Inter', sans-serif;
      background-color: #0f172a;
      color: #f8fafc;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
      border: 2px solid #3b82f6;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }

    .header {
      text-align: center;
      border-bottom: 2px solid #334155;
      padding-bottom: 16px;
      margin-bottom: 20px;
    }

    .logo-mtg {
      width: 220px;
      height: auto;
      filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
    }

    h1 {
      font-family: 'Cinzel', serif;
      color: #f59e0b;
      margin: 10px 0 4px 0;
      font-size: 24px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .subtitle {
      color: #94a3b8;
      font-size: 13px;
      margin: 0;
    }

    .section-title {
      font-family: 'Cinzel', serif;
      color: #60a5fa;
      background: rgba(30, 41, 59, 0.8);
      padding: 6px 12px;
      border-left: 4px solid #3b82f6;
      border-radius: 4px;
      font-size: 14px;
      margin-top: 20px;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 10px;
    }

    th {
      background: #334155;
      color: #cbd5e1;
      font-size: 11px;
      text-transform: uppercase;
      padding: 8px;
      text-align: left;
    }

    td {
      border-bottom: 1px solid #334155;
      padding: 8px;
      font-size: 12px;
      color: #f1f5f9;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .card-box {
      background: #1e293b;
      border: 1px solid #475569;
      border-radius: 8px;
      padding: 10px;
    }

    .card-title {
      font-size: 11px;
      font-weight: 700;
      color: #f59e0b;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .prizes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .prize-item {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 8px;
      text-align: center;
    }

    .prize-rank {
      font-size: 12px;
      font-weight: 600;
      color: #e2e8f0;
    }

    .prize-amount {
      font-size: 13px;
      font-weight: 700;
      color: #10b981;
      margin-top: 2px;
    }
  </style>
</head>
<body>

<div class="container">
  
  <!-- HEADER CON LOGO OFICIAL DE MTG -->
  <div class="header">
    <img class="logo-mtg" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Magicthegathering-logo.svg" alt="Magic The Gathering Logo">
    <h1>Draft Night Tournament</h1>
    <p class="subtitle">6 Jugadores • 18 Sobres • Formato Suizo Express (Bo1)</p>
  </div>

  <!-- JUGADORES -->
  <div class="section-title">👥 Jugadores Registrados</div>
  <table>
    <thead>
      <tr>
        <th style="width: 10%;">#</th>
        <th style="width: 45%;">Nombre del Jugador</th>
        <th style="width: 45%;">Mazo / Arquetipo</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><b>1</b></td><td></td><td></td></tr>
      <tr><td><b>2</b></td><td></td><td></td></tr>
      <tr><td><b>3</b></td><td></td><td></td></tr>
      <tr><td><b>4</b></td><td></td><td></td></tr>
      <tr><td><b>5</b></td><td></td><td></td></tr>
      <tr><td><b>6</b></td><td></td><td></td></tr>
    </tbody>
  </table>

  <!-- FASE REGULAR -->
  <div class="section-title">🛡️ Fase Regular (4 Rondas Bo1)</div>
  <table>
    <thead>
      <tr>
        <th style="width: 20%;">Ronda</th>
        <th style="width: 50%;">Enfrentamientos</th>
        <th style="width: 30%;">Ganadores</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><b>Ronda 1</b></td>
        <td>M1: ___ vs ___<br>M2: ___ vs ___<br>M3: ___ vs ___</td>
        <td>____<br>____<br>____</td>
      </tr>
      <tr>
        <td><b>Ronda 2</b></td>
        <td>M1: ___ vs ___<br>M2: ___ vs ___<br>M3: ___ vs ___</td>
        <td>____<br>____<br>____</td>
      </tr>
      <tr>
        <td><b>Ronda 3</b></td>
        <td>M1: ___ vs ___<br>M2: ___ vs ___<br>M3: ___ vs ___</td>
        <td>____<br>____<br>____</td>
      </tr>
      <tr>
        <td><b>Ronda 4</b></td>
        <td>M1: ___ vs ___<br>M2: ___ vs ___<br>M3: ___ vs ___</td>
        <td>____<br>____<br>____</td>
      </tr>
    </tbody>
  </table>

  <!-- PLAYOFFS -->
  <div class="section-title">🏆 Fase Final (Playoffs)</div>
  <div class="grid-2">
    <div class="card-box">
      <div class="card-title">Semifinal 1</div>
      <div style="font-size: 12px;">1.º ____ vs 4.º ____</div>
      <div style="margin-top: 6px; font-size: 12px;"><b>Ganador:</b> ________</div>
    </div>
    <div class="card-box">
      <div class="card-title">Semifinal 2</div>
      <div style="font-size: 12px;">2.º ____ vs 3.º ____</div>
      <div style="margin-top: 6px; font-size: 12px;"><b>Ganador:</b> ________</div>
    </div>
  </div>

  <div class="grid-2" style="margin-top: 10px;">
    <div class="card-box" style="border-color: #f59e0b;">
      <div class="card-title" style="color: #f59e0b;">Duelo 5.º Puesto</div>
      <div style="font-size: 12px;">5.º ____ vs 6.º ____</div>
      <div style="margin-top: 6px; font-size: 12px;"><b>Ganador:</b> ________</div>
    </div>
    <div class="card-box" style="border-color: #10b981; background: rgba(16, 185, 129, 0.1);">
      <div class="card-title" style="color: #10b981;">Gran Final</div>
      <div style="font-size: 12px;">Ganador SF1 vs Ganador SF2</div>
      <div style="margin-top: 6px; font-size: 12px; color: #10b981;"><b>🏆 CAMPEÓN:</b> ________</div>
    </div>
  </div>

  <!-- PREMIOS -->
  <div class="section-title">🎁 Reparto de Sobres (12 Sobres)</div>
  <div class="prizes-grid">
    <div class="prize-item"><div class="prize-rank">🥇 1.er Lugar</div><div class="prize-amount">5 Sobres</div></div>
    <div class="prize-item"><div class="prize-rank">🥈 2.º Lugar</div><div class="prize-amount">3 Sobres</div></div>
    <div class="prize-item"><div class="prize-rank">🥉 3.er Lugar</div><div class="prize-amount">2 Sobres</div></div>
    <div class="prize-item"><div class="prize-rank">🏅 4.º Lugar</div><div class="prize-amount">1 Sobre</div></div>
    <div class="prize-item"><div class="prize-rank">🎖️ 5.º Lugar</div><div class="prize-amount">1 Sobre</div></div>
    <div class="prize-item"><div class="prize-rank">🎲 6.º Lugar</div><div class="prize-amount" style="color: #94a3b8; font-size: 11px;">3 Abiertos</div></div>
  </div>

</div>

</body>
</html>
