/* ====== База ====== */
:root{
  --bg0:#070A12;
  --bg1:#0B1223;
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.55);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.14);
  --stroke2:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.40);
  --shadow2: 0 12px 30px rgba(0,0,0,.30);
  --radius: 22px;
  --radius2: 16px;
  --blur: 16px;
  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% 10%, #132B8A55, transparent 55%),
              radial-gradient(900px 600px at 80% 30%, #7C3AED44, transparent 55%),
              radial-gradient(900px 700px at 60% 90%, #22C55E33, transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  overflow:hidden; /* scroll внутри main */
}

.bg{
  position:fixed;
  inset:-40px;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(700px 380px at 80% 40%, rgba(236,72,153,.11), transparent 60%),
    radial-gradient(900px 520px at 50% 90%, rgba(34,197,94,.10), transparent 60%);
  filter: blur(0px);
  pointer-events:none;
  opacity:1;
}

/* ====== Верхняя панель ====== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  gap:16px;
  border-bottom:1px solid var(--stroke2);
  background: rgba(8,10,16,.55);
  backdrop-filter: blur(var(--blur));
}

.brand{
  display:flex; align-items:center; gap:10px;
  user-select:none;
}
.brand-mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(124,58,237,.75), rgba(34,197,94,.60));
  box-shadow: var(--shadow2);
  font-weight:900;
}
.brand-name{
  font-weight:800;
  letter-spacing:.2px;
}

.nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav-btn{
  appearance:none;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
  display:flex; align-items:center; gap:8px;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.nav-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); border-color:var(--stroke); }
.nav-btn:active{ transform: translateY(0px) scale(.98); }
.dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(234,240,255,.35);
  box-shadow: 0 0 0 4px rgba(234,240,255,.08);
}
.nav-btn.is-active .dot{
  background: linear-gradient(135deg, #7C3AED, #22C55E);
  box-shadow: 0 0 0 4px rgba(124,58,237,.22);
}

/* ====== Секции (snap scroll) ====== */
.snap{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type: y mandatory;
  scroll-behavior:smooth;
}
.panel{
  min-height:100vh;
  scroll-snap-align:start;
  padding:92px 18px 28px;
  display:flex;
  justify-content:center;
}
.panel-inner{
  width:min(var(--maxw), 100%);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.hero{
  padding:28px 18px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
}
.kicker{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted2);
}
h1,h2{
  margin:0;
  line-height:1.06;
  letter-spacing:-.02em;
}
h1{ font-size: clamp(30px, 3.7vw, 46px); }
h2{ font-size: clamp(28px, 3.2vw, 40px); }
.subtitle{
  margin:12px 0 0;
  max-width: 68ch;
  color: var(--muted);
  line-height:1.55;
}

.hint{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.hint-chip{
  font-size:12px;
  color: rgba(234,240,255,.85);
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke2);
  padding:8px 10px;
  border-radius:999px;
}
.hint-line{
  height:1px; flex:1;
  background: linear-gradient(90deg, rgba(255,255,255,.15), transparent);
}

/* ====== Карточки ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.card{
  grid-column: span 6;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px 18px;
  border-radius: 22px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  text-decoration:none;
  color:var(--text);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
  aspect-ratio: 1 / 1;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(600px 140px at 20% 30%, rgba(124,58,237,.22), transparent 55%),
              radial-gradient(400px 140px at 70% 70%, rgba(34,197,94,.16), transparent 60%);
  opacity:.0;
  transition: opacity .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: var(--stroke);
  box-shadow: var(--shadow);
}
.card:hover::before{ opacity:1; }
.card:active{ transform: translateY(0px) scale(.99); }

.logo{
  width:clamp(160px, 26vw, 320px); height:clamp(160px, 26vw, 320px);
  max-width: 100%;
  max-height: 100%;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
  flex:none;
  overflow:hidden;
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }

.card-body{ position:relative; z-index:1; }
.card-title{
  font-weight:900;
  letter-spacing:-.01em;
  margin:0;
  font-size:19px;
  line-height:1.15;
}
.card-meta{
  margin:8px 0 0;
  font-size:14px;
  color:var(--muted2);
  line-height:1.4;
}

.badge{
  margin-top:12px;
  position:relative;
  z-index:1;
  font-size:14px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.80);
}

/* ====== Контролы ====== */
.controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.search{
  flex: 1 1 240px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}
.search::placeholder{ color: rgba(234,240,255,.45); }
.select{
  flex: 1 1 210px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}

.ghost{
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.90);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color:var(--stroke); }
.ghost:active{ transform: translateY(0px) scale(.99); }

