/* ═══════════════════════════════════════════════════════════
   NARDEXX — Меню, Магазин и iframe-обёртка для игры
   ═══════════════════════════════════════════════════════════ */

html, body {
  overflow: hidden;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
}

/* === Меню === */
.menu-app {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200, 120, 60, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(80, 40, 20, 0.5), transparent 70%),
    linear-gradient(180deg, #1a0f08 0%, #0a0503 100%);
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.menu-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 15%, rgba(240, 209, 140, 0.6), transparent),
    radial-gradient(1px 1px at 75% 30%, rgba(240, 209, 140, 0.4), transparent),
    radial-gradient(1px 1px at 45% 70%, rgba(240, 209, 140, 0.5), transparent),
    radial-gradient(1px 1px at 85% 85%, rgba(240, 209, 140, 0.35), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(240, 209, 140, 0.3), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(240, 209, 140, 0.4), transparent);
  pointer-events: none;
  opacity: 0.9;
  animation: starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.menu-body {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}

.menu-card {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  background:
    radial-gradient(ellipse at top, rgba(90, 45, 20, 0.65), transparent 70%),
    linear-gradient(180deg, rgba(40, 20, 10, 0.92), rgba(15, 8, 4, 0.96));
  border: 1px solid var(--c-gold-line);
  border-radius: 26px;
  padding: 36px 32px 30px;
  box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255, 220, 150, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  animation: menuCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
@keyframes menuCardIn {
  0% { opacity: 0; transform: scale(0.9) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.menu-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(240, 209, 140, 0.7), transparent 35%, transparent 65%, rgba(240, 209, 140, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.menu-logo { text-align: center; margin-bottom: 14px; }
.menu-logo-icon {
  font-size: 60px;
  display: inline-block;
  filter: drop-shadow(0 0 24px rgba(240, 209, 140, 0.8));
  animation: menuIconFloat 3s ease-in-out infinite;
  line-height: 1;
}
@keyframes menuIconFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}
.menu-logo-title {
  font-family: var(--f-title);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 6px;
  background: linear-gradient(180deg, #fff5d0 0%, var(--c-gold) 45%, #a07030 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(240, 209, 140, 0.4);
  line-height: 1;
  margin-top: 4px;
}
.menu-logo-sub {
  font-family: var(--f-title);
  font-size: 11px;
  letter-spacing: 7px;
  color: var(--c-gold);
  opacity: 0.75;
  margin-top: 12px;
  text-transform: uppercase;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gold-soft);
  background: linear-gradient(180deg, rgba(70, 35, 15, 0.92), rgba(30, 15, 8, 0.96));
  color: var(--c-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 220, 150, 0.1);
}
.menu-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(240, 209, 140, 0.15), transparent);
  transition: left 0.7s;
  pointer-events: none;
}
.menu-btn:hover::before { left: 100%; }
.menu-btn:hover {
  border-color: var(--c-gold);
  box-shadow: var(--sh), var(--glow);
  transform: translateY(-2px);
}
.menu-btn:active { transform: translateY(0) scale(0.99); }
.menu-btn .mb-ico {
  font-size: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(240, 209, 140, 0.6));
  line-height: 1;
}
.menu-btn .mb-text { flex: 1; min-width: 0; }
.menu-btn .mb-title { display: block; font-size: 15px; color: var(--c-gold-bright); }
.menu-btn .mb-sub { display: block; font-size: 11px; color: var(--c-text-dim); font-weight: 500; letter-spacing: 0.2px; margin-top: 3px; }
.menu-btn .mb-arrow {
  font-size: 20px;
  color: var(--c-gold);
  opacity: 0.45;
  transition: transform 0.25s, opacity 0.25s;
  flex-shrink: 0;
}
.menu-btn:hover .mb-arrow { transform: translateX(5px); opacity: 1; }

.menu-btn.primary {
  background: var(--g-primary);
  border-color: rgba(240, 209, 140, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.5), var(--sh);
}
.menu-btn.primary .mb-title { color: #fff8e0; text-shadow: 0 1px 2px rgba(60, 20, 0, 0.5); }
.menu-btn.primary .mb-sub { color: rgba(255, 240, 200, 0.9); }
.menu-btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.6), var(--sh), var(--glow-strong); }

