/* ============================================================
   playground — три оформления: современный, детский, бумажный
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#08090c;
  --bg2:#0d0f14;
  --panel:rgba(255,255,255,.035);
  --panel2:rgba(255,255,255,.06);
  --panel3:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.09);
  --stroke2:rgba(255,255,255,.17);
  --text:#f2f4f8;
  --text2:#8b93a3;
  --text3:#5c6373;
  --accent:#c6ff3d;
  --accent2:#4dd4ff;
  --warn:#ff7a59;
  --ok:#4fe3a1;
  --r:18px;
  --r-sm:12px;
  --r-lg:26px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
  --card:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  --card-visual:#0b0d11;
  --header:rgba(8,9,12,.74);
  --blur:blur(18px) saturate(160%);
  --font:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:var(--font);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- детская ---------- */
html[data-theme="kids"]{
  --bg:#eef7ff;
  --bg2:#ffffff;
  --panel:rgba(255,255,255,.86);
  --panel2:#ffffff;
  --panel3:#f2f8ff;
  --stroke:rgba(23,58,110,.12);
  --stroke2:rgba(23,58,110,.22);
  --text:#0d1f38;
  --text2:#3f5f85;
  --text3:#66809f;
  --r:24px;
  --r-sm:16px;
  --r-lg:32px;
  --shadow:0 18px 40px rgba(24,66,122,.16);
  --shadow-soft:0 8px 20px rgba(24,66,122,.12);
  --card:#ffffff;
  --card-visual:#dcefff;
  --header:rgba(255,255,255,.86);
  --blur:blur(16px) saturate(180%);
  --display:"Segoe UI",var(--font);
}

html{
  font-family:var(--font);color:var(--text);background:var(--bg);
  scroll-behavior:smooth;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
body{
  min-height:100vh;min-height:100dvh;overflow-x:hidden;position:relative;
  background:
    radial-gradient(900px 520px at 12% -8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),
    radial-gradient(800px 480px at 88% 4%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 62%),
    radial-gradient(700px 500px at 50% 100%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 65%),
    var(--bg)
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 35%,transparent 78%)
}
html[data-theme="kids"]::before{
  opacity:.5;background-size:44px 44px;
  background-image:
    radial-gradient(color-mix(in srgb,var(--accent) 30%,transparent) 1.4px,transparent 1.4px),
    radial-gradient(color-mix(in srgb,var(--accent2) 26%,transparent) 1.4px,transparent 1.4px);
  background-position:0 0,22px 22px;
  mask-image:none;-webkit-mask-image:none
}
::selection{background:var(--accent);color:#0a0b0e}

/* ============ KEYFRAMES ============ */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes aurora{
  0%,100%{transform:translate(0,0) scale(1);opacity:.5}
  33%{transform:translate(60px,-40px) scale(1.18);opacity:.75}
  66%{transform:translate(-50px,30px) scale(.94);opacity:.4}
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 30%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes dealIn{0%{opacity:0;transform:translateY(-38px) rotate(-6deg) scale(.78)}65%{transform:translateY(5px) rotate(1.5deg) scale(1.02)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes matchPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.86)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tilePop{0%{transform:scale(0)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes mergePop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes foodBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes borderGlow{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes modalIn{
  0%{opacity:0;transform:translateY(40px) translateZ(-120px) scale(.88) rotateX(12deg)}
  55%{opacity:1;transform:translateY(-4px) translateZ(0) scale(1.015) rotateX(-1.5deg)}
  100%{opacity:1;transform:translateY(0) translateZ(0) scale(1) rotateX(0)}
}
@keyframes modalOut{
  0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(24px) translateZ(-70px) scale(.94) rotateX(7deg)}
}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(26px) translateZ(-40px) rotateX(7deg) scale(.96)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes cardSheen{
  0%{transform:translateX(-130%) skewX(-18deg);opacity:0}
  22%{opacity:.9}
  100%{transform:translateX(230%) skewX(-18deg);opacity:0}
}
@keyframes lvlFlash{
  0%{opacity:0;transform:scale(.55)}
  18%{opacity:.85}
  100%{opacity:0;transform:scale(2.4)}
}
@keyframes prizeGlow{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}
  50%{transform:scale(1.16);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent))}
}
@keyframes ringPulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes sparkleUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(.4)}}
@keyframes tapeIn{0%{opacity:0;transform:rotate(-8deg) scale(.9)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}

/* ============ CURSOR / CONFETTI / TIP ============ */
#confetti{position:fixed;inset:0;z-index:400;pointer-events:none;display:none}
#cursor{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:screen}html[data-theme="kids"] #cursor{display:none}
.ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.35);
  transform:scale(0);animation:ripple .6s linear;pointer-events:none
}
html[data-theme="kids"] .ripple{background:rgba(255,255,255,.6)}
.tip{
  position:fixed;z-index:500;pointer-events:none;max-width:270px;
  background:var(--panel2);color:var(--text);border:1px solid var(--stroke2);
  border-radius:12px;padding:10px 13px;font-size:12.5px;line-height:1.5;
  box-shadow:var(--shadow-soft);opacity:0;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;backdrop-filter:var(--blur)
}
.tip.show{opacity:1;transform:translateY(0)}
.tip b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:3px;font-weight:700}
html[data-theme="kids"] .tip{border-width:2px;border-radius:18px;font-weight:600}

/* ============ HEADER ============ */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--header);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--stroke);
  animation:slideDown .5s var(--ease);
}
.header-inner{
  max-width:1220px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:12px 26px;gap:14px
}
.logo{
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  font-size:16px;font-weight:650;letter-spacing:-.02em;
  transition:transform .25s var(--ease);flex:0 0 auto
}
.logo:hover{transform:translateY(-1px)}
.logo-mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .5s var(--ease),box-shadow .3s
}
.logo-mark svg{width:18px;height:18px;stroke:#0a0b0e;fill:none;stroke-width:2.4;stroke-linecap:round}
html[data-theme="kids"] .logo-mark{box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 55%,#00000022),inset 0 2px 0 rgba(255,255,255,.6)}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.06)}
.logo-text{
  background:linear-gradient(100deg,var(--text) 20%,color-mix(in srgb,var(--text) 65%,transparent) 60%,var(--text) 90%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmer 7s linear infinite
}
.logo-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 7px;border-radius:6px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);font-family:var(--mono)
}

.nav{display:flex;gap:7px;align-items:center;flex-wrap:nowrap}
.nav-btn{
  position:relative;overflow:hidden;font-family:var(--font);font-size:13px;font-weight:550;
  background:transparent;color:var(--text2);border:1px solid transparent;
  border-radius:10px;padding:8px 12px;cursor:pointer;
  transition:all .2s var(--ease);display:inline-flex;align-items:center;gap:7px
}
.nav-btn:hover{color:var(--text);background:var(--panel);border-color:var(--stroke)}
.nav-btn:active{transform:scale(.97)}
.nav-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* уровень в шапке */
.hud-level{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;
  border-radius:999px;border:1px solid var(--stroke);background:var(--panel);
  cursor:pointer;font-family:var(--font);color:var(--text);font-size:12.5px;
  transition:border-color .2s,background .2s,transform .2s var(--ease)
}
.hud-level:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--panel2);transform:translateY(-1px)}
.hud-ring{position:relative;width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center}
.hud-ring svg{position:absolute;inset:0;width:30px;height:30px;transform:rotate(-90deg)}
.hud-ring circle{fill:none;stroke-width:3}
.hud-ring .ring-bg{stroke:color-mix(in srgb,var(--text) 14%,transparent)}
.hud-ring .ring-fill{
  stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:100.53;transition:stroke-dashoffset .7s var(--ease)
}
.hud-ring b{font-size:11.5px;font-weight:750;font-family:var(--mono);position:relative}
.hud-level-meta{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.hud-level-meta span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);font-weight:700}
.hud-level-meta b{font-size:12.5px;font-weight:650}

.hud-tickets{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--text);font-size:13px;font-weight:650;cursor:pointer;font-family:var(--mono);
  transition:transform .2s var(--ease),background .2s
}
.hud-tickets:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.hud-tickets svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hud-tickets.bump{animation:pop .4s var(--bounce)}

.hud-quests{position:relative}
.hud-quests-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--warn);color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center;font-family:var(--mono);
  box-shadow:0 0 0 2px var(--bg)
}

