* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --g: #2bff6a; --gd: #13a84a; --red: #d8342a; --redd: #8e1b14; --txt: #e6ffee; --mut: #86a894;
  --ga: 43,255,106; --mrgb: 134,168,148; --pbg: #07100b; --cbg: #0d1812; --cbg2: #0b140f; --xbg: #0d1c13;
  --mine: #16301f; --acct: #02140a; --bbg: rgba(10,22,15,.88); }
html, body { margin: 0; height: 100%; overflow: hidden; background: #010302; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--txt);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#cv { display: block; touch-action: none; }
#ui { position: absolute; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
a { color: var(--g); }

.panel.center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 24px; pointer-events: none; }
.panel.center > * { pointer-events: auto; }
#menu { justify-content: flex-end; padding-bottom: 20%; }
.title { font-size: 44px; font-weight: 900; color: #fff; text-align: center; line-height: 1.05;
  text-shadow: 0 3px 0 var(--red), 0 0 18px rgba(var(--ga),.35); letter-spacing: .5px;
  position: absolute; top: 9%; left: 0; right: 0; }
.sub { font-size: 16px; font-weight: 700; color: var(--mut); text-align: center; }
#menu .sub { color: var(--g); text-shadow: 0 0 8px rgba(var(--ga),.5); }

.btn { border: 1.5px solid rgba(var(--ga),.55); border-radius: 14px; padding: 12px 20px; font: inherit; font-size: 17px;
  font-weight: 800; color: var(--txt); background: var(--bbg); box-shadow: 0 0 12px rgba(var(--ga),.15);
  cursor: pointer; min-width: 120px; }
.btn:active { transform: translateY(2px); }
.btn.big { font-size: 24px; padding: 16px 40px; min-width: 220px; background: linear-gradient(#e8463b, var(--red));
  border: 0; color: #fff; box-shadow: 0 5px 0 var(--redd), 0 0 22px rgba(255,120,40,.35); }
.btn.big:active { box-shadow: 0 2px 0 var(--redd); transform: translateY(3px); }
.btn.ghost { background: transparent; border-color: rgba(var(--mrgb),.5); color: var(--mut); }
.row { display: flex; gap: 12px; }

.card { background: var(--pbg); border: 1.5px solid rgba(var(--ga),.4); border-radius: 20px; padding: 16px 34px;
  text-align: center; box-shadow: 0 0 30px rgba(var(--ga),.12); min-width: 220px; }
.cap { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--mut); letter-spacing: 2px; }
.score { font-size: 64px; font-weight: 900; color: var(--g); line-height: 1; margin: 4px 0; text-shadow: 0 0 16px rgba(var(--ga),.45); }
.newrec { display: inline-block; background: #ff9a1f; color: #2a1300; font-weight: 900; border-radius: 10px;
  padding: 3px 10px; margin-bottom: 6px; animation: pop .6s ease; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

.panel.sheet { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; background: var(--pbg);
  border: 1.5px solid rgba(var(--ga),.35); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden; }
.head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 22px; font-weight: 900; }
.x { border: 1px solid rgba(var(--ga),.4); background: var(--xbg); color: var(--g); width: 36px; height: 36px;
  border-radius: 50%; font-size: 17px; font-weight: 900; cursor: pointer; }
.grid { flex: 1; overflow-y: auto; display: grid; align-content: start; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 12px 14px; }
.skin { background: var(--cbg); border-radius: 14px; padding: 6px 6px 8px; text-align: center; cursor: pointer;
  border: 2px solid rgba(var(--ga),.12); position: relative; }
.skin img { width: 100%; height: auto; display: block; }
.skin.on { border-color: var(--g); box-shadow: 0 0 14px rgba(var(--ga),.3); }
.skin .nm { font-weight: 800; font-size: 15px; }
.skin .how { font-size: 12px; color: var(--mut); }
.skin.locked img { filter: grayscale(1) brightness(.5); }
.skin.locked::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: 18px; }

.tabs { display: flex; gap: 6px; padding: 0 12px 8px; }
.tabs button { flex: 1; border: 1px solid rgba(var(--ga),.25); border-radius: 12px; padding: 9px 4px; font: inherit;
  font-weight: 800; background: var(--cbg); color: var(--mut); cursor: pointer; }