.menu-footer {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.menu-footer .btn { flex: 1; }

.menu-version {
  text-align: center;
  font-size: 10px;
  color: rgba(245, 230, 200, 0.28);
  margin-top: 4px;
  letter-spacing: 1.2px;
}

/* ═══════════════════════════════════════════════════════════
   ★★★ IFRAME ДЛЯ ИГРЫ ★★★
   Fullscreen запрашивается на родителе → iframe его не сбрасывает
   ═══════════════════════════════════════════════════════════ */
.game-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  border: 0;
  margin: 0;
  padding: 0;
  display: none;
  z-index: 99999;
  background: #0a0503;
  overflow: hidden;
}
.game-frame.active {
  display: block;
}
body.game-open .menu-app {
  visibility: hidden;
  pointer-events: none;
}

/* === Магазин === */
.shop-app {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200, 120, 60, 0.2), transparent 70%),
    linear-gradient(180deg, #1a0f08 0%, #0a0503 100%);
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.shop-body {
  flex: 1 1 0;
  padding: 24px 20px 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.shop-hero {
  text-align: center;
  margin-bottom: 24px;
}
.shop-hero-title {
  font-family: var(--f-title);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--c-gold);
  text-shadow: 0 0 20px rgba(240, 209, 140, 0.5);
}
.shop-hero-sub {
  font-size: 12px;
  color: var(--c-text-dim);
  margin-top: 6px;
  letter-spacing: 0.5px;
}

.shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.shop-tab {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--c-gold-soft);
  background: rgba(30, 15, 8, 0.85);
  color: var(--c-text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.shop-tab:hover { color: var(--c-gold); border-color: var(--c-gold-line); }
.shop-tab.active {
  background: var(--g-primary);
  color: #fff5d0;
  border-color: var(--c-gold);
  box-shadow: var(--glow);
  text-shadow: 0 1px 2px rgba(60, 20, 0, 0.5);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.shop-item {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 209, 140, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(40, 20, 10, 0.92), rgba(15, 8, 4, 0.96));
  border: 1px dashed var(--c-gold-soft);
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.shop-item:hover {
  border-style: solid;
  border-color: var(--c-gold);
  transform: translateY(-4px);
  box-shadow: var(--sh), var(--glow);
}
.shop-item:hover .si-ico { transform: scale(1.12) rotate(-4deg); }

.shop-item .si-ico {
  font-size: 54px;
  filter: drop-shadow(0 0 14px rgba(240, 209, 140, 0.6));
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shop-item .si-title {
  font-family: var(--f-title);
  font-size: 14px;
  color: var(--c-gold);
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(240, 209, 140, 0.3);
}
.shop-item .si-soon {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-dim);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--c-gold-soft);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 520px) {
  .menu-body { padding: 12px; }
  .menu-card { padding: 24px 16px 20px; border-radius: 20px; }
  .menu-logo-icon { font-size: 44px; }
  .menu-logo-title { font-size: 32px; letter-spacing: 4px; }
  .menu-logo-sub { font-size: 9px; letter-spacing: 4px; margin-top: 6px; }
  .menu-buttons { gap: 10px; margin-top: 14px; }
  .menu-btn { padding: 12px 14px; gap: 11px; border-radius: 14px; }
  .menu-btn .mb-ico { font-size: 22px; }
  .menu-btn .mb-title { font-size: 13px; }
  .menu-btn .mb-sub { font-size: 10px; }
  .menu-btn .mb-arrow { font-size: 15px; }

  .shop-body { padding: 16px 12px 30px; }
  .shop-hero-title { font-size: 22px; letter-spacing: 3px; }
  .shop-hero-sub { font-size: 11px; }
  .shop-tab { padding: 9px 14px; font-size: 12px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .shop-item { padding: 16px 10px; gap: 8px; }
  .shop-item .si-ico { font-size: 40px; }
  .shop-item .si-title { font-size: 12px; letter-spacing: 1px; }
  .shop-item .si-soon { font-size: 9px; padding: 3px 8px; }
}

@media (max-height: 640px) and (orientation: portrait) and (max-width: 520px) {
  .menu-card { padding: 20px 14px 18px; gap: 8px; }
  .menu-logo-icon { font-size: 38px; }
  .menu-logo-title { font-size: 28px; letter-spacing: 3px; }
  .menu-logo-sub { margin-top: 4px; letter-spacing: 3px; }
  .menu-buttons { gap: 8px; margin-top: 10px; }
  .menu-btn { padding: 10px 12px; gap: 10px; }
  .menu-btn .mb-ico { font-size: 20px; }
  .menu-btn .mb-title { font-size: 12.5px; }
  .menu-btn .mb-sub { font-size: 9.5px; }
}