/* кнопка музыки */
.hud-music.off{color:var(--text3);opacity:.55}
.hud-music.off svg{stroke:var(--text3)}
.hud-music:not(.off) svg{animation:musicBob 1.6s ease-in-out infinite}
@keyframes musicBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}

/* переключатель оформления */
.theme-switch{
  display:flex;gap:2px;padding:3px;border-radius:12px;
  border:1px solid var(--stroke);background:var(--panel)
}
.theme-btn{
  width:30px;height:28px;border-radius:9px;border:none;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--text3);
  transition:all .22s var(--ease)
}
.theme-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-btn:hover{color:var(--text);background:var(--panel2)}
.theme-btn.on{background:var(--panel3);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18)}
html[data-theme="kids"] .theme-btn.on{background:var(--accent);color:#fff}

/* ============ HERO ============ */
.hero{max-width:1220px;margin:0 auto;padding:74px 26px 0;position:relative}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.orb{
  position:absolute;border-radius:50%;filter:blur(70px);
  animation:aurora 16s ease-in-out infinite
}
.orb.o1{width:330px;height:330px;background:color-mix(in srgb,var(--accent) 30%,transparent);top:-40px;left:2%}
.orb.o2{width:300px;height:300px;background:color-mix(in srgb,var(--accent2) 24%,transparent);top:20px;right:6%;animation-delay:-5s}
.orb.o3{width:250px;height:250px;background:color-mix(in srgb,var(--warn) 16%,transparent);bottom:-80px;left:48%;animation-delay:-9s}
html[data-theme="kids"] .orb{filter:blur(80px);opacity:.75}

.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:650;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent);padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  margin-bottom:20px;animation:fadeUp .6s .05s both
}
.hero-kicker i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulseGlow 2.4s infinite;font-style:normal
}
.hero-title{
  font-family:var(--display);
  font-size:clamp(36px,6.2vw,72px);line-height:1.03;letter-spacing:-.045em;
  font-weight:700;max-width:920px;animation:fadeUp .7s .08s both;text-wrap:balance
}
html[data-theme="kids"] .hero-title{letter-spacing:-.02em;font-weight:800}
.hero-title em{
  font-style:normal;position:relative;display:inline-block;
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.hero-sub{
  font-size:17px;color:var(--text2);max-width:530px;margin-top:20px;line-height:1.6;
  animation:fadeUp .7s .16s both
}
html[data-theme="kids"] .hero-sub{font-size:17.5px;font-weight:500}
.hero-note{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12.5px;color:var(--text3);font-family:var(--mono);
  animation:fadeUp .7s .22s both
}
.hero-note::before{content:"";width:18px;height:1px;background:var(--text3)}

.search-wrap{margin:28px 0 0;max-width:440px;position:relative;animation:fadeUp .7s .26s both}
#search{
  width:100%;padding:14px 18px 14px 44px;border-radius:14px;
  border:1px solid var(--stroke2);background:var(--panel);
  color:var(--text);font-size:14.5px;font-family:var(--font);outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
  backdrop-filter:blur(8px)
}
#search::placeholder{color:var(--text3)}
#search:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)
}
html[data-theme="kids"] #search{border-width:2px;border-radius:20px;font-weight:600}
.search-wrap::before{
  content:"";position:absolute;left:16px;top:50%;width:15px;height:15px;
  transform:translateY(-50%);
  background:currentColor;color:var(--text3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E") center/contain no-repeat
}
.search-wrap:focus-within::before{color:var(--accent)}

/* ============ ПРОГРЕСС НА ГЛАВНОЙ ============ */
.progress-strip{
  margin:22px 0 0;max-width:880px;display:flex;gap:14px;align-items:stretch;
  animation:fadeUp .7s .32s both;flex-wrap:wrap
}
.ps-level{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r);border:1px solid var(--stroke);
  background:var(--card);cursor:pointer;min-width:196px;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
  text-align:left;color:var(--text);font-family:var(--font)
}
.ps-level:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--shadow-soft)}
.ps-ring{position:relative;width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center}
.ps-ring svg{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.ps-ring circle{fill:none;stroke-width:4}
.ps-ring .ring-bg{stroke:color-mix(in srgb,var(--text) 12%,transparent)}
.ps-ring .ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100.53;transition:stroke-dashoffset .8s var(--ease)}
.ps-ring b{font-size:15px;font-weight:750;font-family:var(--mono)}
.ps-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.ps-meta .ps-top{display:flex;align-items:baseline;gap:6px;font-size:12.5px;font-weight:650}
.ps-meta .ps-top span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:700}
.ps-bar{width:100%;height:5px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.ps-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .7s var(--ease)}
.ps-meta small{font-size:10.5px;color:var(--text3);font-family:var(--mono)}

.ps-quests{
  flex:1 1 320px;min-width:250px;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--stroke);background:var(--card);
  display:flex;flex-direction:column;gap:9px
}
.ps-quests-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ps-quests-head b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:700}
.ps-quests-head button{
  background:none;border:none;color:var(--accent);font-size:11.5px;font-weight:650;
  cursor:pointer;font-family:var(--font);padding:2px 0
}
.ps-quests-head button:hover{text-decoration:underline}
.pp-quest{display:flex;flex-direction:column;gap:5px}
.ppq-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600}
.ppq-r{color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:700}
.ppq-bar{height:4px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.ppq-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);opacity:.75;transition:width .6s var(--ease)}
.ppq-foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--text3);font-family:var(--mono)}
.pp-quest.ready .ppq-bar i{background:var(--ok)}
.pp-quest.done{opacity:.55}
.ppq-claim{
  border:none;border-radius:6px;background:var(--accent);color:#0a0b0e;
  font-size:10px;font-weight:800;padding:3px 7px;cursor:pointer;font-family:var(--font);
  letter-spacing:.02em;animation:pulseGlow 2s infinite
}
.ps-tickets{
  flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:12px 18px;border-radius:var(--r);
  border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);cursor:pointer;
  color:var(--text);font-family:var(--font);text-align:left;
  transition:transform .25s var(--ease),background .25s
}
.ps-tickets:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.ps-tickets b{font-size:22px;font-weight:750;font-family:var(--mono);line-height:1.1}
.ps-tickets span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:700}

/* ============ AD ============ */
.ad-slot{max-width:1220px;margin:34px auto 0;padding:0 26px;position:relative}
.ad-label{
  display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);font-family:var(--mono);margin-bottom:8px
}
.ad-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.8}
.ad-body{
  display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:var(--r);
  border:1px solid var(--stroke);position:relative;overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,transparent),color-mix(in srgb,var(--accent2) 5%,transparent) 55%,transparent);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s
}
html[data-theme="kids"] .ad-body{background:#fff;border-width:2px;box-shadow:0 8px 0 rgba(24,66,122,.08)}
.ad-body::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  background-size:250% 100%;background-position:-220% 0
}
.ad-body:hover{
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);transform:translateY(-2px);
  box-shadow:var(--shadow-soft)
}
.ad-body:hover::after{animation:shimmer 1.1s ease}
.ad-art{
  width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  animation:floatY 5s ease-in-out infinite
}
.ad-art svg{width:25px;height:25px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ad-copy{flex:1;min-width:190px;position:relative;z-index:1}
.ad-copy h3{font-size:16px;font-weight:650;letter-spacing:-.01em;margin-bottom:3px;font-family:var(--display)}
.ad-copy p{font-size:13px;color:var(--text2);line-height:1.5}
.ad-cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  font-size:13.5px;font-weight:650;color:var(--accent);text-decoration:none;
  transition:gap .2s var(--ease),opacity .2s;font-family:var(--mono)
}
.ad-cta:hover{gap:12px;opacity:.85}
.ad-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ============ MARQUEE ============ */
.marquee{
  margin:44px 0 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),color-mix(in srgb,var(--accent2) 6%,transparent));
  overflow:hidden;white-space:nowrap;position:relative
}
.marquee-track{
  display:inline-flex;gap:30px;padding:10px 0;animation:marquee 34s linear infinite;
  font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:30px}
.marquee-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7}

