@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800;900&family=Manrope:wght@400;500;600&display=swap');

:root {
  --bg: #0d0f14;
  --surface: #161921;
  --surface2: #1e2330;
  --border: #2a3048;
  --accent: #e8c84a;
  --accent2: #ff6b35;
  --text: #e8eaf0;
  --muted: #6b7394;
  --green: #4ade80;
  --red: #f87171;
  --barrel: #f59e0b;
  --win: #a78bfa;

  /* Safe areas: дефолт через iOS env(), в Telegram WebApp перезаписываются
     значениями из tg.safeAreaInset / tg.contentSafeAreaInset (см. shared/tg.js). */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;

  /* Только нижний/боковые отступы — верхний отдаём header'у, чтобы он сам
     ехал под статус-бар, а не прятался за ним. */
  padding-bottom: var(--safe-bottom);
  padding-left:   var(--safe-left);
  padding-right:  var(--safe-right);
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(232,200,74,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255,107,53,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

header.app-header {
  padding: calc(var(--safe-top) + 14px) 0 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,15,20,0.95);
  backdrop-filter: blur(12px);
}
.app-header .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.app-header .logo { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 900; }
.app-header .logo span { color: var(--accent); }
.app-header .header-actions { display: flex; gap: 10px; align-items: center; }

/* Telegram fullscreen: убираем blur в шапке (на разных Android рендере туго) */
body.tg-fullscreen header.app-header {
  backdrop-filter: none;
  background: var(--bg);
}

@keyframes slideIn { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes toastIn { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }