---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Дурак Онлайн</title>
  <!-- Официальный SDK Telegram WebApp -->
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background-color: #F5F5F7;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
      color: #1D1D1F;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    /* Верхняя панель Apple Glass */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .user-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 15px;
    }

    .avatar-mini {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #007AFF, #5856D6);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
    }

    .balance-pill {
      background: #FFFFFF;
      padding: 7px 15px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      font-weight: 700;
      font-size: 15px;
      color: #007AFF;
      border: 1px solid rgba(0,0,0,0.04);
    }

    /* Игровая зона */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
    }

    .player-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .status-badge {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      padding: 6px 16px;
      border-radius: 18px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      border: 1px solid rgba(0,0,0,0.04);
    }

    /* Матовое блюр-поле стола */
    .table-field {
      width: 100%;
      max-width: 380px;
      height: 220px;
      border-radius: 28px;
      background: radial-gradient(circle at center, #FFFFFF 0%, #ECECED 100%);
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.03), 0 12px 32px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.7);
      color: #86868B;
      font-size: 13px;
      position: relative;
    }

    /* Карты в руке */
    .hand-area {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
      overflow-x: auto;
      padding: 6px 0;
    }

    .card {
      width: 52px;
      height: 78px;
      background: #FFFFFF;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      border: 1px solid rgba(0, 0, 0, 0.04);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .card:active {
      transform: translateY(-10px) scale(1.04);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }

    .red { color: #FF3B30; }
    .black { color: #1D1D1F; }
  </style>
</head>
<body>

  <header>
    <div class="user-pill">
      <div class="avatar-mini" id="u-avatar">?</div>
      <span id="u-name">Загрузка...</span>
    </div>
    <div class="balance-pill" id="u-balance">100.00 ₽</div>
  </header>

  <main>
    <div class="player-zone">
      <div class="status-badge" id="opponent-status">Соперник: Поиск...</div>
    </div>

    <div class="table-field" id="table">
      <span>Ожидание начала партии</span>
    </div>

    <div class="player-zone">
      <div class="hand-area" id="hand">
        <div class="card red">A ♥</div>
        <div class="card black">K ♠</div>
        <div class="card red">10 ♦</div>
        <div class="card black">8 ♣</div>
      </div>
      <div class="status-badge">Ваш ход</div>
    </div>
  </main>

  <script>
    // Инициализация Telegram WebApp
    const tg = window.Telegram?.WebApp;
    if (tg) {
      tg.ready();
      tg.expand(); // Разворачиваем на весь экран
      
      const user = tg.initDataUnsafe?.user;
      if (user) {
        document.getElementById('u-name').textContent = user.first_name;
        document.getElementById('u-avatar').textContent = user.first_name[0] || 'И';
      } else {
        document.getElementById('u-name').textContent = 'Игрок';
        document.getElementById('u-avatar').textContent = 'И';
      }
    }
  </script>
</body>
</html>