/* ============ FILTERS ============ */
.filters{
  max-width:1220px;margin:0 auto;padding:30px 26px 4px;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center
}
.filters::before{
  content:"фильтр";font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);font-family:var(--mono);margin-right:6px
}
.chip{
  position:relative;overflow:hidden;padding:8px 15px;border-radius:999px;
  border:1px solid var(--stroke);background:transparent;color:var(--text2);
  font-size:12.5px;font-weight:550;cursor:pointer;font-family:var(--font);
  transition:all .2s var(--ease)
}
.chip:hover{color:var(--text);border-color:var(--stroke2);background:var(--panel)}
.chip.active{
  background:var(--accent);color:#0a0b0e;border-color:var(--accent);font-weight:700;
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 24%,transparent)
}
html[data-theme="kids"] .chip{border-width:2px;padding:9px 17px;font-weight:650}
.chip:active{transform:scale(.97)}

/* ============ GRID / CARDS ============ */
.grid{
  max-width:1220px;margin:0 auto;padding:16px 26px 38px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:15px
}
.card{
  position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;
  border:1px solid var(--stroke);background:var(--card);
  opacity:1;animation:cardIn .62s var(--ease) var(--d,0s) backwards;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;
  will-change:transform;transform-style:preserve-3d
}
/* блик, который пробегает по карточке при её появлении */
.card::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:46%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 45%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.16) 55%,transparent);
  opacity:0;transform:translateX(-130%) skewX(-18deg);
  animation:cardSheen 1.05s var(--ease) calc(var(--d,0s) + .16s) 1 both
}
.card:hover{
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:var(--shadow);z-index:4
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%);
  opacity:0;transition:opacity .35s
}
.card:hover::after{opacity:1}
html[data-theme="kids"] .card{border-width:2px;box-shadow:0 6px 0 rgba(24,66,122,.07)}
html[data-theme="kids"] .card:hover{box-shadow:0 12px 0 rgba(24,66,122,.1),0 18px 34px rgba(24,66,122,.14)}
.card-visual{
  height:122px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--stroke);background:var(--card-visual)
}
.card-visual svg{display:block;width:100%;height:100%;transition:transform .6s var(--ease)}
.card:hover .card-visual svg{transform:scale(1.07)}
.card-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
  background-size:250% 100%;background-position:-220% 0;pointer-events:none
}
.card:hover .card-visual::after{animation:shimmer 1.05s ease}
.card-info{padding:13px 15px 15px;position:relative;z-index:1}
.card-info h3{font-size:14.5px;font-weight:650;letter-spacing:-.01em;margin-bottom:3px;font-family:var(--display)}
.card-info p{font-size:12px;color:var(--text2);line-height:1.45;min-height:34px}
html[data-theme="kids"] .card-info h3{font-size:15.5px;font-weight:800}
.tag{
  display:inline-block;margin-top:9px;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:3.5px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text3);border:1px solid var(--stroke);
  transition:color .25s,border-color .25s,background .25s
}
.card:hover .tag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.card[data-cat="Аркада"] .tag{color:#ff9a80;border-color:rgba(255,122,89,.26);background:rgba(255,122,89,.08)}
.card[data-cat="Головоломка"] .tag{color:#8fb8ff;border-color:rgba(110,168,255,.26);background:rgba(110,168,255,.08)}
.card[data-cat="Логика"] .tag{color:#6fe3ab;border-color:rgba(79,227,161,.24);background:rgba(79,227,161,.08)}
.card[data-cat="Удача"] .tag{color:#ffd166;border-color:rgba(255,204,77,.24);background:rgba(255,204,77,.08)}
.card[data-cat="Реакция"] .tag{color:#d99cff;border-color:rgba(217,140,255,.24);background:rgba(217,140,255,.08)}
html[data-theme="kids"] .card[data-cat] .tag{color:#12263f;background:#eef7ff;border-color:rgba(23,58,110,.16)}

.card-help{
  position:absolute;top:9px;right:9px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;z-index:3;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,12,16,.55);
  color:#e8ecf4;backdrop-filter:blur(6px);
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s
}
.card-help svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card-help:hover{transform:scale(1.12);background:var(--accent);color:#0a0b0e;border-color:var(--accent)}
html[data-theme="kids"] .card-help{background:#fff;border:2px solid var(--accent);color:var(--text)}

.card-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:2
}
.card-progress i{display:block;height:100%;background:var(--accent);opacity:.55;width:0;transition:width .6s var(--ease)}
.card.played .card-progress i{width:100%}
.card-marker{
  position:absolute;top:9px;left:9px;font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;z-index:3;
  background:rgba(10,12,16,.6);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  backdrop-filter:blur(6px)
}
html[data-theme="kids"] .card-marker{background:#fff;border:2px solid var(--accent);color:var(--text)}

.empty-hint{text-align:center;color:var(--text3);font-size:14px;padding:40px 0;font-family:var(--mono)}

/* ============ JUNK ============ */
.junk{max-width:1220px;margin:0 auto 50px;padding:0 26px}
.junk-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.junk-head h3{font-size:20px;font-weight:650;letter-spacing:-.02em;font-family:var(--display)}
.junk-sub{font-size:12px;color:var(--text3)}
.junk-body{
  display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--stroke);background:var(--card);flex-wrap:wrap;
  transition:border-color .3s
}
.junk-body:hover{border-color:var(--stroke2)}
.junk-item{
  width:62px;height:62px;flex:0 0 62px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  transition:transform .3s var(--ease),border-color .3s
}
.junk-item svg{width:33px;height:33px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.junk-item.rolling{animation:pop .38s ease}
.junk-item.rolling svg{opacity:1}
.junk-meta{flex:1;min-width:150px}
.junk-name{font-size:14.5px;font-weight:600}
.junk-rarity{
  font-size:10.5px;color:var(--text3);margin-top:3px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;font-family:var(--mono);min-height:14px
}
.junk-rarity.common{color:var(--text2)}
.junk-rarity.rare{color:var(--accent2)}
.junk-rarity.epic{color:#d99cff}
.junk-rarity.legendary{color:var(--accent)}
.junk-log{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;min-height:34px}
.junk-log span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:var(--panel);border:1px solid var(--stroke);
  animation:bounceIn .32s ease
}
.junk-log svg{width:18px;height:18px;stroke:var(--text2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.junk-log span:first-child{border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* ============ GAME VIEW ============ */
.game-view{
  display:none;position:fixed;inset:0;z-index:200;background:var(--bg);flex-direction:column;
  height:100vh;height:100dvh
}
.game-view.active{display:flex;animation:fadeIn .22s ease}
.game-header{
  background:var(--header);border-bottom:1px solid var(--stroke);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  padding:11px 24px;display:flex;align-items:center;gap:14px;
  padding-top:calc(11px + env(safe-area-inset-top));
  padding-left:calc(24px + env(safe-area-inset-left));
  padding-right:calc(24px + env(safe-area-inset-right));
  animation:slideDown .4s var(--ease)
}
.back-btn{
  background:var(--panel);border:1px solid var(--stroke);font-size:13px;color:var(--text2);
  cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:550;
  padding:8px 12px;border-radius:10px;font-family:var(--font);
  transition:all .2s var(--ease)
}
.back-btn:hover{color:var(--text);border-color:var(--stroke2);background:var(--panel2)}
.back-btn:active{transform:scale(.97)}
.back-btn svg{width:15px;height:15px;fill:currentColor}
.game-title{font-size:17px;font-weight:650;letter-spacing:-.01em;animation:fadeUp .4s .05s both;font-family:var(--display)}
.game-help-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--stroke2);
  background:var(--panel);color:var(--text2);cursor:pointer;display:grid;place-items:center;
  transition:all .2s var(--ease);flex:0 0 28px
}
.game-help-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:scale(1.08)}
.game-help-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.game-score{
  margin-left:auto;font-size:12.5px;font-weight:700;font-family:var(--mono);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);padding:5px 11px;border-radius:8px;
  min-height:28px;display:flex;align-items:center
}
.game-score:empty{display:none}
.game-score.bump{animation:pop .35s var(--bounce)}
.game-body{
  flex:1;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  padding-left:calc(24px + env(safe-area-inset-left));
  padding-right:calc(24px + env(safe-area-inset-right))
}
.game-stage{
  display:flex;flex-direction:column;align-items:center;gap:15px;max-width:560px;width:100%;
  animation:scaleIn .35s var(--ease) both
}
.game-stage canvas{
  border-radius:14px;border:1px solid var(--stroke);max-width:100%;
  touch-action:none;background:var(--card-visual);box-shadow:var(--shadow-soft)
}

/* ---------- Широкий / полноэкранный режим ----------
   Игра занимает весь экран: шапка сжимается до одной строки, отступы
   минимальные, поле тянется до --board — это меньшая из доступных
   сторон, её считает fitStage() в core.js. */
.game-wide-btn svg{transform:none;transition:transform .25s var(--ease)}
.game-view.wide .game-header{
  padding:5px 12px;gap:9px;min-height:0;
  padding-top:calc(5px + env(safe-area-inset-top));
  padding-left:calc(12px + env(safe-area-inset-left));
  padding-right:calc(12px + env(safe-area-inset-right))
}
.game-view.wide .back-btn{padding:6px 10px;font-size:12px}
.game-view.wide .game-title{font-size:14px}
.game-view.wide .game-help-btn{width:24px;height:24px;flex-basis:24px}
.game-view.wide .game-help-btn svg{width:13px;height:13px}
.game-view.wide .game-score{padding:3px 9px;font-size:11.5px;min-height:24px}
.game-view.wide .game-body{
  padding:8px;overflow:hidden;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  padding-left:calc(8px + env(safe-area-inset-left));
  padding-right:calc(8px + env(safe-area-inset-right))
}
.game-view.wide .game-stage{
  max-width:none;width:100%;height:100%;gap:8px;justify-content:center
}
.game-view.wide .game-stage canvas{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:10px
}
/* Поля-сетки растягиваем до квадрата по меньшей стороне экрана.
   !important нужен: игры задают width/height инлайном под узкую колонку. */
.game-view.wide .g-grid,
.game-view.wide .g-tiles,
.game-view.wide .memory-grid,
.game-view.wide .simon-pad,
.game-view.wide .g-board,
.game-view.wide .g-cells{
  width:min(100%,var(--board,760px))!important;
  max-width:none!important;
  margin:0 auto!important;
  gap:clamp(4px,calc(var(--board,760px) * .012),12px)!important
}
.game-view.wide .g-cell{
  height:auto!important;aspect-ratio:1;
  font-size:clamp(13px,calc(var(--board,760px) * .033),34px)!important
}
.game-view.wide .g-tile{font-size:clamp(13px,calc(var(--board,760px) * .038),40px)!important}
.game-view.wide .g-prompt{font-size:clamp(20px,calc(var(--board,760px) * .05),40px)}
.game-view.wide .g-big{font-size:clamp(30px,calc(var(--board,760px) * .09),72px)}
.game-view.wide .game-controls{padding-bottom:0;gap:8px}
.game-view.wide .game-controls .game-btn{padding:9px 18px;font-size:12.5px}
.game-view.wide .g-hint{display:none}
.game-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}

/* ============ ТАЧ-УПРАВЛЕНИЕ ============ */
.g-dpad{
  display:grid;grid-template-columns:repeat(3,var(--dp,52px));grid-template-rows:repeat(3,var(--dp,52px));
  gap:6px;margin:0 auto;touch-action:none;user-select:none
}
.g-dpad-btn{
  border-radius:14px;border:1px solid var(--stroke2);background:var(--panel);
  color:var(--text);display:grid;place-items:center;cursor:pointer;
  transition:background .12s,transform .12s,border-color .12s;padding:0;
  -webkit-tap-highlight-color:transparent
}
.g-dpad-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g-dpad-btn.up{grid-area:1/2}
.g-dpad-btn.left{grid-area:2/1}
.g-dpad-btn.right{grid-area:2/3}
.g-dpad-btn.down{grid-area:3/2}
.g-dpad-btn.on,.g-dpad-btn:active{
  background:var(--accent);border-color:var(--accent);color:#0a0b0e;transform:scale(.94)
}
html[data-theme="kids"] .g-dpad-btn{border-radius:16px;border-width:2px;background:#fff}

.g-pad{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;touch-action:none;user-select:none}
.g-pad-btn{
  min-width:74px;height:56px;padding:0 18px;border-radius:14px;
  border:1px solid var(--stroke2);background:var(--panel);color:var(--text);
  font-family:var(--font);font-size:14px;font-weight:650;cursor:pointer;
  display:grid;place-items:center;transition:background .12s,transform .12s;
  -webkit-tap-highlight-color:transparent
}
.g-pad-btn.wide{min-width:140px}
.g-pad-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-pad-btn.on,.g-pad-btn:active{background:var(--accent);border-color:var(--accent);color:#0a0b0e;transform:scale(.96)}
html[data-theme="kids"] .g-pad-btn{border-radius:16px;border-width:2px;background:#fff}

.g-stick{
  position:relative;width:118px;height:118px;border-radius:50%;margin:0 auto;
  border:1px solid var(--stroke2);background:color-mix(in srgb,var(--text) 5%,transparent);
  touch-action:none;user-select:none
}
.g-stick-knob{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:var(--accent);opacity:.85;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent);
  transition:transform .08s linear;pointer-events:none
}
.game-btn{
  position:relative;overflow:hidden;padding:11px 22px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  font-size:13.5px;font-weight:650;cursor:pointer;font-family:var(--font);
  background:var(--accent);color:#0a0b0e;
  transition:transform .18s var(--ease),box-shadow .25s,filter .2s;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 18%,transparent)
}
.game-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 30%,transparent);filter:brightness(1.05)}
.game-btn:active{transform:scale(.97)}
.game-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.game-btn.secondary{
  background:var(--panel2);color:var(--text);border-color:var(--stroke2);
  box-shadow:none
}
.game-btn.secondary:hover{background:var(--panel3);box-shadow:none}
html[data-theme="kids"] .game-btn{border-radius:16px;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 55%,#00000030)}
html[data-theme="kids"] .game-btn:hover{transform:translateY(0);box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 55%,#00000030)}
html[data-theme="kids"] .game-btn:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 55%,#00000030)}

/* ============ COMMON GAME UI ============ */
.g-grid{display:grid;gap:8px;justify-content:center;margin:0 auto}
.g-cell{
  display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;
  font-weight:600;user-select:none;
  background:var(--panel);color:var(--text);font-size:clamp(14px,4vw,22px);
  border:1px solid var(--stroke);
  transition:transform .14s var(--ease),background .2s,border-color .2s
}
.g-cell:hover{background:var(--panel2);border-color:var(--stroke2);transform:translateY(-1px)}
.g-cell.sel{background:color-mix(in srgb,var(--accent2) 16%,transparent);border-color:color-mix(in srgb,var(--accent2) 50%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 28%,transparent)}
.g-cell.done{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);cursor:default;border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-theme="kids"] .g-cell{border-radius:14px;border-width:2px;background:#fff}
.g-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.g-stat{font-size:12px;color:var(--text3);text-align:center;font-weight:550;font-family:var(--mono)}
.g-prompt{font-size:clamp(18px,4.5vw,26px);font-weight:650;letter-spacing:-.02em;text-align:center;min-height:1.4em;font-family:var(--display)}
.g-hint{font-size:12.5px;color:var(--text3);text-align:center;max-width:390px;line-height:1.55}
.g-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:340px;margin:0 auto}
.g-tile{
  border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:clamp(15px,4.5vw,22px);aspect-ratio:1;transition:background .18s,color .18s;
  border:1px solid color-mix(in srgb,var(--text) 7%,transparent)
}
.g-tile:not([data-val="0"]){animation:tilePop .25s var(--bounce)}
.g-tile.merged{animation:mergePop .28s var(--bounce)}
.g-tile[data-val="0"]{background:color-mix(in srgb,var(--text) 3%,transparent);border-color:transparent}
.g-tile[data-val="2"]{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.g-tile[data-val="4"]{background:color-mix(in srgb,var(--text) 13%,transparent);color:var(--text)}
.g-tile[data-val="8"]{background:rgba(255,204,77,.20);color:#ffd166}
.g-tile[data-val="16"]{background:rgba(255,154,128,.24);color:#ff9a80}
.g-tile[data-val="32"]{background:rgba(255,122,89,.34);color:#ffb39e}
.g-tile[data-val="64"]{background:rgba(255,122,89,.6);color:#fff}
.g-tile[data-val="128"]{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--accent)}
.g-tile[data-val="256"]{background:color-mix(in srgb,var(--accent) 44%,transparent);color:#0d1206}
.g-tile[data-val="512"]{background:color-mix(in srgb,var(--accent) 64%,transparent);color:#0d1206}
.g-tile[data-val="1024"]{background:color-mix(in srgb,var(--accent2) 58%,transparent);color:#04121a;font-size:clamp(12px,3vw,17px)}
.g-tile[data-val="2048"]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08090c;font-size:clamp(12px,3vw,17px);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 45%,transparent)}
.g-card{
  background:var(--panel);border:1px solid var(--stroke);border-radius:14px;
  padding:16px 20px
}
.g-big{font-size:clamp(26px,7vw,42px);font-weight:700;letter-spacing:-.03em;font-family:var(--mono)}
.g-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;border-radius:10px}

/* ============ КУБИКИ И МОНЕТА: 3D-анимации ============ */
.g-dice-row{perspective:900px;gap:18px}
.g-die{
  width:clamp(64px,18vw,88px);height:clamp(64px,18vw,88px);
  display:flex;align-items:center;justify-content:center;padding:12px;
  color:var(--accent);user-select:none;transform-style:preserve-3d;
  box-shadow:0 10px 24px color-mix(in srgb,var(--text) 12%,transparent);
  will-change:transform
}
.g-die svg{width:100%;height:100%}
.g-die.toss{animation:diceToss .62s cubic-bezier(.3,.9,.4,1.2) both}
.g-coin{
  width:clamp(96px,26vw,130px);height:clamp(96px,26vw,130px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  margin:0 auto;color:var(--accent);user-select:none;
  border-radius:50%!important;transform-style:preserve-3d;
  box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 22%,transparent),
             inset 0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent);
  will-change:transform
}
.g-coin svg{width:100%;height:100%}
.g-coin.flip{animation:coinFlip .72s cubic-bezier(.3,.8,.4,1) both}
.g-prompt.rolling{opacity:.45;animation:shimmerText 1s linear infinite}
.g-prompt.landed{animation:pop .42s var(--bounce)}

@keyframes diceToss{
  0%{transform:translateY(0) rotateX(0) rotateZ(0) scale(1)}
  30%{transform:translateY(-46px) rotateX(-180deg) rotateZ(14deg) scale(1.06)}
  60%{transform:translateY(-12px) rotateX(-320deg) rotateZ(-8deg) scale(1.02)}
  80%{transform:translateY(4px) rotateX(-360deg) rotateZ(3deg) scale(.97)}
  100%{transform:translateY(0) rotateX(-360deg) rotateZ(0) scale(1)}
}
@keyframes coinFlip{
  0%{transform:translateY(0) rotateY(0) rotateZ(0) scale(1)}
  25%{transform:translateY(-52px) rotateY(420deg) rotateZ(-6deg) scale(1.05)}
  55%{transform:translateY(-26px) rotateY(760deg) rotateZ(4deg) scale(1.02)}
  80%{transform:translateY(3px) rotateY(1080deg) rotateZ(-1deg) scale(.97)}
  100%{transform:translateY(0) rotateY(1080deg) rotateZ(0) scale(1)}
}
@keyframes shimmerText{0%{opacity:.3}50%{opacity:.8}100%{opacity:.3}}

/* ---------- Слоты: барабаны ---------- */
.g-reel{
  width:clamp(62px,17vw,84px);height:clamp(80px,22vw,104px);
  display:flex;align-items:center;justify-content:center;padding:14px;
  overflow:hidden;color:var(--accent);border-radius:14px;
  background:var(--panel2);border:1px solid var(--stroke)
}
.g-reel svg{width:100%;height:100%}
.g-reel.spinning svg{animation:reelBlur .1s linear infinite}
.g-reel.landed{animation:reelLand .34s var(--bounce)}
@keyframes reelBlur{
  0%{transform:translateY(-16%) scaleY(.86);opacity:.5}
  100%{transform:translateY(16%) scaleY(.86);opacity:.5}
}
@keyframes reelLand{
  0%{transform:translateY(-22%) scale(.9)}
  60%{transform:translateY(4%) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}

/* ---------- Лотерея: шары ---------- */
.g-ball{
  width:clamp(34px,9vw,46px);height:clamp(34px,9vw,46px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-family:var(--mono);font-size:clamp(11px,3vw,14px);
  background:color-mix(in srgb,var(--text) 6%,transparent);
  color:var(--text);border:1px solid var(--stroke);
  animation:ballIn .3s var(--bounce) both
}
.g-ball.hit{
  background:var(--accent);color:#08090c;border-color:var(--accent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent);
  animation:ballHit .45s var(--bounce)
}
@keyframes ballIn{0%{opacity:0;transform:scale(.4) rotate(-40deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ballHit{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ---------- Скретч: стирание ---------- */
.g-scratch{animation:scratchIn .35s var(--ease) both}
@keyframes scratchIn{0%{opacity:0;transform:scale(.7) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ---------- Карты: раздача ---------- */
.g-deal{animation:dealIn .45s var(--bounce) both}

.g-playing-card{
  width:clamp(100px,26vw,132px);height:clamp(140px,36vw,184px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:0 auto;font-size:clamp(42px,12vw,60px);font-weight:700;padding:0;
  color:var(--text);font-family:var(--font);transform-style:preserve-3d;
  box-shadow:var(--shadow-soft);will-change:transform
}
.g-playing-card.red{color:#ff7a59}
.g-playing-card.flipping{animation:cardFlip .34s cubic-bezier(.4,.1,.3,1) both}
.g-playing-card.dealt{animation:cardDeal .4s var(--bounce)}
@keyframes cardFlip{
  0%{transform:rotateY(0) scale(1)}
  50%{transform:rotateY(78deg) scale(.92)}
  100%{transform:rotateY(0) scale(1)}
}
@keyframes cardDeal{
  0%{transform:translateY(-16px) scale(.94) rotate(-3deg)}
  60%{transform:translateY(4px) scale(1.03) rotate(1deg)}
  100%{transform:translateY(0) scale(1) rotate(0)}
}

/* ---------- Русская рулетка: камор�� ---------- */
.g-chamber{
  width:clamp(48px,13vw,64px);height:clamp(48px,13vw,64px);
  border-radius:50%!important;padding:13px;color:var(--text3);
  transition:transform .18s var(--ease),background .25s,color .25s
}
.g-chamber svg{width:100%;height:100%}
.g-chamber:hover{transform:scale(1.08)}
.g-chamber.done{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);cursor:default}
.g-chamber.boom{
  background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);
  animation:chamberBoom .5s ease
}
@keyframes chamberBoom{
  0%{transform:scale(1)}
  30%{transform:scale(1.35) rotate(-6deg)}
  60%{transform:scale(.94) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}

/* ============ MEMORY / SIMON ============ */
.memory-grid{display:grid;gap:10px;width:100%;max-width:380px;perspective:1200px;margin:0 auto}
.memory-card{aspect-ratio:1;position:relative;cursor:pointer;transform-style:preserve-3d}
.memory-card.deal{animation:dealIn .5s var(--bounce) both}
.memory-inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.2,.2,1)
}
.memory-card.flipped .memory-inner{transform:rotateY(180deg)}
.memory-face{
  position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;
  justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-size:clamp(20px,5vw,30px);border:1px solid var(--stroke);
  transition:box-shadow .3s,background .3s
}
.memory-face.front{
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent2) 16%,transparent));
  color:var(--accent);font-weight:700;
  background-size:200% 200%;animation:borderGlow 4s ease infinite
}
.memory-card:hover .memory-face.front{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent),0 10px 26px rgba(0,0,0,.35)}
.memory-face.back{background:var(--panel2);color:var(--text);transform:rotateY(180deg)}
.memory-card.matched .memory-face.back{
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);
  animation:matchPulse .7s ease;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)
}
.memory-card.matched{cursor:default}
.memory-card.matched .memory-face.back::after{
  content:"✓";position:absolute;top:4px;right:7px;font-size:11px;font-weight:700;color:var(--accent)
}
.memory-card.shake{animation:shake .45s ease}
html[data-theme="kids"] .memory-face{border-radius:16px;border-width:2px}

.simon-pad{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:300px;margin:0 auto}
.simon-btn{
  aspect-ratio:1;border-radius:16px;cursor:pointer;
  transition:transform .14s var(--ease),filter .2s,box-shadow .2s;
  filter:brightness(.72) saturate(.9);border:1px solid rgba(255,255,255,.12)
}
.simon-btn.lit{filter:brightness(1.25) saturate(1.1);transform:scale(1.05);box-shadow:0 0 34px currentColor}
.simon-btn:nth-child(1){background:#ff7a59;color:#ff7a59}
.simon-btn:nth-child(2){background:var(--accent);color:var(--accent)}
.simon-btn:nth-child(3){background:#4dd4ff;color:#4dd4ff}
.simon-btn:nth-child(4){background:#ffcc4d;color:#ffcc4d}

/* ============ OVERLAY ============ */
.overlay{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(4,5,7,.72);animation:overlayIn .2s ease;padding:20px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
html[data-theme="kids"] .overlay{background:rgba(18,38,63,.45)}
.overlay.active{display:flex}
.overlay-card{
  background:var(--panel2);
  border:1px solid var(--stroke2);border-radius:22px;
  padding:28px 34px;text-align:center;max-width:360px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
  animation:bounceIn .4s var(--ease);position:relative;overflow:hidden
}
html[data-theme="kids"] .overlay-card{border-radius:28px;border-width:3px;box-shadow:0 12px 0 rgba(24,66,122,.12)}
.overlay-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  animation:borderGlow 3s ease infinite
}
.overlay-card .emoji{
  display:grid;place-items:center;width:64px;height:64px;margin:0 auto 15px;
  border-radius:18px;background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);color:var(--accent);
  animation:foodBob 2.4s ease infinite
}
.overlay-card .emoji svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.overlay-card h2{font-size:21px;font-weight:680;letter-spacing:-.02em;margin-bottom:5px;font-family:var(--display)}
.overlay-card p{color:var(--text2);font-size:13.5px;margin-bottom:18px;line-height:1.5}
.overlay-xp{
  display:inline-flex;align-items:center;gap:6px;margin:-6px 0 16px;
  font-size:11.5px;font-weight:650;font-family:var(--mono);color:var(--text3);
  padding:5px 11px;border-radius:999px;border:1px solid var(--stroke);background:var(--panel)
}
.overlay-xp b{color:var(--accent);font-size:13px;font-weight:800}
.overlay-xp.win{border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.overlay-xp:empty{display:none}

/* ============ MODAL ============ */
.modal{
  position:fixed;inset:0;z-index:350;display:none;align-items:center;justify-content:center;
  background:rgba(4,5,7,.66);padding:20px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  perspective:1400px
}
html[data-theme="kids"] .modal{background:rgba(18,38,63,.4)}
.modal.open{display:flex;animation:fadeIn .2s ease}
.modal-card{
  position:relative;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  background:var(--panel2);border:1px solid var(--stroke2);border-radius:22px;
  padding:26px 26px 22px;box-shadow:var(--shadow);
  transform-style:preserve-3d;animation:modalIn .5s var(--ease) both;scrollbar-width:thin
}
.modal.closing .modal-card{animation:modalOut .26s var(--ease) forwards}
.modal.closing{animation:fadeIn .26s ease reverse forwards}
html[data-theme="kids"] .modal-card{border-radius:30px;border-width:3px;box-shadow:0 14px 0 rgba(24,66,122,.12)}
.modal-card::-webkit-scrollbar{width:6px}
.modal-card::-webkit-scrollbar-thumb{background:var(--stroke2);border-radius:99px}
.modal-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--stroke);background:var(--panel);color:var(--text2);
  cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1;
  transition:all .2s var(--ease);z-index:2
}
.modal-close:hover{color:var(--text);background:var(--panel3);transform:rotate(90deg)}
.modal-head{margin-bottom:18px;padding-right:34px}
.modal-kicker{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-family:var(--mono);font-weight:700;display:block;margin-bottom:6px
}
.modal-head h2{font-size:24px;font-weight:700;letter-spacing:-.025em;margin-bottom:5px;font-family:var(--display)}
.modal-head p{font-size:13px;color:var(--text2);line-height:1.55}
.modal-sub{
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);
  font-weight:700;margin:18px 0 9px;font-family:var(--mono)
}
.modal-actions{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.modal-actions .game-btn{flex:1;min-width:120px;text-align:center}

/* профиль */
.prof-level{display:flex;gap:16px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--stroke);background:var(--panel);margin-bottom:14px}
.prof-ring{position:relative;width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center}
.prof-ring svg{position:absolute;inset:0;width:72px;height:72px;transform:rotate(-90deg)}
.prof-ring circle{fill:none;stroke-width:4}
.prof-ring .ring-bg{stroke:color-mix(in srgb,var(--text) 12%,transparent)}
.prof-ring .ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100.53;transition:stroke-dashoffset .8s var(--ease)}
.prof-ring b{font-size:21px;font-weight:750;font-family:var(--mono)}
.prof-meta{flex:1;min-width:0}
.prof-xp{font-size:12.5px;font-weight:650;font-family:var(--mono);margin-bottom:6px}
.prof-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.prof-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.prof-hint{font-size:11px;color:var(--text3);margin-top:6px}
.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prof-grid div{
  padding:11px 8px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
  display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center
}
.prof-grid b{font-size:17px;font-weight:750;font-family:var(--mono);color:var(--accent)}
.prof-grid span{font-size:10px;color:var(--text3);letter-spacing:.03em}
.prof-rewards{margin-top:14px;padding:13px 15px;border-radius:12px;background:var(--panel);border:1px dashed var(--stroke2)}
.prof-rewards p{font-size:12.5px;color:var(--text2);line-height:1.55;margin-top:4px}

/* квесты */
.tickets-line{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  font-family:var(--mono);font-size:13px;margin-bottom:4px
}
.tickets-line svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tickets-line b{font-size:16px;font-weight:800}
.tickets-line span{color:var(--text3);font-size:11.5px}
.quest-list{display:flex;flex-direction:column;gap:8px}
.quest{
  display:flex;gap:11px;align-items:center;padding:11px 13px;border-radius:13px;
  border:1px solid var(--stroke);background:var(--panel);
  transition:border-color .25s,background .25s
}
.quest.ready{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.quest.done{opacity:.5}
.quest-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)
}
.quest-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.quest-body{flex:1;min-width:0}
.quest-name{font-size:13px;font-weight:650;margin-bottom:5px}
.quest-bar{height:4px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.quest-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);opacity:.8;transition:width .6s var(--ease)}
.quest-foot{display:flex;justify-content:space-between;margin-top:5px;font-size:10.5px;color:var(--text3);font-family:var(--mono)}
.quest-r{color:var(--accent);font-weight:700}
.quest-btn{
  flex:0 0 auto;border-radius:9px;border:1px solid var(--stroke);background:var(--panel2);
  color:var(--text3);font-size:11px;font-weight:700;padding:7px 11px;cursor:pointer;
  font-family:var(--font);transition:all .2s var(--ease);min-width:66px
}
.quest-btn.on{background:var(--accent);border-color:var(--accent);color:#0a0b0e;animation:pulseGlow 2s infinite}
.quest-btn:disabled{cursor:default}

/* магазин */
.skin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.skin{
  display:flex;gap:10px;align-items:center;padding:10px;border-radius:13px;
  border:1px solid var(--stroke);background:var(--panel);transition:border-color .25s,transform .25s
}
.skin:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.skin.active{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.skin-swatch{
  width:42px;height:42px;flex:0 0 42px;border-radius:11px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--a),var(--b));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)
}
.skin-swatch i{position:absolute;border-radius:50%;background:rgba(255,255,255,.28)}
.skin-swatch i:nth-child(1){width:16px;height:16px;top:-4px;left:-3px}
.skin-swatch i:nth-child(2){width:10px;height:10px;bottom:4px;right:6px;opacity:.7}
.skin-swatch i:nth-child(3){width:6px;height:6px;top:8px;right:7px;opacity:.5}
.skin-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.skin-meta b{font-size:12.5px;font-weight:650}
.skin-meta span{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-btn{
  flex:0 0 auto;border-radius:8px;border:1px solid var(--stroke);background:var(--panel2);
  color:var(--text);font-size:10.5px;font-weight:700;padding:6px 9px;cursor:pointer;
  font-family:var(--font);display:inline-flex;align-items:center;gap:3px;
  transition:all .2s var(--ease)
}
.skin-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.skin-btn.on{background:var(--accent);border-color:var(--accent);color:#0a0b0e;cursor:default}
.skin-btn.buy{border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent)}
.skin-btn.buy:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.skin-btn:disabled{opacity:.4;cursor:not-allowed}
.shop-note{font-size:11.5px;color:var(--text3);margin-top:12px;line-height:1.5}
.reset-link{
  display:block;margin:16px auto 0;background:none;border:none;color:var(--text3);
  font-size:11px;cursor:pointer;font-family:var(--font);text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px
}
.reset-link:hover{color:var(--warn)}

/* ---------- награды за уровни ---------- */
.frame-swatch{
  display:grid;place-items:center;background:transparent;
  border:3px solid var(--a);box-shadow:0 0 0 2px color-mix(in srgb,var(--b) 60%,transparent),inset 0 0 12px color-mix(in srgb,var(--b) 40%,transparent)
}
.frame-swatch i{width:20px;height:20px;border-radius:50%;background:linear-gradient(140deg,var(--a),var(--b))}

.lvl-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.lvl-badge{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:30px;font-weight:800;color:#0a0b0e;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 42%,transparent),inset 0 2px 0 rgba(255,255,255,.5);
  animation:lvlBadge .9s var(--bounce) both
}
@keyframes lvlBadge{
  0%{transform:scale(.3) rotate(-18deg);opacity:0}
  55%{transform:scale(1.14) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.lvl-prizes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 4px}
.lvl-prize{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:92px;padding:10px 12px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  animation:prizeIn .55s var(--bounce) both,prizeRing 2.6s ease-in-out .75s infinite
}
.lvl-prize:nth-child(2){animation-delay:.08s,.95s}
.lvl-prize:nth-child(3){animation-delay:.16s,1.15s}
@keyframes prizeIn{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
@keyframes prizeRing{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 26%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 0%,transparent)}
}
.lvl-prize-ico{display:grid;place-items:center;color:var(--accent);font-size:18px;height:20px}
/* пульс иконки приза — привлекает взгляд к тому, что дали */
.lvl-prize-ico{animation:prizeGlow 2.1s ease-in-out .6s infinite}
.lvl-prize-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lvl-prize b{font-size:14px;font-weight:750}
.lvl-prize span{font-size:10px;color:var(--text3)}
.lvl-next{font-size:11.5px;color:var(--text3);margin-top:6px}
.lvl-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:230px;overflow:auto}
.lvl-row{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  border:1px solid var(--stroke);background:var(--panel);font-size:11.5px
}
.lvl-row-lv{
  flex:0 0 26px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:800;
  background:var(--panel3);color:var(--text2)
}
.lvl-row-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvl-row-s{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);font-family:var(--mono)}
.lvl-row.done{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.lvl-row.done .lvl-row-lv{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.lvl-row.done .lvl-row-s{color:var(--ok)}
.lvl-row.near{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.lvl-row.near .lvl-row-lv{background:var(--accent);color:#0a0b0e}
.lvl-row.near .lvl-row-s{color:var(--accent);animation:pulseTxt 1.6s ease-in-out infinite}
@keyframes pulseTxt{0%,100%{opacity:.55}50%{opacity:1}}
.prof-next{font-size:11.5px;color:var(--text2);margin-top:2px}
.prof-level.has-frame .prof-ring{
  box-shadow:0 0 0 3px var(--fr),0 0 18px color-mix(in srgb,var(--fr2) 60%,transparent);
  border-radius:50%
}
html[data-frame] .hud-ring,
html[data-frame] .ps-ring{border-radius:50%;box-shadow:0 0 0 2px var(--frame,transparent)}
html[data-frame] .hud-level{border-color:color-mix(in srgb,var(--frame) 55%,transparent)}

/* помощь */
.help-block{padding:12px 15px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel);margin-bottom:8px}
.help-block p{font-size:13px;line-height:1.6;color:var(--text2);margin-top:4px}
.help-label{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  font-weight:700;font-family:var(--mono);display:block
}
.help-block.tip{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.help-block.tip .help-label{color:var(--accent)}

/* обучение */
.onb{text-align:center;padding:6px 4px}
.onb-art{
  width:76px;height:76px;margin:0 auto 16px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent);
  animation:floatY 4.4s ease-in-out infinite
}
.onb-art svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.onb .modal-kicker{display:block;margin-bottom:8px}
.onb h2{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;font-family:var(--display)}
.onb p{font-size:13.5px;color:var(--text2);line-height:1.6;max-width:380px;margin:0 auto}
.onb-dots{display:flex;gap:6px;justify-content:center;margin:18px 0 4px}
.onb-dots i{width:6px;height:6px;border-radius:50%;background:var(--stroke2);transition:all .3s var(--ease)}
.onb-dots i.on{width:18px;border-radius:99px;background:var(--accent)}
.onb-skip{
  display:block;margin:12px auto 0;background:none;border:none;color:var(--text3);
  font-size:11.5px;cursor:pointer;font-family:var(--font);padding:4px
}
.onb-skip:hover{color:var(--text2)}

/* ============ FOOTER ============ */
.footer{
  max-width:1220px;margin:0 auto;padding:26px 26px 50px;text-align:center;
  font-size:12px;color:var(--text3);position:relative;line-height:1.9;
  border-top:1px solid var(--stroke)
}
.footer .hand{color:var(--text2);font-weight:650;font-family:var(--display)}
.footer-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:color-mix(in srgb,var(--text) 16%,transparent);vertical-align:middle;margin:0 4px;cursor:pointer;
  transition:background .3s,transform .3s
}
.footer-dot:hover{background:var(--accent);transform:scale(1.5)}
.footer a{color:var(--text2);text-decoration:none;border-bottom:1px solid var(--stroke2)}
.footer a:hover{color:var(--accent);border-color:var(--accent)}

/* ============ TOAST ============ */
.secret-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,180%);
  background:var(--panel2);color:var(--text);padding:11px 19px;
  border-radius:12px;font-size:13px;font-weight:550;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:var(--shadow-soft);z-index:450;opacity:0;backdrop-filter:var(--blur);
  transition:transform .38s var(--ease),opacity .25s;max-width:88vw;text-align:center
}
.secret-toast.show{transform:translate(-50%,0);opacity:1}
html[data-theme="kids"] .secret-toast{border-radius:20px;border-width:2px}

body.chaos{--accent:#ff7a59;--accent2:#ffcc4d}
body.chaos .card{animation:pop 1.2s ease infinite}
body.levelup .hud-ring b{animation:pop .6s var(--bounce)}
/* вспышка на весь экран в момент нового уровня */
body.levelup::after{
  content:"";position:fixed;inset:0;z-index:340;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 62%);
  animation:lvlFlash 1.1s var(--ease) 1 both
}
body.levelup .hud-level{
  animation:hudKick .9s var(--bounce) 1;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 0 26px color-mix(in srgb,var(--accent) 45%,transparent)
}
@keyframes hudKick{
  0%{transform:scale(1)}
  30%{transform:scale(1.16) rotate(-2deg)}
  60%{transform:scale(1.04) rotate(1.5deg)}
  100%{transform:scale(1)}
}
body.night{--bg:#05060a}

/* ============ НАСТРОЙКИ ============ */
.set-group{margin-bottom:16px}
.set-group .modal-sub{margin-top:0}
.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:12px;border:1px solid var(--stroke);
  background:var(--panel);margin-bottom:7px;cursor:pointer;
  transition:border-color .2s,background .2s
}
.set-row:hover{border-color:var(--stroke2);background:var(--panel2)}
html[data-theme="kids"] .set-row{border-radius:16px;border-width:2px;background:#fff}
.set-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-txt b{font-size:13.5px;font-weight:650}
.set-txt span{font-size:11.5px;color:var(--text3);line-height:1.4}
.set-switch{position:relative;flex:0 0 42px;width:42px;height:24px}
.set-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.set-switch i{
  position:absolute;inset:0;border-radius:99px;background:color-mix(in srgb,var(--text) 14%,transparent);
  transition:background .22s var(--ease)
}
.set-switch i::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--panel2);box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .22s var(--bounce)
}
.set-switch input:checked + i{background:var(--accent)}
.set-switch input:checked + i::after{transform:translateX(18px)}
.set-range{
  flex:0 0 130px;height:4px;-webkit-appearance:none;appearance:none;border-radius:99px;
  background:color-mix(in srgb,var(--text) 14%,transparent);outline:none;cursor:pointer
}
.set-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 40%,transparent);cursor:pointer
}
.set-range::-moz-range-thumb{
  width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer
}
.set-themes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.set-theme{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:11px 12px;border-radius:11px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--text);cursor:pointer;font-family:var(--font);
  transition:border-color .2s,background .2s,transform .2s var(--ease)
}
.set-theme:hover{transform:translateY(-2px);border-color:var(--stroke2)}
.set-theme.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.set-theme b{font-size:12.5px;font-weight:650}
.set-theme span{font-size:10.5px;color:var(--text3)}
html[data-theme="kids"] .set-theme{border-radius:14px;border-width:2px}

