/* v61: vertically centered start-menu composition and coordinated layers. */
#main-menu {
  position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  box-sizing:border-box; padding:8px; overflow:hidden;
  --menu-visual-offset:8%;
  color:#642f1f; background:rgba(27,7,38,.34);
  backdrop-filter:blur(4px) saturate(.88); -webkit-backdrop-filter:blur(4px) saturate(.88);
  font-family:"Nunito","Segoe UI",system-ui,sans-serif;
}
.menu-card {
  position:relative; flex:none;
  width:min(var(--game-visual-width,417px),calc(100vw - 16px));
  height:auto; aspect-ratio:824/1252; overflow:visible;
  /* Тень — у статичных слоёв (.menu-panel-art, .menu-logo), а не у карточки:
     фильтр на предке анимированных слоёв пересчитывался бы на каждом кадре. */
  /* The logo lives above the panel's layout box. Offset the card by half of
     that visual overhang so the whole composition, not just the parchment,
     is centered in the viewport. */
  transform:translateY(var(--menu-visual-offset));
  isolation:isolate;
}
.menu-card img {display:block; max-width:none; pointer-events:none; user-select:none;}
.menu-panel-art {
  position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:fill;
  filter:drop-shadow(0 18px 28px rgba(31,8,30,.48));
}
.menu-head {
  position:absolute; z-index:8; left:6%; top:-17%; width:88%; aspect-ratio:680/383;
  margin:0; pointer-events:none;
}
.menu-logo {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(31,8,30,.32));}
.menu-visually-hidden {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
.menu-tagline-wrap {
  position:absolute; z-index:3; left:4%; top:10.5%; width:92%; aspect-ratio:2030/568;
}
.menu-tagline-wrap > img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.menu-tagline {position:absolute; z-index:2; inset:0; margin:0; pointer-events:none; transform:translateY(-28px);}
.menu-tagline svg {position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.menu-tagline-text {
  fill:#884221; stroke:rgba(255,244,201,.55); stroke-width:1px; paint-order:stroke fill;
  font-family:"Nunito","Segoe UI",system-ui,sans-serif; font-size:24px; font-weight:1000;
}
.menu-hero {
  position:absolute; z-index:4; left:6%; top:20%; width:88%; height:auto;
  filter:drop-shadow(0 5px 6px rgba(91,39,20,.2));
}
#main-menu button {font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
#main-menu button:focus-visible {outline:3px solid #fff4a9; outline-offset:2px;}
#main-menu.menu-background {
  pointer-events:none;
  /* Settings and the diary already own their dimming overlays. Keep this
     layer transparent so opening them from the menu does not dim twice. */
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
#main-menu .menu-card {
  transition:opacity .18s ease,filter .18s ease,transform .18s ease;
}
#main-menu.menu-background .menu-card {
  opacity:.42;
  filter:blur(3px) brightness(.84) saturate(.78);
  transform:translateY(var(--menu-visual-offset)) scale(.985);
}
/* A section opened from the main menu sits above the menu itself. The live
   board must not form a third visible layer through the softened menu card. */
body.menu-section #app-root {
  visibility:hidden!important;
  pointer-events:none!important;
}
/* Любое модальное событие над стартовым экраном должно иметь только два
   визуальных слоя: фон + меню. Живое поле под полупрозрачным меню скрываем
   целиком, иначе по краям карточки проступают HUD и кнопки бустеров. */