.tabs button.on { background: var(--gd); color: #fff; border-color: var(--g); }
.list { flex: 1; overflow-y: auto; padding: 0 12px; }
.ln { display: flex; align-items: center; gap: 8px; background: var(--cbg); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; }
.ln.mine { background: var(--mine); border: 1px solid rgba(var(--ga),.45); }
.ln .rk { width: 30px; font-weight: 900; color: var(--mut); text-align: center; }
.ln .rk.g1 { color: #ffc93c; } .ln .rk.g2 { color: #c9d2dc; } .ln .rk.g3 { color: #d98a4a; }
.ln img { width: 44px; height: 33px; }
.ln .nm { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln .sc { font-weight: 900; color: var(--g); font-size: 18px; }
.me { padding: 4px 12px; }
.login { padding: 6px 12px 14px; text-align: center; font-size: 14px; color: var(--mut); }
.login input { background: var(--cbg); color: var(--txt); }
.empty { text-align: center; color: var(--mut); padding: 30px 10px; }

.round { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(var(--ga),.4); background: var(--bbg); font-size: 19px; cursor: pointer; }

.nftbtn { border-color: rgba(255,154,31,.7); color: #ffd08a; }
.prod { background: var(--cbg); border: 1px solid rgba(var(--ga),.18); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.prod .nm { font-weight: 900; font-size: 17px; }
.prod .ds { font-size: 13px; color: var(--mut); margin: 4px 0 10px; line-height: 1.35; }
.prod .buy { display: flex; gap: 8px; }
.prod .buy .btn { flex: 1; min-width: 0; padding: 10px 8px; font-size: 15px; }
.prod .own { color: var(--g); font-weight: 900; }
.prod .st { font-size: 13px; color: #ffd08a; margin-top: 8px; }
#access .cap { margin: 4px 2px 8px; }
.tier { background: var(--cbg2); border: 1px solid rgba(var(--mrgb),.2); border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; }
.tier .tn { font-weight: 800; }
.tier .td { font-size: 13px; color: var(--mut); margin-top: 2px; }
.tier.got { border-color: rgba(var(--ga),.6); }
.tier.got .tn::before { content: "✓ "; color: var(--g); }
.tier.nft { border-color: rgba(255,154,31,.5); background: #0d1a12; }
.tier.nft.got { border-color: var(--g); }

.prod.test { border-color: rgba(255,200,60,.55); background: rgba(60,45,0,.35); }
.prod.test .btn { flex: 1 1 22%; min-width: 0; padding: 9px 4px; font-size: 14px; }
.prod.test .btn.on { background: var(--g); color: var(--acct); }

/* меню на светлом японском фоне: тушь и киноварь */
body.menubg #menu .title { color: #17171c; text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.75), 0 0 36px rgba(255,255,255,.45); }
body.menubg #menu .sub { color: #8e1b14; text-shadow: none; }
body.menubg #sound { background: rgba(23,23,28,.7); }

/* круглые кнопки по бокам под заголовком (ссылки из access.json links) */
.orb { position: absolute; top: calc(9% + 66px); left: 3%; width: 100px; padding: 0; border: 0; background: none; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.orb.right { left: auto; right: 3%; }
.orb i { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,16,11,.88);
  border: 2.5px solid var(--g); box-shadow: 0 0 14px rgba(var(--ga),.35); animation: orbGlow 2.6s ease-in-out infinite; }
.orb.right i { animation-delay: 1.3s; }
.orb svg { width: 30px; height: 30px; fill: currentColor; }
.orb span { font-size: 12.5px; white-space: nowrap; font-weight: 800; line-height: 1.1; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.orb:active i { transform: scale(.93); }
@keyframes orbGlow { 50% { box-shadow: 0 0 22px rgba(var(--ga),.6); } }
body.menubg #menu .orb { color: #17171c; }
body.menubg #menu .orb i { background: rgba(23,23,28,.9); color: #f4efe6; border-color: #d8342a; box-shadow: 0 0 0 3px rgba(216,52,42,.18), 0 3px 10px rgba(0,0,0,.2);
  animation-name: orbInk; }
body.menubg #menu .orb span { text-shadow: 0 0 6px rgba(255,255,255,.9); }
@keyframes orbInk { 50% { box-shadow: 0 0 0 6px rgba(216,52,42,.22), 0 3px 10px rgba(0,0,0,.2); } }

/* Стеклянные объёмные кнопки в меню: полупрозрачная заливка оттенком --gl, размытие фона,
   блик сверху, тень снизу (толщина). Оттенок — body[data-glass]. Play всегда красное стекло. */
body { --gl: 30,30,38; --gld: 8,8,12; --glt: #fff; }
body[data-glass="red"]   { --gl: 216,52,42;  --gld: 110,18,12; }
body[data-glass="gold"]  { --gl: 255,176,40; --gld: 150,90,10; }
body[data-glass="clear"] { --gl: 255,255,255; --gld: 120,120,130; --glt: #17171c; }
body[data-glass="jade"]  { --gl: 30,170,120; --gld: 10,80,55; }
body.menubg #menu .btn, body.menubg #menu .orb i {
  position: relative; overflow: hidden; color: var(--glt);
  background: linear-gradient(180deg, rgba(var(--gl),.62) 0%, rgba(var(--gl),.30) 50%, rgba(var(--gl),.46) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -4px 8px rgba(var(--gld),.35),
              0 4px 0 rgba(var(--gld),.55), 0 10px 18px rgba(0,0,0,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,.35); animation: none;
}
body[data-glass="clear"].menubg #menu .btn:not(.big) { text-shadow: 0 1px 0 rgba(255,255,255,.7); }
body.menubg #menu .btn::before, body.menubg #menu .orb i::before {
  content: ''; position: absolute; left: 7%; right: 7%; top: 2px; height: 48%; pointer-events: none;
  border-radius: 12px 12px 50% 50% / 12px 12px 30% 30%;
  background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.06));
}
body.menubg #menu .orb i::before { left: 14%; right: 14%; top: 3px; border-radius: 50% 50% 45% 45%; }
body.menubg #menu .btn.big { --gl: 228,58,46; --gld: 120,20,14; --glt: #fff; }
body.menubg #menu .btn:active, body.menubg #menu .orb:active i { transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 6px rgba(var(--gld),.35), 0 1px 0 rgba(var(--gld),.55), 0 4px 10px rgba(0,0,0,.2); }
body.menubg #menu .orb i { color: var(--glt); border-color: rgba(255,255,255,.6); }
body.menubg #menu .orb svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); position: relative; }
body.menubg #menu .btn.big { background: linear-gradient(180deg, rgba(var(--gl),.92) 0%, rgba(var(--gl),.66) 50%, rgba(var(--gl),.82) 100%); }
body.menubg #menu .btn:not(.big) { padding: 12px 22px; }

/* окно ссылок (Join the Cult / Charity) */
.linktext { font-size: 14px; color: var(--mut); margin: 2px 2px 12px; line-height: 1.4; }
.linkrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 14px;
  background: var(--cbg); border: 1px solid rgba(var(--ga),.22); color: var(--txt); font: inherit; text-align: left; cursor: pointer; }
.linkrow:active { transform: translateY(2px); }
.lic { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.ltx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ltx b { font-size: 17px; }
.ltx small { font-size: 12px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgo { font-size: 15px; font-weight: 800; color: var(--g); }
.lic img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; display: block; }
.lic:has(img) { overflow: hidden; }
/* временная кнопка выбора оттенка (тестовый режим) */
.glassbtn { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
  border: 1px dashed rgba(23,23,28,.5); background: rgba(255,255,255,.55); color: #17171c; font: inherit; font-size: 13px; font-weight: 800; }
/* Connect wallet — синяя (просьба заказчика) */
.btn.big.wallet { background: linear-gradient(#4f8bff, #2563eb); box-shadow: 0 5px 0 #1740a6, 0 0 22px rgba(80,140,255,.35); }
.btn.big.wallet:active { box-shadow: 0 2px 0 #1740a6; }

/* Charity */
.chphotos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px 12px; padding: 0 12px; }
.chphotos img { flex: 0 0 82%; height: 220px; object-fit: cover; border-radius: 14px; scroll-snap-align: center; }
.chtext { font-size: 14.5px; line-height: 1.5; margin: 0 2px 10px; color: var(--txt); }
.chnote { font-size: 12.5px; line-height: 1.4; color: var(--mut); font-style: italic; margin: 6px 2px 8px; }
.chsign { font-size: 20px; margin: 4px 2px 12px; }
.chcontacts { display: flex; gap: 10px; margin: 8px 0 16px; }
.chcontacts .btn { flex: 1; min-width: 0; padding: 10px 8px; font-size: 15px; }
.prod.donate { border-color: rgba(255,200,90,.45); }
.chtoggle, .chamts { display: flex; gap: 8px; margin: 8px 0; }
.chip { flex: 1; padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(var(--ga),.3); background: var(--cbg2); color: var(--txt);
  font: inherit; font-weight: 800; font-size: 14px; }
.chip.big { font-size: 18px; padding: 12px 6px; }
.chip.on { background: var(--g); color: var(--acct); border-color: var(--g); }
.chwallets { margin-top: 6px; }
.chphotos.one { margin: 0 0 4px; padding: 0; overflow: visible; }
.chphotos.one img { flex: 1 1 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.chphnote { font-size: 11.5px; color: rgba(230,255,238,.38); margin: 2px 2px 12px; }

/* плавное открытие/закрытие окон и экранов (анимация перезапускается при снятии .hidden) */
.panel.sheet:not(.hidden) { animation: sheetIn .26s cubic-bezier(.2,.8,.25,1) backwards; }
.panel.sheet.closing { animation: sheetOut .17s ease-in both; pointer-events: none; }
#menu:not(.hidden), #over:not(.hidden) { animation: fadeIn .22s ease-out backwards; }
#menu:not(.hidden) .btn, #menu:not(.hidden) .orb { animation: popIn .32s cubic-bezier(.2,.8,.25,1) backwards; }
#menu:not(.hidden) .row:nth-of-type(1) .btn { animation-delay: .04s; }
#menu:not(.hidden) .row:nth-of-type(2) .btn { animation-delay: .08s; }
#menu:not(.hidden) .orb { animation-delay: .1s; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sheetOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel, .panel * { animation: none !important; } }

/* тема Japan (ink): Play — тёмное серое стекло вместо красного (просьба заказчика) */
body[data-glass="ink"].menubg #menu .btn.big { --gl: 26,26,32; --gld: 6,6,9; }

/* тёмные темы меню: светлый заголовок и подписи */
body[data-mtheme="crimson"].menubg #menu .title { color: #fff; text-shadow: 0 3px 0 rgba(60,0,0,.55), 0 0 18px rgba(255,220,210,.35); }
body[data-mtheme="crimson"].menubg #menu .sub { color: #ffe1d9; }
body[data-mtheme="crimson"].menubg #menu .orb { color: #fff; }
body[data-mtheme="crimson"].menubg #menu .orb span { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body[data-mtheme="crimson"].menubg #menu .btn.big { --gl: 255,255,255; --gld: 90,10,8; --glt: #7a1410; text-shadow: none; }
body[data-mtheme="matrix"].menubg #menu .title { color: #eafff0; text-shadow: 0 3px 0 rgba(0,40,15,.8), 0 0 18px rgba(var(--ga),.55); }
body[data-mtheme="matrix"].menubg #menu .sub { color: var(--g); }
body[data-mtheme="matrix"].menubg #menu .orb { color: #eafff0; }
body[data-mtheme="matrix"].menubg #menu .orb span { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
body[data-mtheme="matrix"].menubg #menu .btn.big { --gl: 43,220,110; --gld: 0,70,30; --glt: #021a0a; text-shadow: none; }
body[data-mtheme="crimson"].menubg #sound, body[data-mtheme="matrix"].menubg #sound { background: rgba(0,0,0,.45); }

/* Окна интерфейса по теме меню: Crimson — светло-бордовые (просьба заказчика), Japan/Matrix — как были */
body[data-mtheme="crimson"] { --g: #ffe0b8; --gd: #c9474d; --txt: #fff3ee; --mut: #f2bdb3; --ga: 255,214,190; --mrgb: 242,189,179;
  --pbg: #8c2a2e; --cbg: #74191e; --cbg2: #6b161a; --xbg: #74191e; --mine: #a4373c; --acct: #5a0f12; --bbg: rgba(110,22,26,.9); }
body[data-mtheme="japan"] { --g: #c4372d; --gd: #2b2a30; --txt: #1e1d22; --mut: #6f6b70; --ga: 40,38,46; --mrgb: 110,106,112;
  --pbg: #f2efea; --cbg: #e6e2dc; --cbg2: #ebe7e1; --xbg: #e6e2dc; --mine: #ffffff; --acct: #ffffff; --bbg: rgba(255,255,255,.85); }
body[data-mtheme="japan"] .panel.sheet { box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Скины и карты: карточки появляются по очереди, выбор — плавная рамка и лёгкая пружинка */
.skin { transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease; }
.skin:active { transform: scale(.96); }
.skin .how { transition: color .25s ease; }
.skin.on .how { color: var(--g); }
.grid .skin { animation: popIn .32s ease backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.grid .skin.picked { animation: picked .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes picked { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

/* Соцсети слева сверху: одна кнопка, по нажатию вправо от неё выезжают X и DexScreener */
#socBtn { left: 10px; right: auto; display: flex; align-items: center; justify-content: center; padding: 0; color: #fff;
  background: rgba(23,23,28,.7); transition: transform .2s ease; z-index: 2; }
#socials.open #socBtn { transform: rotate(-45deg); }
#socials .soc { left: 10px; right: auto; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;
  color: #fff; background: rgba(23,23,28,.85); opacity: 0; pointer-events: none; transform: translateX(-50px) scale(.6);
  transition: transform .26s cubic-bezier(.3,1.4,.5,1), opacity .18s ease; }
#socials.open .soc { opacity: 1; pointer-events: auto; transform: none; }
#socials .soc:nth-of-type(2) { left: 60px; }
#socials .soc:nth-of-type(3) { left: 110px; transition-delay: .04s; transform: translateX(-100px) scale(.6); }
#socials.open .soc:nth-of-type(3) { transform: none; }
#socials .soc img { width: 100%; height: 100%; object-fit: cover; display: block; }
#socials.open .soc:active { transform: scale(.92); }
body[data-mtheme="crimson"].menubg #socBtn, body[data-mtheme="matrix"].menubg #socBtn { background: rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { #socials .soc, #socBtn { transition: none; } }

/* NFT Access под тему окон: кнопка Connect wallet и карточка «NFT — everything».
   Matrix — как было (синяя кнопка, тёмная карточка); Japan — тушь на светлом; Crimson — кремовый на бордовом. */
body[data-mtheme="japan"] .btn.big.wallet { color: #fff; border-color: #17171c; background: linear-gradient(#4a4950, #1d1c22);
  box-shadow: 0 5px 0 #08080a, 0 0 18px rgba(0,0,0,.18); }
body[data-mtheme="japan"] .btn.big.wallet:active { box-shadow: 0 2px 0 #08080a; }
body[data-mtheme="japan"] .tier.nft { background: #fbf8f3; border-color: rgba(196,55,45,.55); }
body[data-mtheme="japan"] .tier.nft.got { border-color: var(--g); box-shadow: 0 0 0 1px rgba(196,55,45,.25); }
body[data-mtheme="japan"] .prod.test { background: #ece6db; border-color: rgba(150,120,60,.45); }
body[data-mtheme="crimson"] .btn.big.wallet { color: #7a1410; border-color: #ffe0b8; background: linear-gradient(#fff4e6, #ffd6ab);
  box-shadow: 0 5px 0 #b9615a, 0 0 18px rgba(255,214,170,.3); }
body[data-mtheme="crimson"] .btn.big.wallet:active { box-shadow: 0 2px 0 #b9615a; }
body[data-mtheme="crimson"] .tier.nft { background: #6b161a; border-color: rgba(255,224,184,.55); }
body[data-mtheme="crimson"] .tier.nft.got { border-color: #ffe0b8; }

/* экран проигрыша: карточка выезжает снизу, кнопки появляются следом; счёт «приземляется» после набега */
#over:not(.hidden) .card { animation: cardUp .42s cubic-bezier(.2,.9,.3,1.12) backwards; }
#over:not(.hidden) .btn { animation: popIn .32s cubic-bezier(.2,.8,.25,1) backwards; animation-delay: .16s; }
#over:not(.hidden) .row .btn { animation-delay: .22s; }
#over:not(.hidden) .btn.ghost { animation-delay: .28s; }
#overScore.landed { animation: landed .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes cardUp { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes landed { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* уход с экрана — растворение (game.js leave) */
#menu.leaving, #over.leaving, #sound.leaving, #socials.leaving { animation: fadeOut .18s ease-in forwards !important; }
.leaving, .leaving * { pointer-events: none !important; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #overScore.landed { animation: none; } }

/* переключатель «Show me as Anonymous» */
.hideme { display: flex; align-items: center; gap: 10px; margin: 2px 12px 10px; font-size: 14px; font-weight: 700; color: var(--mut); cursor: pointer; }
.hideme input { position: absolute; opacity: 0; pointer-events: none; }
.hideme .sw { flex: 0 0 auto; width: 40px; height: 24px; border-radius: 12px; background: rgba(var(--mrgb),.35); position: relative; transition: background .2s ease; }
.hideme .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
.hideme input:checked + .sw { background: var(--gd); }
.hideme input:checked + .sw::after { transform: translateX(16px); }

/* ссылки на Privacy / Terms: в углу меню и под Connect wallet */
#menu .legal { position: absolute; right: 12px; bottom: 14px; font-size: 12px; font-weight: 700; color: rgba(23,23,28,.55); }
#menu .legal button, .legalnote button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body[data-mtheme="crimson"] #menu .legal, body[data-mtheme="matrix"] #menu .legal { color: rgba(255,255,255,.6); }
body:not(.menubg) #menu .legal { color: rgba(255,255,255,.6); }
.legalnote { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--mut); text-align: center; }