/* спокойный режим: гасим декоративные анимации */
body.no-anim *,
body.no-anim *::before,
body.no-anim *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important
}
body.no-anim #cursor{display:none}

/* ============ THEME VEIL (дешёвый фейд вместо анимации на всём) ============ */
.theme-veil{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--bg);opacity:0;
  transition:opacity .14s ease
}
.theme-veil.on{opacity:.55}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ ДЕТСКАЯ ТЕМА: акценты ============ */
html[data-theme="kids"] .hero-kicker{
  background:#fff;border:2px solid var(--accent);color:var(--text);
  font-weight:800;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 35%,transparent)
}
html[data-theme="kids"] .hero-title{font-size:clamp(34px,7vw,66px)}
html[data-theme="kids"] .hero-title em{text-shadow:0 2px 0 color-mix(in srgb,var(--accent2) 35%,transparent)}
html[data-theme="kids"] .ad-art{border-radius:18px;border-width:2px;animation:wiggle 3.4s ease-in-out infinite}
html[data-theme="kids"] .junk-item{border-radius:20px;border-width:2px}
html[data-theme="kids"] .footer-dot{width:10px;height:10px;background:var(--accent);opacity:.5}
html[data-theme="kids"] .hud-level{border-width:2px;background:#fff}
html[data-theme="kids"] .hud-tickets{border-width:2px;background:#fff}
html[data-theme="kids"] .theme-switch{border-width:2px;background:#fff}
html[data-theme="kids"] .logo-badge{border-width:2px;background:#fff}
html[data-theme="kids"] .tag{border-width:1.5px}

/* ============ ADAPTIVE ============ */
@media(max-width:900px){
  .hud-level-meta{display:none}
  .hud-level{padding:4px}
  .progress-strip{gap:10px}
}
@media(max-width:760px){
  .header-inner{padding:10px 14px;gap:8px}
  .logo{font-size:14px;gap:8px}
  .logo-mark{width:30px;height:30px;border-radius:9px}
  .logo-text{display:none}
  .logo-badge{font-size:10px}
  .nav{gap:5px}
  /* переключатель тем прячем: те же темы есть в настройках */
  .theme-switch{display:none}
  .nav-btn{padding:7px 8px;font-size:11.5px}
  .nav-btn .nav-label{display:none}
  .theme-btn{width:26px;height:26px}
  .hero{padding:44px 16px 0}
  .hero-title{font-size:clamp(30px,9vw,44px)}
  .hero-sub{font-size:15px}
  .hero-note{font-size:11.5px}
  .search-wrap{margin-top:22px;max-width:none}
  .progress-strip{margin-top:18px;gap:9px}
  .ps-level{min-width:0;flex:1 1 100%;padding:10px 13px}
  .ps-quests{flex:1 1 100%;padding:11px 12px}
  .ps-tickets{flex:1 1 100%;flex-direction:row;align-items:baseline;gap:7px;padding:10px 14px}
  .ps-tickets b{font-size:18px}
  .ad-slot{margin-top:24px;padding:0 14px}
  .ad-body{padding:15px 16px;gap:13px;flex-wrap:wrap}
  .ad-art{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  .ad-art svg{width:21px;height:21px}
  .ad-copy h3{font-size:15px}
  .ad-copy p{font-size:12px}
  .marquee{margin-top:32px}
  .marquee-track{animation-duration:24s;font-size:10px;gap:20px}
  .marquee-track span{gap:20px}
  .filters{padding:24px 14px 4px;gap:6px}
  .grid{grid-template-columns:repeat(2,1fr);gap:11px;padding:12px 14px 28px}
  .card-visual{height:92px}
  .card-info{padding:10px 11px 12px}
  .card-info h3{font-size:13px}
  .card-info p{font-size:10.5px;min-height:28px}
  .card-help{width:22px;height:22px;top:7px;right:7px}
  .card-help svg{width:12px;height:12px}
  .tag{font-size:8.5px;padding:3px 6px;margin-top:7px}
  .junk{padding:0 14px;margin-bottom:38px}
  .junk-body{padding:14px 15px;gap:11px}
  .junk-item{width:52px;height:52px;flex-basis:52px}
  .junk-item svg{width:27px;height:27px}
  .memory-grid{max-width:310px;gap:8px}
  .game-header{padding:9px 13px;gap:9px}
  .game-title{font-size:15px}
  .game-body{padding:16px 12px}
  .game-stage{gap:12px}
  .modal{padding:12px}
  .modal-card{padding:22px 18px 18px;border-radius:18px;max-height:90vh}
  .modal-head h2{font-size:20px}
  .skin-grid{grid-template-columns:1fr}
  .prof-grid{grid-template-columns:repeat(2,1fr)}
  .onb h2{font-size:20px}
  .footer{padding:22px 16px 40px;font-size:11.5px}
}
@media(max-width:420px){
  .grid{grid-template-columns:1fr 1fr;gap:9px}
  .card-visual{height:82px}
  .card-info p{display:none}
  .card-info h3{font-size:12.5px}
  .hero-title{font-size:clamp(27px,8.6vw,36px)}
  .quest-btn{min-width:54px;padding:6px 8px;font-size:10px}
  .quest-ico{display:none}
  .ps-quests .pp-quest:nth-child(4){display:none}
}
/* очень узкие телефоны: шапка должна влезать в 360px без скролла */
@media(max-width:400px){
  .header-inner{padding:9px 10px;gap:6px}
  .nav{gap:3px}
  .nav-btn{padding:7px 6px}
  .hud-tickets{padding:6px 9px;gap:4px}
  .hud-level{padding:3px}
  .logo-badge{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  #cursor{display:none}
}

/* ============ ЛАНДШАФТ НА ТЕЛЕФОНЕ ============
   Высоты мало, поэтому контролы уходят вправо от поля, а поле
   занимает всю оставшуюся высоту. */
@media(max-height:520px) and (orientation:landscape){
  .header-inner{padding:7px 12px;gap:8px}
  .nav{gap:4px}
  .nav-btn{padding:6px 8px}
  .nav-btn .nav-label{display:none}
  .theme-switch{display:none}
  .game-view.wide .game-stage{
    flex-direction:row;flex-wrap:wrap;align-content:center;align-items:center;
    justify-content:center;gap:10px 14px
  }
  .game-view.wide .game-stage > canvas,
  .game-view.wide .game-stage > .g-tiles,
  .game-view.wide .game-stage > .g-grid,
  .game-view.wide .game-stage > .memory-grid,
  .game-view.wide .game-stage > .g-board,
  .game-view.wide .game-stage > .g-cells,
  .game-view.wide .game-stage > .simon-pad{flex:0 0 auto;margin-left:0!important;margin-right:0!important}
  .game-view.wide .game-stage > .game-controls,
  .game-view.wide .game-stage > .g-pad,
  .game-view.wide .game-stage > .g-dpad,
  .game-view.wide .game-stage > .g-stick,
  .game-view.wide .game-stage > .g-prompt,
  .game-view.wide .game-stage > .g-stat{
    flex:0 0 auto
  }
  .game-view.wide .g-dpad{--dp:44px;gap:5px}
  .game-view.wide .g-pad-btn{height:48px;min-width:60px}
  .game-view.wide .g-stick{width:96px;height:96px}
  .game-view.wide .game-header{padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:3px}
  .game-view.wide .game-title{font-size:13px}
}