body.menu-modal-active #app-root {
  visibility:hidden!important;
  pointer-events:none!important;
}
.menu-play {
  position:absolute; z-index:9; left:12%; top:53%; width:76%; aspect-ratio:947/247;
  margin:0; padding:0 10%; border:0; color:#fff; background:transparent center/100% 100% no-repeat;
  background-image:url('art/menu-v52/play-normal.webp');
  font-size:16px!important; line-height:1; font-weight:1000!important;
  text-transform:uppercase; text-shadow:0 2px 2px rgba(31,83,11,.7);
}
.menu-play:active {transform:translateY(1px); background-image:url('art/menu-v52/play-pressed.webp');}
.menu-play:disabled {
  cursor:wait; color:#f0f0f0; background-image:url('art/menu-v52/play-disabled.webp'); text-shadow:0 2px 2px #4b4d52;
}
.menu-options {
  position:absolute; z-index:10; left:8%; top:68%; width:84%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2%;
}
.menu-options button {
  position:relative; min-width:0; width:100%; aspect-ratio:885/242; margin:0;
  padding:0 4% 0 29%; display:flex; align-items:center; justify-content:center;
  border:0; color:#6f2d20; background:transparent center/100% 100% no-repeat;
  background-image:url('art/menu-v52/option-normal.webp');
  font-size:clamp(9px,2.8vw,12px); line-height:1.02; font-weight:1000; text-align:center;
}
.menu-options button > img {
  position:absolute; left:3%; top:11%; width:27%; height:78%; object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(69,20,84,.2));
}
.menu-options button b {
  font-size:12px; line-height:12px; font-weight:650;
  overflow-wrap:normal; word-break:normal; hyphens:none;
}
.menu-options button:active {transform:translateY(1px); background-image:url('art/menu-v52/option-pressed.webp');}
.menu-options button:disabled {cursor:not-allowed; filter:none; background-image:url('art/menu-v52/option-disabled.webp');}
.menu-options button:disabled > img {filter:grayscale(.7) opacity(.65);}
.menu-promo {
  position:absolute; z-index:5; left:4%; top:78%; width:92%; aspect-ratio:1842/691;
  margin:0; pointer-events:none;
}
.menu-promo-art {position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:contain;}
.menu-foot {
  position:absolute; z-index:3; left:13%; right:13%; top:12%; height:14%; margin:0;
  display:flex; align-items:center; justify-content:center;
  color:#7625b8; font-size:11px; line-height:1.05; font-weight:1000; text-align:center;
  white-space:normal; text-wrap:balance;
}
.menu-stickers {
  position:absolute; z-index:2; left:18%; right:18%; top:31%; bottom:23%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; justify-items:center; gap:0;
}
.menu-stickers img {width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 2px 2px rgba(76,32,18,.2));}
.menu-compass {
  position:absolute; z-index:4; right:-2%; bottom:-3%; width:17%; height:auto;
  filter:drop-shadow(0 3px 3px rgba(77,34,14,.25));
}
/* v71: оживление стартового экрана. Частицы света за карточкой и искорки у героя. */
.menu-ambient,.menu-sparkles {position:absolute; pointer-events:none;}
.menu-play-shine {
  display:none; position:absolute; inset:0; overflow:hidden; pointer-events:none;
  -webkit-mask:url('art/menu-v52/play-normal.webp') center/100% 100% no-repeat;
  mask:url('art/menu-v52/play-normal.webp') center/100% 100% no-repeat;
}
.menu-ambient {inset:0; z-index:0; overflow:hidden;}
.menu-sparkles {z-index:7; inset:0;}
.menu-ambient i,.menu-sparkles i {position:absolute; display:block; opacity:0;}
.menu-ambient i {
  bottom:-12%; width:var(--s,18px); height:var(--s,18px); border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,160,.55) 0,rgba(255,196,120,.22) 45%,rgba(255,180,120,0) 70%);
}
.menu-ambient i:nth-child(1){left:6%;  --s:22px; --d:17s; --delay:-3s;  --x:18px}
.menu-ambient i:nth-child(2){left:18%; --s:12px; --d:13s; --delay:-9s;  --x:-14px}
.menu-ambient i:nth-child(3){left:31%; --s:30px; --d:21s; --delay:-15s; --x:22px}
.menu-ambient i:nth-child(4){left:46%; --s:10px; --d:12s; --delay:-5s;  --x:-10px}
.menu-ambient i:nth-child(5){left:58%; --s:24px; --d:19s; --delay:-12s; --x:16px}
.menu-ambient i:nth-child(6){left:71%; --s:14px; --d:15s; --delay:-1s;  --x:-18px}
.menu-ambient i:nth-child(7){left:83%; --s:34px; --d:23s; --delay:-18s; --x:12px}
.menu-ambient i:nth-child(8){left:92%; --s:11px; --d:14s; --delay:-7s;  --x:-12px}
.menu-ambient i:nth-child(9){left:40%; --s:16px; --d:18s; --delay:-11s; --x:20px}
.menu-sparkles i {
  width:var(--s,7%); aspect-ratio:1; margin:calc(var(--s,7%) / -2) 0 0 calc(var(--s,7%) / -2);
  background:radial-gradient(circle,#fff 0 16%,#fff6c4 34%,#ffd54f 58%,rgba(255,196,60,.85) 72%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.menu-sparkles i:nth-child(1){left:16%; top:25%; --delay:.2s}
.menu-sparkles i:nth-child(2){left:84%; top:29%; --s:5.5%; --delay:1.4s}
.menu-sparkles i:nth-child(3){left:10%; top:44%; --s:5%;   --delay:2.3s}
.menu-sparkles i:nth-child(4){left:90%; top:45%; --s:7.5%; --delay:.8s}
.menu-sparkles i:nth-child(5){left:6%;  top:-4%; --s:6%;   --delay:1.9s}
.menu-sparkles i:nth-child(6){left:94%; top:-9%; --s:5%;   --delay:2.9s}
.menu-help {
  display:none; position:absolute; z-index:20; left:7%; right:7%; top:68%; margin:0;
  padding:8px 10px; border:2px solid #f2bd52; border-radius:14px;
  color:#fff7ce; background:rgba(92,31,121,.97);
  font-size:10px; line-height:1.2; font-weight:900; text-align:center;
}
.menu-help:not(:empty) {display:block;}
#main-menu-button {
  position:fixed; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left));
  z-index:1300; display:none; width:44px; height:44px; padding:0; border:2px solid #e8a334;
  border-radius:14px; color:#fff; font-size:20px; line-height:1; cursor:pointer;
  background:linear-gradient(160deg,#8f34d2,#57207d);
  box-shadow:0 4px 0 #47204e,0 7px 14px rgba(34,8,40,.35);
}
#main-menu-button:active {transform:translateY(2px); box-shadow:0 2px 0 #47204e;}
.menu-front {z-index:1250!important;}
body.menu-section #popup {z-index:1260!important;}
body.menu-section #story-cutscene {z-index:1270!important;}
body.menu-modal-active #popup {z-index:1300!important;}
body.menu-modal-active #story-cutscene {z-index:1310!important;}
#topbar .menu-topbar {
  color:transparent!important; font-size:0!important; border:0!important;
  background-color:transparent!important; background-position:center!important;
  background-size:contain!important; background-repeat:no-repeat!important;
  box-shadow:none;
}
.menu-deleted {
  width:min(var(--game-visual-width,417px),calc(100vw - 24px));
  min-height:270px; aspect-ratio:auto; box-sizing:border-box; padding:38px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:4px solid #e8a334; border-radius:28px; text-align:center;
  background:linear-gradient(165deg,#fff0c7,#f6cd86); filter:drop-shadow(0 18px 28px rgba(34,9,28,.46));
  transform:none;
}
.menu-deleted h1 {margin:0 0 14px; color:#6c268b; font-size:26px; font-weight:1000;}
.menu-deleted p {margin:0; color:#713720; font-size:13px; line-height:1.45; font-weight:800;}
.account-delete {color:#a72546!important;}
@media (hover:hover) and (pointer:fine) {
  .menu-options button:not(:disabled):hover {background-image:url('art/menu-v52/option-hover.webp');}
}
@media (max-width:350px) {
  .menu-tagline-text {font-size:23px;}
  .menu-options button {font-size:clamp(8px,2.65vw,10px);}
  .menu-foot {font-size:11px;}
}
@media (prefers-reduced-motion:no-preference) {
  .menu-card:not(.menu-deleted) {animation:menu-card-in .32s cubic-bezier(.2,.88,.28,1.08) both;}
  @keyframes menu-card-in {
    from{opacity:0;transform:translateY(calc(var(--menu-visual-offset) + 10px)) scale(.98)}
    to{opacity:1;transform:translateY(var(--menu-visual-offset))}
  }
  @keyframes menu-hero-in {from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

  /* Джелли «дышит» и покачивается; логотип плавает в противофазе. */
  .menu-hero {
    transform-origin:50% 88%; will-change:transform;
    animation:menu-hero-in .45s .08s cubic-bezier(.2,.88,.28,1.08) both,
      menu-hero-float 4.2s .6s ease-in-out infinite;
  }
  @keyframes menu-hero-float {
    0%,100%{transform:translateY(0) scale(1,1)}
    45%{transform:translateY(-2.2%) scale(.994,1.012)}
  }
  .menu-head {will-change:transform; animation:menu-logo-float 5.6s .4s ease-in-out infinite;}
  @keyframes menu-logo-float {
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(1.4%) rotate(-.7deg)}
  }

  /* «Играть»: появляется с отскоком, затем мягко пульсирует и ловит блик. */
  .menu-play {
    will-change:transform;
    animation:menu-play-in .42s .18s cubic-bezier(.2,.9,.3,1.3) both,
      menu-play-pulse 3s 1.4s ease-in-out infinite;
  }
  @keyframes menu-play-in {from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
  @keyframes menu-play-pulse {
    0%,60%,100%{transform:scale(1)}
    72%{transform:scale(1.045)}
    84%{transform:scale(.992)}
  }
  .menu-play-shine {display:block;}
  .menu-play-shine::before {
    content:''; position:absolute; top:0; bottom:0; left:0; width:38%;
    background:linear-gradient(105deg,rgba(255,255,255,0) 0,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 100%);
    transform:translateX(-120%); will-change:transform;
    animation:menu-play-shine 3s 1.4s ease-in-out infinite;
  }
  /* Сдвигаем полоску через transform: браузер не перерисовывает кнопку и экран. */
  @keyframes menu-play-shine {0%,52%{transform:translateX(-120%)} 82%,100%{transform:translateX(320%)}}
  .menu-play:active,.menu-play:disabled {animation:none;}
  .menu-play:disabled .menu-play-shine {display:none;}

  .menu-options {animation:menu-rise-in .38s .26s ease-out both;}
  .menu-promo {animation:menu-rise-in .38s .32s ease-out both;}
  @keyframes menu-rise-in {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Стикеры на открытках качаются на ветру, компас подрагивает. */
  .menu-stickers img {transform-origin:50% 100%; will-change:transform; animation:menu-sticker-sway 3.6s ease-in-out infinite;}
  .menu-stickers img:nth-child(2) {animation-delay:-1.2s; animation-duration:4.1s;}
  .menu-stickers img:nth-child(3) {animation-delay:-2.4s; animation-duration:3.3s;}
  @keyframes menu-sticker-sway {0%,100%{transform:rotate(-2.6deg)} 50%{transform:rotate(2.6deg)}}
  .menu-compass {will-change:transform; animation:menu-compass-wobble 6.5s ease-in-out infinite;}
  @keyframes menu-compass-wobble {
    0%,100%{transform:rotate(-5deg)} 30%{transform:rotate(9deg)} 55%{transform:rotate(-2deg)} 75%{transform:rotate(4deg)}
  }

  .menu-sparkles i {animation:menu-sparkle 3.2s var(--delay,0s) ease-in-out infinite;}
  @keyframes menu-sparkle {
    0%,62%,100%{opacity:0;transform:scale(.2) rotate(0)}
    74%{opacity:1;transform:scale(1) rotate(35deg)}
    88%{opacity:.2;transform:scale(.45) rotate(70deg)}
  }
  .menu-ambient i {animation:menu-mote var(--d,16s) var(--delay,0s) linear infinite;}
  @keyframes menu-mote {
    0%{opacity:0;transform:translate3d(0,0,0)}
    12%{opacity:.9}
    50%{transform:translate3d(var(--x,12px),-55vh,0)}
    88%{opacity:.7}
    100%{opacity:0;transform:translate3d(0,-112vh,0)}
  }

  /* Когда поверх меню открыто окно или раздел, меню — фон: анимации на паузе. */
  #main-menu.menu-background *,
  #main-menu.menu-background *::before {animation-play-state:paused!important;}
}