/* ====== Игроки ====== */
.players{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  overflow:hidden;
}
.players-head, .players-foot{
  display:flex; justify-content:space-between; gap:10px;
  padding:14px 16px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--muted2);
  border-bottom:1px solid var(--stroke2);
}
.players-foot{
  border-top:1px solid var(--stroke2);
  border-bottom:none;
  letter-spacing:.06em;
}
.players-list{ display:flex; flex-direction:column; }
.player-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  align-items:center;
}
.player-row:hover{ background: rgba(255,255,255,.04); }
.player-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.avatar{
  width:34px; height:34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  display:grid; place-items:center;
  font-weight:800;
  color: rgba(234,240,255,.92);
  flex:none;
}
.player-name{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-note{
  font-size:12px;
  color: var(--muted2);
  margin-top:2px;
}
.player-amount{
  font-variant-numeric: tabular-nums;
  font-weight:800;
  letter-spacing:.01em;
}
.right{ text-align:right; }

/* ====== Подвал ====== */
.panel-footer{
  margin-top:auto;
  display:flex;
  justify-content:center;
  padding-bottom:4px;
}
.note{
  color: rgba(234,240,255,.55);
  font-size:12.5px;
}

/* ====== Toast ====== */
.toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform: translateX(-50%);
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(10,12,18,.65);
  color: rgba(234,240,255,.92);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow2);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:60;
}
.toast.is-show{
  opacity:1;
  transform: translateX(-50%) translateY(-2px);
}

/* ====== Адаптив ====== */
@media (max-width: 920px){
  .card{ grid-column: span 12; }
}
@media (max-width: 560px){
  body{ overflow:hidden; }
  .nav{ gap:8px; }
  .nav-btn{ padding:9px 10px; font-size:14px; }
  .card{ grid-column: span 12; }
  .logo{ width:48px; height:48px; }
}


/* ====== Магический эльфийский лес (размытие) ====== */
.forest{
  position:fixed;
  inset:-20px;
  z-index:-2;
  background-image: url("assets/elven_forest.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: blur(9px) saturate(1.10) contrast(1.03);
  opacity: 0.95;
  pointer-events:none;
}
/* Слегка затемняем, чтобы контент читался */
.forest::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 30% 25%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 520px at 75% 30%, rgba(14,165,233,.14), transparent 62%),
    radial-gradient(900px 520px at 55% 80%, rgba(34,197,94,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70));
}

/* ====== Светлячки поверх фона ====== */
.fireflies{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.fly{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(234,240,255,.95) 0%, rgba(34,197,94,.55) 35%, rgba(124,58,237,0) 70%);
  filter: blur(.2px);
  opacity:.0;
  animation:
    drift var(--dur, 12s) linear infinite,
    flicker var(--flick, 3.2s) ease-in-out infinite;
  box-shadow:
    0 0 16px rgba(34,197,94,.35),
    0 0 34px rgba(124,58,237,.18);
}

@keyframes flicker{
  0%,100%{ opacity: .05; transform: scale(.7); }
  35%{ opacity: .55; transform: scale(1.0); }
  55%{ opacity: .20; transform: scale(.85); }
  78%{ opacity: .70; transform: scale(1.08); }
}

@keyframes drift{
  0%{ transform: translate3d(var(--x0), var(--y0), 0) scale(.85); }
  100%{ transform: translate3d(var(--x1), var(--y1), 0) scale(1.05); }
}


/* ====== Оферта + QR (первый экран) ====== */
.offer-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.qr-card{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  padding:18px;
  overflow:hidden;
}

.qr-wrap{
  width:min(520px, 100%);
  margin: 0 auto;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.qr-wrap img{
  width:100%;
  height:auto;
  display:block;
}

.qr-caption{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
}
.qr-title{
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 18px;
}
.qr-meta{
  color: var(--muted2);
  line-height:1.45;
  font-size: 14px;
}

/* Длинная плашка для оферты */
.offer-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  text-decoration:none;
  color: var(--text);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.offer-banner:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: var(--stroke);
  box-shadow: var(--shadow);
}
.offer-banner:active{ transform: translateY(0px) scale(.99); }

.offer-banner-ico{
  width:44px;
  height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: radial-gradient(220px 140px at 30% 25%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(220px 140px at 70% 70%, rgba(34,197,94,.18), transparent 60%),
              rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  flex:none;
  font-size: 22px;
}

.offer-banner-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.offer-banner-title{
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.offer-banner-sub{
  color: var(--muted2);
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.offer-banner-cta{
  margin-left:auto;
  flex:none;
  font-size:13px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.85);
}

@media (max-width: 560px){
  .offer-banner{ border-radius: 22px; }
  .offer-banner-sub{ white-space:normal; }
}