.home-wrap{max-width:1080px}

.platform-hero{text-align:center;margin-bottom:34px}
.hero-badge{display:inline-block;padding:8px 18px;border-radius:999px;background:rgba(255,196,46,.15);border:1px solid rgba(255,196,46,.4);color:var(--gold);font-weight:900;margin-bottom:18px}
.platform-hero h1{font-size:56px;letter-spacing:7px;color:var(--gold);margin:0 0 12px;font-weight:900}
.platform-hero p{font-size:22px;color:#e5e7eb;margin:8px 0}

.how{display:grid;gap:9px;margin:18px auto 4px;max-width:820px;text-align:left;color:#d7dde8}
.how div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:12px}

.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:stretch}

.platform-card{padding:0!important;overflow:hidden;transition:.25s;cursor:pointer;display:flex!important;flex-direction:column;min-height:410px}
.platform-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 25px 45px rgba(0,0,0,.35)}

.game-banner{position:relative;width:100%;height:170px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;flex:0 0 auto}
.game-banner strong{font-size:30px;font-weight:900;line-height:1;color:#fff;position:relative;z-index:2}
.game-banner small{color:#f1f5f9;font-size:14px;margin-top:6px;position:relative;z-index:2}

.banner-label{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;letter-spacing:1px;z-index:2}
.banner-glow{position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(30px)}

.game-content{padding:18px;flex:1;display:flex;flex-direction:column}
.game-content h2{font-size:24px;line-height:1.1;margin:10px 0}
.game-content .hint{flex:1;margin-bottom:16px}
.game-content .btn,.game-content .fake-btn{margin-top:auto;width:100%;margin-left:0;margin-right:0}

.game-status{display:inline-block;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:1px;width:max-content}
.game-status.active{background:#16a34a;color:#fff}
.game-status.soon{background:#374151;color:#d1d5db}

.banner-megdan{background:linear-gradient(135deg,#ffb300,#ff6b00)}
.banner-speed{background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed)}
.banner-lavirint{background:radial-gradient(circle at 20% 20%,rgba(34,211,238,.35),transparent 34%),linear-gradient(135deg,#111827,#064e3b 55%,#0f172a)}
.banner-support{background:radial-gradient(circle at 20% 15%,rgba(251,113,133,.42),transparent 35%),linear-gradient(135deg,#2a1020,#7c2d12 55%,#111827)}
.banner-geografija{background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 28%),linear-gradient(135deg,#0ea5e9,#2563eb)}
.banner-target{background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 28%),linear-gradient(135deg,#dc2626,#ef4444,#f59e0b)}

.mode-panel{margin-top:22px}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mode-btn{border:1px solid var(--line);background:#111827;color:#fff;border-radius:18px;padding:16px;text-align:left;cursor:pointer;font-weight:800;font-size:28px}
.mode-btn span{display:block;color:var(--gold);font-size:19px;margin:8px 0}
.mode-btn small{display:block;color:var(--muted);font-size:14px;line-height:1.35}
.join-inline{margin-top:16px;background:rgba(0,0,0,.16);border-radius:18px;padding:16px}

.unified-grid{align-items:stretch}
.support-card{text-decoration:none;color:inherit;border-color:rgba(251,191,36,.28)}
.fake-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* AAA overlay */
.home-start-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,196,46,.16),transparent 30%),
    radial-gradient(circle at 20% 20%,rgba(34,211,238,.10),transparent 28%),
    radial-gradient(circle at 80% 80%,rgba(255,80,80,.12),transparent 30%),
    rgba(5,9,18,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:overlayFadeIn .35s ease both;
}

.home-start-overlay.hide{
  pointer-events:none;
  animation:overlayFadeOut .45s ease both;
}

.home-start-box{
  width:min(660px,94vw);
  min-height:390px;
  position:relative;
  overflow:hidden;
  text-align:center;
  border-radius:34px;
  padding:42px 34px 36px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg,rgba(30,41,59,.96),rgba(11,18,32,.98)),
    radial-gradient(circle at top,rgba(255,196,46,.22),transparent 42%);
  box-shadow:
    0 40px 110px rgba(0,0,0,.68),
    0 0 70px rgba(255,196,46,.18),
    inset 0 1px 0 rgba(255,255,255,.14);
  animation:overlayPop .42s cubic-bezier(.2,1.25,.25,1) both;
}

.home-start-box:before{
  content:"";
  position:absolute;
  inset:-90px;
  background:
    conic-gradient(from 0deg,transparent,rgba(255,196,46,.18),transparent,rgba(34,211,238,.12),transparent);
  animation:overlaySpin 9s linear infinite;
}

.home-start-box:after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:32px;
  background:linear-gradient(180deg,rgba(15,23,42,.25),rgba(15,23,42,.72));
  pointer-events:none;
}

.home-start-badge,
.home-start-title,
.home-start-subtitle,
.home-start-btn,
.home-start-note{
  position:relative;
  z-index:2;
}

.home-start-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 15px;
  border-radius:999px;
  color:#ffdb69;
  background:rgba(255,196,46,.12);
  border:1px solid rgba(255,196,46,.38);
  font-size:13px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 0 28px rgba(255,196,46,.16);
}

.home-start-title{
  margin:24px 0 12px;
  font-size:58px;
  line-height:.95;
  font-weight:1000;
  letter-spacing:4px;
  color:#ffc42e;
  text-shadow:
    0 0 12px rgba(255,196,46,.35),
    0 8px 24px rgba(0,0,0,.55);
  animation:titlePulse 2.2s ease-in-out infinite;
}

.home-start-subtitle{
  max-width:500px;
  margin:0 auto 28px;
  color:#d8e2f2;
  font-size:18px;
  line-height:1.45;
}

.home-start-btn{
  border:0;
  cursor:pointer;
  min-width:320px;
  border-radius:20px;
  padding:18px 30px;
  color:#101827;
  font-size:19px;
  font-weight:1000;
  background:linear-gradient(135deg,#fff08a,#ffc42e,#ff9f1c);
  box-shadow:
    0 16px 44px rgba(255,159,28,.42),
    0 0 34px rgba(255,196,46,.25),
    inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform .16s ease,box-shadow .16s ease;
}

.home-start-btn:hover{
  transform:translateY(-3px) scale(1.025);
  box-shadow:
    0 22px 58px rgba(255,159,28,.52),
    0 0 48px rgba(255,196,46,.32),
    inset 0 2px 0 rgba(255,255,255,.62);
}

.home-start-btn:active{
  transform:translateY(1px) scale(.99);
}

.home-start-note{
  margin-top:16px;
  color:#91a0b8;
  font-size:13px;
}

@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}
@keyframes overlayFadeOut{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes overlayPop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes overlaySpin{to{transform:rotate(360deg)}}
@keyframes titlePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}

@media(max-width:700px){
  .platform-hero h1{font-size:38px;letter-spacing:4px}
  .platform-hero p{font-size:18px}
  .game-grid{grid-template-columns:1fr}
  .platform-card{min-height:0}
  .game-banner{height:145px}
  .game-banner strong{font-size:24px}
  .mode-grid{grid-template-columns:1fr}
  .home-start-box{padding:32px 20px;min-height:360px;border-radius:28px}
  .home-start-title{font-size:38px;letter-spacing:2px}
  .home-start-subtitle{font-size:16px}
  .home-start-btn{min-width:0;width:100%;font-size:16px;padding:16px 18px}
}