:root{
  --fg:#fff;
  --muted:rgba(255,255,255,.85);
  --overlay:rgba(0,0,0,.42);
  --overlay-strong:rgba(0,0,0,.55);
  --platforms-h:64px;
  --header-h:64px; /* фактическая высота шапки; подгони при необходимости */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  background:#0b0a10;color:var(--fg)
}

/* ====== БАЗОВАЯ СЦЕНА ====== */
.hero{
  position:relative;min-height:100vh;width:100%;
  display:grid;grid-template-rows:1fr auto;overflow:hidden;isolation:isolate
}
.bg{
  position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 120% at 50% 50%,#1a1626 0%,#0b0a10 70%);
  background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.02);
  transition:filter .3s ease, transform .5s ease
}
.vignette::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(75% 75% at 50% 50%,transparent 0%,transparent 55%,var(--overlay) 100%),
    linear-gradient(to top,var(--overlay-strong),transparent 40%)
}

/* ====== ШАПКА: лого слева, меню справа ====== */
.site-header{
  position:fixed;top:20px;left:24px;right:24px;
  display:flex;justify-content:space-between;align-items:center;
  z-index:1000;pointer-events:none;padding:0 20px
}
.site-header>*{pointer-events:auto}

.logo-left{
  padding:10px 18px;background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.3)
}
.badge{font-weight:700;letter-spacing:.5px;font-size:14px}

.main-nav-right{
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;padding:10px 24px;box-shadow:0 4px 12px rgba(0,0,0,.3)
}
.main-nav-right .menu-list{
  display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500
}
.main-nav-right .menu-list li{list-style:none}
.main-nav-right .menu-list a{
  color:#fff !important;text-decoration:none;position:relative;transition:color .25s ease
}
.main-nav-right .menu-list a:hover{color:#e10600 !important}
.main-nav-right .menu-list a::after{
  content:"";position:absolute;bottom:-6px;left:50%;
  width:0;height:2px;background:#e10600;transition:width .3s ease;transform:translateX(-50%)
}
.main-nav-right .menu-list a:hover::after{width:100%}

/* ====== СЛОГАН ====== */
.caption{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  padding:22px 26px 26px;background:rgba(0,0,0,.78);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-top-right-radius:14px;max-width:min(100%,980px);line-height:1.35;
  position:relative;z-index:6;box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.caption strong{font-size:clamp(18px,3vw,24px)}
.caption .en{color:var(--muted);font-size:clamp(15px,2.4vw,18px)}
.bottom-left{
  position:fixed;left:18px;right:18px;
  bottom:calc(28px + var(--platforms-h));display:flex;justify-content:flex-start
}

/* ====== ПАНЕЛЬ ТРЕКОВ (вверху слева, по контенту) ====== */
.upcoming{
  position:fixed;
  top:calc(var(--header-h) + 16px);
  left:18px; right:auto; bottom:auto;
  z-index:900;
  display:inline-block; width:auto; max-width:420px;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:16px 18px;border-radius:14px;line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.35)
}
.upcoming h3{margin:0 0 8px;font-size:clamp(14px,2.4vw,16px);font-weight:700;letter-spacing:.4px}
.upcoming ul{margin:0;padding-left:18px;list-style:none}
.upcoming li{margin:4px 0;color:var(--muted)}
#upcomingList,#releasedList{list-style:none;margin:0;padding:0}

/* Кнопка Play/Pause */
.play-btn{
  width:28px;height:28px;display:inline-grid;place-items:center;
  border-radius:50%;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.25);cursor:pointer;margin-right:8px
}
.play-btn .icon{
  width:0;height:0;border-style:solid;
  border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:2px
}
.play-btn.is-playing .icon{
  width:12px;height:14px;margin:0;border:0;
  background:linear-gradient(90deg,#fff 0 40%,transparent 40% 60%,#fff 60% 100%)
}

/* ====== ПОДПИСЬ АВТОРСТВА ====== */
.credit{
  position:fixed;right:14px;
  bottom:calc(8px + var(--platforms-h) + env(safe-area-inset-bottom));
  z-index:6;font-size:12px;opacity:.8;text-shadow:0 1px 2px rgba(0,0,0,.6)
}

/* ====== ПАНЕЛЬ ПЛАТФОРМ ====== */
.platforms{
  position:fixed;left:0;right:0;bottom:0;z-index:2;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:10px 14px;border-radius:0;background:rgba(0,0,0,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:.9;min-height:var(--platforms-h);
  padding-bottom:calc(10px + env(safe-area-inset-bottom))
}
.platforms .logo{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:72px;height:28px;padding:0 10px;border-radius:8px;
  border:1px dashed rgba(255,255,255,.25);color:rgba(255,255,255,.75);
  font-size:12px;letter-spacing:.2px;text-transform:uppercase;user-select:none
}

/* ====== МОБИЛЬНЫЙ АДАПТИВ ====== */
@media (max-width:768px){
  .site-header{top:16px;left:16px;right:16px;padding:0 12px}
  .logo-left,.main-nav-right{padding:8px 16px}
  .main-nav-right .menu-list{gap:20px;font-size:14px}

  .upcoming{
    top:calc(var(--header-h) + 12px);
    left:12px; right:auto; width:auto;
    max-width:calc(100vw - 24px)
  }

  .bottom-left{left:12px;right:12px;bottom:calc(20px + var(--platforms-h))}
  .caption{padding:16px 18px;border-top-right-radius:10px;max-width:94vw}
}

@media (max-width:380px){
  .credit .aka{display:none}
}