:root {
  --bg1: #f6e9ff; --bg2: #ffe3ef;
  --accent: #c45aa8; --accent2: #9b6fd6;
  --text: #4a2f63; --muted: rgba(74,47,99,.6);
  --card: rgba(255,255,255,.72);
  --tileA: #fff4ea; --tileB: #ffeadf;
  --line: #c45aa8;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; }

/* ---- экраны ---- */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px);
}
.screen.active { display: flex; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

#scr-menu { justify-content: center; }
.menu-mochi { width: 132px; height: 120px; background: none !important; box-shadow: none !important; margin-bottom: 4px; }
.menu-mochi.sel { box-shadow: none !important; }
.logo { font-size: 64px; }
h1 { margin: 4px 0; font-size: 34px; }
h2 { margin: 0; font-size: 20px; }
h3 { margin: 0 0 10px; font-size: 16px; }
.sub { color: var(--muted); margin: 0 0 28px; }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(100%, 320px); }

/* ---- кнопки ---- */
.btn {
  border: 0; border-radius: 14px; padding: 10px 14px; font-weight: 600; font-size: 15px;
  background: var(--card); box-shadow: 0 2px 6px rgba(90,40,120,.12); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: scale(.97); }
.btn.big {
  padding: 16px; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
}
.btn.big.ghost { background: var(--card); color: var(--text); }
.btn.soon { opacity: .55; cursor: default; filter: saturate(.6); }
.btn.soon:active { transform: none; }
.badge { font-size: 12px; font-weight: 700; background: rgba(255,255,255,.35); border-radius: 999px; padding: 3px 8px; margin-left: 4px; }
.icon {
  border: 0; background: var(--card); border-radius: 12px; width: 42px; height: 42px;
  font-size: 18px; cursor: pointer; box-shadow: 0 2px 6px rgba(90,40,120,.12);
}
.icon.play { width: 54px; height: 54px; font-size: 22px; color: #fff; background: var(--accent); }
.icon.on { background: var(--accent2); }
.pill { background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 14px; }

.top {
  width: 100%; max-width: 520px; display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: 10px; margin-bottom: 12px;
}
.top h2 { text-align: center; }
.top > span:empty { width: 42px; }

.placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }

/* ---- поле ---- */
#board-wrap { position: relative; width: 100%; max-width: 520px; flex: 1; display: flex; align-items: center; justify-content: center; }
#board { display: grid; position: relative; }
#lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 4; }
#lines .glow { fill: none; stroke: #ffb3d6; stroke-linecap: round; stroke-linejoin: round; opacity: .45;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: draw .2s ease-out forwards, lfade .3s .4s forwards; }
#lines .bub { transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: bin .22s var(--in) cubic-bezier(.34,1.8,.6,1) forwards, bout .16s var(--out) ease-in forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lfade { to { opacity: 0; } }
@keyframes bin { to { transform: scale(1); } }
@keyframes bout { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ===== плитка с моти-зверушкой ===== */
.t { position: relative; margin: 2px; border-radius: 14px; cursor: pointer;
  background: var(--tileA); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 rgba(160,100,60,.12), 0 3px 6px rgba(120,60,80,.12); }
.t.alt { background: var(--tileB); }
.mochi { width: 90%; height: 90%; overflow: visible; pointer-events: none; }
.bodywrap, .eye, .blush ellipse, .earL, .earR, .pupil { transform-box: fill-box; }
.bodywrap { transform-origin: 50% 100%; }
.eye, .blush ellipse { transform-origin: center; }
.earL { transform-origin: 100% 100%; } .earR { transform-origin: 0% 100%; }
.pupil { transition: transform .25s ease; }

/* выражения */
.ec, .ex, .es, .mouth-o { display: none; }
.happy .eo, .sad .eo, .sleep .eo { display: none; }
.happy .ec { display: inline; } .sad .ex { display: inline; } .sleep .es { display: inline; }
.wow .mouth { display: none; } .wow .mouth-o { display: inline; }
.wow .eo { transform: scale(1.15); transform-box: fill-box; transform-origin: center; }

/* появление волной */
.t.appear { animation: appear .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d); }
@keyframes appear { from { transform: scale(0) translateY(20px); opacity: 0; } }

/* покой: дыхание + моргание */
.bodywrap { animation: breathe 3.4s ease-in-out infinite; animation-delay: var(--i, 0s); }
@keyframes breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.025,.975); } }
.blink .eye { animation: blink .22s ease; }
@keyframes blink { 50% { transform: scaleY(.1); } }

/* выбор: плюх, жмурится, щёчки, ушки */
.t.sel { background: #fff0c4; box-shadow: 0 0 0 3px #ffcf5a, 0 6px 14px rgba(255,170,0,.3); z-index: 2; }
.sel .bodywrap { animation: squish .5s cubic-bezier(.3,1.6,.5,1), sway 1.6s .5s ease-in-out infinite; }
@keyframes squish { 25% { transform: scale(1.18,.8); } 55% { transform: scale(.92,1.1) translateY(-6%); } }
@keyframes sway { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.blush { opacity: .65; }
.happy .blush, .sad .blush { opacity: 1; }
.happy .blush ellipse { animation: blushup .4s ease forwards; }
@keyframes blushup { to { transform: scale(1.35); } }
.happy .earL { animation: earL .5s ease; } .happy .earR { animation: earR .5s ease; }
@keyframes earL { 40% { transform: rotate(-14deg); } } @keyframes earR { 40% { transform: rotate(14deg); } }

/* не пара: обиделись */
.sad .bodywrap { animation: puff .5s ease; }
@keyframes puff { 30% { transform: scale(1.12,.92); } 60% { transform: scale(1.08,.95) translateX(-3%); } 80% { transform: translateX(3%); } }

/* подсказка */
.t.hint { animation: glow 1.1s ease-in-out infinite; z-index: 1; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px #9be7b4, 0 0 16px 4px rgba(80,200,120,.5); } }

/* пара: подложка тает, колобки прыгают дугой навстречу, чмок, исчезают */
.t { transition: background-color .25s, box-shadow .25s; }
.t.go, .t.meet, .t.bye { z-index: 3; background: transparent !important; box-shadow: none !important; pointer-events: none; }
.go .mochi { animation: hop .42s cubic-bezier(.45,0,.35,1) forwards; }
.go .bodywrap { animation: arc .42s ease-in-out forwards; }
@keyframes hop { to { transform: translate(var(--hx), var(--hy)); } }
@keyframes arc {
  0%   { transform: scale(1.12,.88); }
  20%  { transform: translateY(-28px) scale(.94,1.08); }
  55%  { transform: translateY(-52px) scale(1); }
  100% { transform: translateY(0) scale(1); } }
.meet .mochi, .bye .mochi { transform: translate(var(--hx), var(--hy)); }
.meet .bodywrap { animation: bump .28s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes bump {
  0%   { transform: scale(1.18,.82); }
  100% { transform: rotate(var(--tilt)) scale(1.05); } }
.bye .mochi { animation: poof .28s ease-in forwards; }
.bye .bodywrap { transform: rotate(var(--tilt)) scale(1.05); }
@keyframes poof { to { transform: translate(var(--hx), var(--hy)) scale(0); opacity: 0; } }

.kiss { position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%,-50%) scale(0);
  animation: kiss 1s cubic-bezier(.3,1.5,.5,1) forwards; filter: drop-shadow(0 3px 6px rgba(196,90,168,.35)); }
.kiss svg { width: 100%; height: 100%; display: block; }
@keyframes kiss {
  0%   { transform: translate(-50%,-50%) scale(0); }
  25%  { transform: translate(-50%,-80%) scale(1.25); }
  40%  { transform: translate(-50%,-85%) scale(1); }
  100% { transform: translate(-50%,-190%) scale(.8); opacity: 0; } }
.splash { position: absolute; z-index: 5; border-radius: 50%; pointer-events: none;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.06), inset 2px 2px 0 rgba(255,255,255,.7);
  transform: translate(-50%,-50%) scale(.3);
  animation: splash .6s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes splash { to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity: 0; } }

/* перемешивание */
.t.gather { z-index: 3; pointer-events: none; animation: gather .42s var(--d2, 0s) cubic-bezier(.45,-0.35,.75,.7) forwards; }
@keyframes gather {
  0%   { transform: none; }
  22%  { transform: translateY(-8px) scale(1.08,.94); }
  100% { transform: translate(var(--fx), var(--fy)) scale(.3) rotate(var(--rot)); opacity: .2; } }
.t.scatter { z-index: 3; animation: scatter .55s var(--d2, 0s) cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes scatter {
  from { transform: translate(var(--fx), var(--fy)) scale(.3) rotate(var(--rot)); opacity: .2; }
  35%  { opacity: 1; } }
.t.scatter .bodywrap { animation: land .4s calc(var(--d2, 0s) + .42s) ease-out; }
@keyframes land { 30% { transform: scale(1.16,.84); } 60% { transform: scale(.95,1.07); } }

/* сон */
.z { position: absolute; right: 14%; top: 4%; font-weight: 800; color: #8f7bd6; font-size: 13px;
  animation: zz 2s ease-in-out infinite; pointer-events: none; }
.z + .z { animation-delay: .7s; right: 4%; font-size: 10px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0,6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(8px,-14px); } }

/* частицы */
.p { position: absolute; left: 50%; top: 30%; pointer-events: none; font-size: 15px; z-index: 5;
  animation: pop .8s ease-out forwards; }
@keyframes pop { from { transform: translate(-50%,-50%) scale(.3); opacity: 1; }
  to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

.tools { display: flex; gap: 10px; margin-top: 12px; justify-content: center; align-items: center; }
.tool { border: 0; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; padding: 0;
  display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(160deg, #fff, #fbefff);
  box-shadow: 0 4px 10px rgba(150,70,160,.16), inset 0 -3px 0 rgba(155,111,214,.14);
  transition: transform .12s, background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.tool svg { width: 26px; height: 26px; }
.tool:active { transform: scale(.9); }
.tool.side { width: 46px; height: 46px; color: var(--accent2); opacity: .9; }
.tool.side svg { width: 22px; height: 22px; }
.tool.side:first-child { margin-right: 6px; } .tool.side:last-child { margin-left: 6px; }
.tool .off-ic, .tool.muted .on-ic { display: none; }
.tool.muted .off-ic { display: contents; }
.tool.muted { background: linear-gradient(160deg, #ffe0ec, #f3dcff); color: var(--accent); }

/* ---- настройки ---- */
.scroll { width: 100%; max-width: 520px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.card { background: var(--card); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.row { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; margin: 6px 0; }
.row span { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
input[type=range] { width: 100%; accent-color: var(--accent); }
.tracks { list-style: none; padding: 0; margin: 0 0 10px; }
.tracks li {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 10px; font-size: 15px;
}
.tracks li.playing { background: rgba(196,90,168,.12); font-weight: 600; }
.tracks li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tracks li button { border: 0; background: none; font-size: 16px; cursor: pointer; }
.tracks .empty { color: var(--muted); font-size: 14px; }
.add { width: 100%; }

/* ---- модалка ---- */
#modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255,182,214,.45), rgba(74,47,99,.45)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 20; }
#modal.show { display: flex; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; } }
.box { position: relative; width: min(100%, 340px); text-align: center; padding: 22px 20px 20px; border-radius: 28px;
  background: linear-gradient(180deg, #fff 0%, #fff7fb 100%);
  box-shadow: 0 20px 50px rgba(120,50,130,.28), 0 0 0 4px rgba(255,255,255,.55); }
#modal.show .box { animation: boxin .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes boxin { from { transform: translateY(30px) scale(.85); opacity: 0; } }
.box h2 { font-size: 22px; margin-top: 4px; }

.win-pair { display: flex; align-items: flex-end; justify-content: center; gap: 0; height: 92px; margin: -58px auto 6px; }
.wm { width: 92px; height: 84px; margin: 0; background: none !important; box-shadow: none !important; cursor: default; }
#wm-a { transform: translateX(14px) rotate(10deg); } #wm-b { transform: translateX(-14px) rotate(-10deg); }
#modal.show #wm-a { animation: wmA .7s .1s cubic-bezier(.3,1.6,.5,1) backwards; }
#modal.show #wm-b { animation: wmB .7s .1s cubic-bezier(.3,1.6,.5,1) backwards; }
@keyframes wmA { from { transform: translate(-50px, 20px) rotate(-20deg) scale(.6); opacity: 0; } }
@keyframes wmB { from { transform: translate(50px, 20px) rotate(20deg) scale(.6); opacity: 0; } }
.wm .bodywrap { animation: wmbob 1.8s ease-in-out infinite; }
#wm-b .bodywrap { animation-delay: .9s; }
@keyframes wmbob { 50% { transform: translateY(-5px) scale(1.02,.98); } }
.win-heart { width: 34px; height: 34px; align-self: flex-start; margin: 0 -10px; z-index: 2;
  filter: drop-shadow(0 3px 5px rgba(196,90,168,.4)); animation: beat 1.1s .6s ease-in-out infinite; }
#modal.show .win-heart { animation: hpop .5s .45s cubic-bezier(.3,1.8,.5,1) backwards, beat 1.1s 1s ease-in-out infinite; }
@keyframes hpop { from { transform: scale(0); } }
@keyframes beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(.95); } 45% { transform: scale(1.1); } }

.win-sub { margin: 6px 0 14px; color: var(--muted); font-size: 15px; }
.win-sub .ic-heart { width: 15px; height: 15px; }
.win-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.win-stats > div { background: #f7efff; border-radius: 16px; padding: 10px 4px 8px; display: flex; flex-direction: column; gap: 2px; }
#modal.show .win-stats > div { animation: up .4s ease backwards; }
#modal.show .win-stats > div:nth-child(1) { animation-delay: .35s; }
#modal.show .win-stats > div:nth-child(2) { animation-delay: .45s; }
#modal.show .win-stats > div:nth-child(3) { animation-delay: .55s; }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }
.win-stats b { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }
.win-stats span { font-size: 12px; color: var(--muted); }

.fact-win { text-align: left; background: #fff0f6; border-radius: 16px; padding: 10px 12px; margin-bottom: 16px; }
#modal.show .fact-win { animation: up .4s .65s ease backwards; }
.fact-win[hidden] { display: none; }
.fw-head { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.fw-body { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--text); }
.fw-ico { font-size: 20px; line-height: 1.1; }

.win-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.win-btns .btn { padding: 14px 10px; font-size: 16px; }
.win-menu { background: #f3eaff; color: var(--accent2); box-shadow: none; }

/* ---- факты о любви ---- */
.fact { width: min(100%, 320px); margin-top: 22px; background: var(--card); border-radius: 16px; padding: 10px 14px;
  font-size: 14px; line-height: 1.4; cursor: pointer; transition: opacity .2s, transform .2s; }
.fact[hidden] { display: none; }
.fact.swap { opacity: 0; transform: translateY(4px); }
.fact-head { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.fact-body { display: flex; gap: 8px; align-items: flex-start; }
.fact-ico { font-size: 20px; line-height: 1.1; }
.fact-txt { color: var(--text); opacity: .85; }
.fact-top { width: 100%; max-width: 520px; min-height: 64px; display: flex; align-items: flex-end; gap: 6px;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .35s, transform .35s; cursor: pointer; }
.fact-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fact-mascot { flex: none; width: 52px; height: 48px; background: none !important; box-shadow: none !important; margin: 0; }
.fact-top.show .fact-mascot .bodywrap { animation: peek .5s cubic-bezier(.3,1.6,.5,1), breathe 3.4s .5s ease-in-out infinite; }
@keyframes peek { from { transform: translateY(40%) scale(.6); } }
.bubble { position: relative; flex: 1; background: #fff; border-radius: 16px 16px 16px 6px; padding: 8px 12px;
  font-size: 13px; line-height: 1.35; color: var(--text); box-shadow: 0 3px 10px rgba(120,60,120,.12); margin-bottom: 10px; }
.bubble::before { content: ""; position: absolute; left: -7px; bottom: 6px; border: 7px solid transparent;
  border-right-color: #fff; border-left: 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.switch-row input { display: none; }
.switch { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #ddd; position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }

/* ---- иконки в кнопках меню ---- */
.btn .ic { width: 22px; height: 22px; flex: none; margin-right: 4px; }
.btn.big .ic { width: 24px; height: 24px; }
.btn.big.ghost .ic { color: var(--accent2); }
.ic-heart { width: 14px; height: 14px; color: var(--accent); vertical-align: -2px; margin-right: 2px; }

/* ---- Свидание ---- */
.btn.big.date { background: linear-gradient(135deg, #ff8fb8, #e0609f); }
.bush { margin: 2px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bush.appear { animation: appear .45s var(--d, 0s) cubic-bezier(.3,1.6,.5,1) backwards; }
.icecube { position: absolute; inset: 3px; border-radius: 12px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(230,247,255,.82), rgba(160,212,246,.6));
  border: 2px solid rgba(255,255,255,.95); box-shadow: inset 0 0 10px rgba(110,175,230,.65), 0 2px 6px rgba(90,150,210,.25); }
.icecube::before { content: ""; position: absolute; left: 12%; top: 9%; width: 20%; height: 42%; border-radius: 6px;
  background: rgba(255,255,255,.75); transform: skewX(-14deg); }
.icecube::after { content: ""; position: absolute; right: 14%; bottom: 12%; width: 12%; height: 12%; border-radius: 50%; background: rgba(255,255,255,.8); }
.icecube.melt { animation: melt .45s ease-out forwards; }
@keyframes melt { to { transform: scale(1.25); opacity: 0; } }
.t.shake { animation: shake .35s ease; }
@keyframes shake { 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.splash.shard { background: #d4efff !important; border-radius: 3px; box-shadow: 0 0 0 1.5px #fff inset; }

/* ---- выбор уровня ---- */
.stars-pill { display: inline-flex; align-items: center; gap: 4px; }
.stars-pill svg { width: 16px; height: 16px; fill: #ffc23d; }
.stars-pill small { color: var(--muted); }
.levels { padding: 4px 0 24px; }
.chapter { background: var(--card); border-radius: 20px; padding: 12px; margin-bottom: 12px; }
.chapter.locked { opacity: .6; }
.ch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.ch-head b { display: block; font-size: 15px; }
.ch-head span { font-size: 12px; color: var(--muted); }
.ch-stars { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: #d99a12; white-space: nowrap; }
.ch-stars svg { width: 14px; height: 14px; fill: #ffc23d; }
.lv-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.lv { position: relative; aspect-ratio: 1 / 1.12; border: 0; border-radius: 14px; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, #fff, #fbefff); color: var(--text);
  box-shadow: 0 3px 8px rgba(150,70,160,.14), inset 0 -3px 0 rgba(155,111,214,.14); -webkit-tap-highlight-color: transparent; }
.lv:active { transform: scale(.92); }
.lv b { font-size: 16px; line-height: 1; }
.lv .st { display: flex; gap: 0; }
.lv .st i { width: 11px; height: 11px; display: block; }
.lv .st svg, .win-stars svg { width: 100%; height: 100%; display: block; fill: #e6dcf2; }
.lv .st i.on svg, .win-stars i.on svg { fill: #ffc23d; }
.lv.done { background: linear-gradient(160deg, #fff8e8, #fff0f8); }
.lv.special { background: linear-gradient(150deg, #ffd1e6, #f3c4ff); color: #8a2d6e; }
.lv.special::after { content: ""; position: absolute; top: -4px; right: -4px; width: 14px; height: 14px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.3C1.6 7.8 3.8 4.5 7.2 4.5c2 0 3.6 1.1 4.8 2.8 1.2-1.7 2.8-2.8 4.8-2.8 3.4 0 5.6 3.3 4.4 6.7-1.7 4.7-9.2 9.3-9.2 9.3z' fill='%23e0609f' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.lv.lock { color: #b9a9d6; background: #f3edf9; box-shadow: none; cursor: default; }
.lv.lock svg { width: 18px; height: 18px; }
.lv.cur { box-shadow: 0 0 0 3px #ff8fb8, 0 4px 12px rgba(224,96,159,.35); animation: curpulse 1.6s ease-in-out infinite; }
@keyframes curpulse { 50% { box-shadow: 0 0 0 5px rgba(255,143,184,.55), 0 4px 14px rgba(224,96,159,.4); } }

/* звёзды в окне победы */
.win-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 2px; }
.win-stars[hidden] { display: none; }
.win-stars i { width: 34px; height: 34px; display: block; filter: drop-shadow(0 2px 3px rgba(217,154,18,.35)); }
.win-stars i:nth-child(2) { transform: translateY(-6px); width: 40px; height: 40px; }
#modal.show .win-stars i { animation: starpop .45s cubic-bezier(.3,1.8,.5,1) backwards; }
#modal.show .win-stars i:nth-child(1) { animation-delay: .5s; }
#modal.show .win-stars i:nth-child(2) { animation-delay: .7s; }
#modal.show .win-stars i:nth-child(3) { animation-delay: .9s; }
@keyframes starpop { from { transform: scale(0) rotate(-60deg); opacity: 0; } }

/* туман и толстый лёд */
.fog { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  background: linear-gradient(160deg, #fbf8ff, #efe6fb); border-radius: 14px; }
.fog svg { width: 92%; height: 92%; animation: fogbob 3s ease-in-out infinite; }
@keyframes fogbob { 50% { transform: translateY(-2px) scale(1.02); } }
.fog.gone { animation: foggone .5s ease-out forwards; }
@keyframes foggone { to { transform: scale(1.3) translateY(-10px); opacity: 0; } }
.icecube.thick { background: linear-gradient(140deg, rgba(205,236,255,.95), rgba(120,185,236,.8));
  border-width: 3px; box-shadow: inset 0 0 14px rgba(80,150,215,.8), 0 2px 8px rgba(70,130,200,.35); }
.icecube.thick::after { width: 34%; height: 3px; border-radius: 2px; right: 18%; bottom: 30%; transform: rotate(-35deg); background: rgba(255,255,255,.9); }

/* ---- синхронизация ---- */
.sync-st { font-size: 14px; padding: 8px 12px; border-radius: 12px; background: #f3eefa; color: var(--muted); }
.sync-st.ok { background: #eafaf0; color: #2f8a55; }
.sync-st.wait { background: #fff5e6; color: #b5781a; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sync-id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- выбор числа пар (Релакс) ---- */
.top { position: relative; }
.pairs-btn { border: 0; font: inherit; color: inherit; cursor: default; display: inline-flex; align-items: center; gap: 4px; }
.pairs-btn svg { width: 14px; height: 14px; display: none; color: var(--accent2); }
.pairs-btn.can { cursor: pointer; box-shadow: 0 2px 6px rgba(90,40,120,.12); }
.pairs-btn.can svg { display: block; }
.pairs-btn.can:active { transform: scale(.95); }
.pairs-btn.bump { animation: bump2 .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump2 { 40% { transform: scale(1.15); } }

/* ---- звёздная плитка ---- */
.starmark { position: absolute; top: -5px; right: -5px; width: 42%; height: 42%; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,200,60,.9)); animation: twinkle 1.4s ease-in-out infinite; }
.starmark svg { width: 100%; height: 100%; fill: #ffd34d; stroke: #fff; stroke-width: 1.6; }
@keyframes twinkle { 50% { transform: scale(1.18) rotate(12deg); } }

/* ================= История ================= */
.btn.big.story { background: linear-gradient(135deg, #ffb36b, #ff7fa8); }
.coins-badge:empty { display: none; }
.coins-badge { display: inline-flex; align-items: center; gap: 3px; }
.coin { width: 16px; height: 16px; flex: none; }
.coins-pill { display: inline-flex; align-items: center; gap: 5px; }
.coins-pill .coin { width: 18px; height: 18px; }
.story-wrap { display: flex; flex-direction: column; gap: 12px; }
.st-scene { position: relative; height: 210px; border-radius: 24px; overflow: hidden; flex: none;
  background: linear-gradient(180deg, #bfe3ff 0%, #f3dcff 60%, #ffe3ef 100%);
  display: flex; align-items: flex-end; justify-content: space-around; padding: 0 12px 18px; }
.st-scene.love { background: linear-gradient(180deg, #ffc9e0 0%, #f3d0ff 55%, #ffe8d6 100%); }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .85; animation: drift 18s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud.c1 { width: 80px; height: 24px; top: 26px; left: -90px; }
.cloud.c1::before { width: 34px; height: 34px; left: 12px; top: -16px; } .cloud.c1::after { width: 26px; height: 26px; left: 40px; top: -10px; }
.cloud.c2 { width: 60px; height: 18px; top: 70px; left: -70px; animation-duration: 24s; animation-delay: -10s; opacity: .7; }
.cloud.c2::before { width: 26px; height: 26px; left: 10px; top: -12px; } .cloud.c2::after { width: 20px; height: 20px; left: 30px; top: -8px; }
.cloud.c3 { width: 110px; height: 30px; bottom: -6px; left: -120px; animation-duration: 30s; animation-delay: -5s; }
.cloud.c3::before { width: 44px; height: 44px; left: 18px; top: -22px; } .cloud.c3::after { width: 34px; height: 34px; left: 56px; top: -14px; }
@keyframes drift { to { transform: translateX(560px); } }
.st-char { position: relative; z-index: 2; width: 120px; height: 110px; background: none !important; box-shadow: none !important; margin: 0; }
.st-char .bodywrap { animation: wmbob 2.2s ease-in-out infinite; }
#st-princess .bodywrap { animation-delay: 1.1s; }
.st-char.away svg { transform: scaleX(-1); }
.st-char.far { transform: translateY(-70px) scale(.55); opacity: .75; transition: transform .6s; }
.st-hearts { position: relative; z-index: 2; align-self: center; display: none; }
.st-scene.love .st-hearts { display: block; }
.st-hearts i { position: absolute; font-style: normal; font-size: 18px; animation: floatup 2.4s ease-in infinite; left: -8px; }
.st-hearts i:nth-child(2) { animation-delay: .8s; left: 4px; } .st-hearts i:nth-child(3) { animation-delay: 1.6s; left: -18px; }
@keyframes floatup { from { transform: translateY(20px) scale(.6); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-60px) scale(1.1); opacity: 0; } }
.st-love .st-lvl { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.st-bar { position: relative; height: 22px; border-radius: 999px; background: #f6e6f2; overflow: hidden; }
.st-bar-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ff9ccc, #e0609f); transition: width .6s ease; }
.st-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #7a2d63; }
.st-hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.btn.big.starfall { width: 100%; margin-top: 10px; background: linear-gradient(135deg, #7b8cff, #c98cff); animation: curpulse 1.6s infinite; }
.btn.big.starfall[hidden] { display: none; }
.st-note { background: #fff6ea; }
.st-note-head { font-size: 12px; font-weight: 800; color: #c9781a; margin-bottom: 4px; }
.st-note-text { font-size: 15px; font-style: italic; }
.st-note-goal { font-size: 12px; color: var(--muted); margin-top: 4px; }
.st-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* магазин */
#shop, #talks, #lbox { position: fixed; inset: 0; z-index: 25; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(74,47,99,.35); opacity: 0; pointer-events: none; transition: opacity .2s; }
#shop.show, #talks.show, #lbox.show { opacity: 1; pointer-events: auto; }
.sheet { width: min(100%, 520px); max-height: 85vh; overflow: auto; background: #fff; border-radius: 26px 26px 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .3s cubic-bezier(.3,1.2,.5,1); }
#shop.show .sheet, #talks.show .sheet, #lbox.show .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sheet-head h3 { margin: 0; flex: 1; font-size: 19px; }
.shop-sec { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 2px 6px; }
.shop-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border: 0; border-radius: 16px;
  background: #fbf3ff; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.shop-item:active:not(:disabled) { transform: scale(.97); }
.shop-item:disabled { opacity: .45; cursor: default; }
.shop-item.event { background: linear-gradient(135deg, #fff0f7, #f3e8ff); }
.si-ico { font-size: 30px; width: 40px; text-align: center; }
.si-name { flex: 1; font-weight: 700; display: flex; flex-direction: column; }
.si-name small { font-weight: 500; font-size: 12px; color: var(--muted); }
.si-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; background: #fff; border-radius: 999px; padding: 5px 10px; }
.si-empty, .shop-sad { font-size: 14px; color: var(--muted); padding: 8px 4px; }
.shop-sad[hidden] { display: none; }

/* разговор */
#dlg { position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; justify-content: flex-end; cursor: pointer;
  background: linear-gradient(180deg, rgba(74,47,99,0) 30%, rgba(74,47,99,.45)); padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
#dlg.show { display: flex; animation: fadein .2s; }
.dlg-skip { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; border: 0; border-radius: 999px; padding: 8px 14px;
  background: rgba(255,255,255,.85); font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.dlg-box { position: relative; width: min(100%, 520px); margin: 0 auto; }
.dlg-port { position: absolute; bottom: calc(100% - 22px); left: 6px; width: 120px; height: 110px; background: none !important; box-shadow: none !important; margin: 0; z-index: 2; }
#dlg[data-who=princess] .dlg-port { left: auto; right: 6px; }
#dlg[data-who=narr] .dlg-port { display: none; }
.dlg-bubble { background: #fff; border-radius: 22px; padding: 18px 18px 12px; min-height: 96px; box-shadow: 0 12px 30px rgba(90,40,120,.3); }
.dlg-name { font-weight: 800; font-size: 14px; margin-bottom: 4px; color: var(--accent); }
#dlg[data-who=princess] .dlg-name { text-align: right; color: #e0609f; }
#dlg[data-who=owl] .dlg-name { color: #8a6440; }
#dlg[data-who=think] .dlg-text, #dlg[data-who=narr] .dlg-text { font-style: italic; color: #6d5a80; }
#dlg[data-who=narr] .dlg-bubble { background: #f7f0ff; text-align: center; }
.dlg-text { font-size: 17px; line-height: 1.45; }
.dlg-text.in { animation: up .3s ease; }
.dlg-tap { font-size: 11px; color: #b9a9d6; text-align: right; margin-top: 8px; }

/* финал */
#finale { position: fixed; inset: 0; z-index: 45; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 40%, #ffd6ea, #c9a8f5); cursor: pointer; }
#finale.show { display: flex; animation: fadein .6s; }
.fin-pair { display: flex; align-items: flex-end; }
.fin-pair .t { width: 130px; height: 120px; background: none !important; box-shadow: none !important; margin: 0 -14px; }
.fin-pair .t:first-child { transform: rotate(8deg); } .fin-pair .t:last-child { transform: rotate(-8deg); }
.fin-heart { font-size: 40px; align-self: flex-start; animation: beat 1.1s infinite; z-index: 2; }
.fin-title { font-size: 26px; font-weight: 800; color: #6b2f73; animation: up .8s .4s backwards; }
.fin-sub { font-size: 13px; color: #8a5b94; }

/* награда в окне победы */
.win-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.win-reward[hidden] { display: none; }
.win-reward span { display: inline-flex; align-items: center; gap: 4px; background: #fff6dd; border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 14px; color: #b57a0a; }
.win-reward span.note { background: #ffeef6; color: #c0457f; }
.win-reward span.star { background: #eef0ff; color: #5a63c9; }
.t.shy .blush { opacity: 1; }
.t.shy .blush ellipse { transform: scale(1.3); }

/* ---- разговоры и кнопки Истории ---- */
.st-actions .talks-btn { grid-column: 1 / -1; background: rgba(255,255,255,.6); color: var(--accent2); box-shadow: none; padding: 12px; }
.st-actions .btn.big.ghost .ic, .talks-btn .ic { color: var(--accent2); }
.talk-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; margin-bottom: 8px; border: 0; border-radius: 16px;
  background: #fbf3ff; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.talk-item:active { transform: scale(.97); }
.ti-port { width: 54px; height: 50px; margin: 0; background: none !important; box-shadow: none !important; flex: none; }
.ti-play { width: 28px; height: 28px; color: var(--accent2); background: #fff; border-radius: 50%; padding: 5px; flex: none; }
.st-char .earL, .st-char .earR, .dlg-port .earL, .dlg-port .earR { animation: flap 2.6s ease-in-out infinite; }
.st-char .earR, .dlg-port .earR { animation-delay: .1s; }
@keyframes flap { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-10deg); } 90% { transform: rotate(4deg); } }
.st-char .earR { animation-name: flapR; } .dlg-port .earR { animation-name: flapR; }
@keyframes flapR { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-4deg); } }

/* ---- подсказка в Истории ---- */
.st-help { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.8); color: var(--accent2); font: 800 17px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 2px 6px rgba(90,40,120,.15); }
.st-help:active { transform: scale(.9); }
.st-howto { position: relative; background: linear-gradient(160deg, #fffaf0, #fff2f8); }
.st-howto[hidden] { display: none; }
.st-howto-head { font-weight: 800; font-size: 15px; margin-bottom: 6px; padding-right: 28px; }
.st-howto ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.st-howto li { margin-bottom: 4px; }
.st-howto li::marker { color: var(--accent); font-weight: 800; }
.st-howto-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(155,111,214,.12); color: var(--muted); cursor: pointer; font-size: 13px; }

/* ---- Принцесса на главной ---- */
.menu-hero { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px; }
.menu-mochi { width: 150px !important; height: 136px !important; cursor: pointer; }
.menu-mochi .bodywrap { animation: wmbob 2.4s ease-in-out infinite; }
.menu-mochi .earL, .menu-mochi .earR { animation: flap 2.6s ease-in-out infinite; }
.menu-mochi .earR { animation-name: flapR; }
.menu-say { position: relative; max-width: min(80vw, 270px); min-height: 1.3em; margin-top: 6px; padding: 7px 14px; border-radius: 16px;
  background: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.35; text-align: center; cursor: pointer; color: var(--muted);
  opacity: 0; transform: translateY(-4px); transition: opacity 1.2s ease, transform 1.2s ease; }
.menu-say.show { opacity: 1; transform: none; }
.menu-say::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: rgba(255,255,255,.6);
  transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.menu-say span { position: relative; }
#scr-menu h1 { margin: 10px 0 18px; }

/* ================= Записки от него ================= */
#scr-menu { position: relative; }
.letters-btn { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 3; border: 0; border-radius: 999px;
  padding: 7px 12px; background: rgba(255,255,255,.75); box-shadow: 0 2px 8px rgba(150,70,160,.15); font: 700 14px/1 system-ui, sans-serif;
  color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.letters-btn[hidden] { display: none; }
.letters-btn i { font-style: normal; background: #e0609f; color: #fff; border-radius: 999px; padding: 2px 6px; font-size: 11px; }
.menu-hero { position: relative; }
.menu-env { position: absolute; z-index: 3; right: -4px; top: 18px; font-size: 32px; pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(224,96,159,.4)); animation: envbob 1.8s ease-in-out infinite; }
.menu-env[hidden] { display: none; }
@keyframes envbob { 50% { transform: translateY(-6px) rotate(-8deg); } }
.menu-say.letter-call { background: #fff; color: #c0457f; font-weight: 700; }
.menu-say.letter-call::before { background: #fff; }

#letter { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 40%, rgba(255,214,234,.96), rgba(201,168,245,.96)); }
#letter.show { display: flex; animation: fadein .35s; }
.letter-stage { position: relative; width: min(100%, 360px); display: flex; justify-content: center; }
.paper { position: relative; z-index: 2; width: 100%; max-height: 62vh; overflow: auto; padding: 22px 22px 18px; border-radius: 14px;
  background: repeating-linear-gradient(180deg, #fffdf6 0 29px, #f3e6ee 29px 30px); box-shadow: 0 14px 34px rgba(110,40,120,.28);
  font-family: "Bradley Hand", "Segoe Print", "Snell Roundhand", "Comic Sans MS", cursive; color: #5a2f5f; }
.paper-date { font-family: system-ui, sans-serif; font-size: 12px; color: #b28aa8; margin-bottom: 8px; }
.paper-text { font-size: 21px; line-height: 30px; white-space: pre-wrap; word-wrap: break-word; }
.paper-sign { text-align: right; font-size: 20px; margin-top: 12px; color: #c0457f; }
.env-back, .env-front, .env-flap, .env-seal { display: none; }
#letter.env .env-back, #letter.env .env-front, #letter.env .env-flap, #letter.env .env-seal { display: block; position: absolute; left: 50%; pointer-events: none; }
#letter.env .env-back { width: 240px; height: 150px; bottom: -10px; margin-left: -120px; border-radius: 10px; background: #ffc6dc; z-index: 1;
  animation: envout .6s 1.5s ease-in forwards; }
#letter.env .env-front { width: 240px; height: 150px; bottom: -10px; margin-left: -120px; z-index: 3; border-radius: 10px;
  background: linear-gradient(to top right, #ffb3d1 50%, transparent 50.5%) left / 50% 100% no-repeat,
              linear-gradient(to top left, #ffb3d1 50%, transparent 50.5%) right / 50% 100% no-repeat;
  animation: envout .6s 1.5s ease-in forwards; }
#letter.env .env-flap { width: 0; height: 0; bottom: 140px; margin-left: -120px; z-index: 4; border-left: 120px solid transparent; border-right: 120px solid transparent;
  border-top: 82px solid #ff9cc4; transform-origin: top; bottom: auto; top: calc(100% - 140px);
  animation: flapopen .5s .3s ease-in-out forwards, envout .6s 1.5s ease-in forwards; }
#letter.env .env-seal { z-index: 5; font-size: 28px; margin-left: -16px; top: calc(100% - 82px); animation: sealpop .3s .15s ease-in forwards; }
@keyframes flapopen { to { transform: rotateX(180deg); z-index: 1; } }
@keyframes sealpop { to { transform: scale(1.6); opacity: 0; } }
@keyframes envout { to { transform: translateY(120px); opacity: 0; } }
#letter.env .paper { animation: paperup .9s .7s cubic-bezier(.3,1.2,.5,1) backwards; }
@keyframes paperup { from { transform: translateY(60%) scale(.62); opacity: 0; } 30% { opacity: 1; } }
.letter-btns { display: flex; gap: 10px; }
#letter.env .letter-btns { animation: up .4s 1.6s backwards; }
.letter-btns .btn:not(.big) { background: rgba(255,255,255,.8); color: var(--accent2); }

.lbox-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border: 0; border-radius: 16px;
  background: #fbf3ff; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.lbox-item.new { background: #fff0f6; box-shadow: inset 0 0 0 2px #ffb3d6; }
.lbi-env { font-size: 26px; }
.lbi-txt { display: flex; flex-direction: column; min-width: 0; }
.lbi-txt b { font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbi-txt small { font-size: 12px; color: var(--muted); }

/* ---- Добавить на экран Домой ---- */
#inst { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px 16px 90px;
  background: rgba(74,47,99,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#inst.show { display: flex; animation: fadein .3s; }
.inst-card { position: relative; width: min(100%, 360px); background: #fff; border-radius: 26px; padding: 22px 20px 16px; text-align: center;
  box-shadow: 0 20px 50px rgba(120,50,130,.3); animation: boxin .45s cubic-bezier(.3,1.5,.5,1); }
.inst-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 14px; }
.inst-icon img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 6px 16px rgba(150,70,160,.25); }
.inst-card h2 { font-size: 19px; margin: 10px 0 6px; }
.inst-lead { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.inst-card ol { text-align: left; margin: 0 0 12px; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.inst-card li { margin-bottom: 8px; } .inst-card li::marker { color: var(--accent); font-weight: 800; }
.inst-card small { color: var(--muted); font-size: 12px; }
.inst-share { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #eaf3ff; color: #1a7cf5; vertical-align: -7px; }
.inst-share svg { width: 17px; height: 17px; }
.inst-plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid #4a2f63; border-radius: 6px; font-size: 14px; font-weight: 800; vertical-align: -4px; }
.inst-card .btn.big { width: 100%; }
.inst-later { background: transparent; box-shadow: none; color: var(--muted); font-weight: 600; }
.inst-arrow { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 40px; color: #fff;
  text-shadow: 0 2px 10px rgba(74,47,99,.6); animation: instbob 1s ease-in-out infinite; }
.inst-arrow[hidden] { display: none; }
@keyframes instbob { 50% { transform: translate(-50%, 10px); } }
#inst-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 14px; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(120,50,130,.25); font-size: 13px; line-height: 1.3;
  transform: translateY(150%); transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
#inst-bar.show { transform: none; }
#inst-bar span { flex: 1; }
#inst-bar .btn { padding: 8px 12px; color: #fff; background: linear-gradient(135deg, var(--accent2), var(--accent)); }
#inst-bar .icon { width: 32px; height: 32px; font-size: 13px; box-shadow: none; }

/* ---- главная: Буся и прилетающая Принцесса ---- */
.menu-chars { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.menu-pr { width: 128px !important; height: 116px !important; margin: 0 0 0 -18px; background: none !important; box-shadow: none !important; cursor: pointer; }
.menu-pr[hidden] { display: none; }
.menu-pr .bodywrap { animation: wmbob 2.2s .6s ease-in-out infinite; }
.menu-pr .earL, .menu-pr .earR { animation: flap .9s ease-in-out infinite; } .menu-pr .earR { animation-name: flapR; }
.menu-pr.flyin { animation: prin 1s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes prin { from { transform: translate(140px, -120px) rotate(25deg) scale(.6); opacity: 0; } }
.menu-pr.flyout { animation: prout .6s ease-in forwards; }
@keyframes prout { to { transform: translate(140px, -140px) rotate(25deg) scale(.5); opacity: 0; } }
.menu-chars:has(.menu-pr:not([hidden])) .menu-mochi { width: 128px !important; height: 116px !important; }

/* ================= Плеер ================= */
.pl-now { display: flex; align-items: center; gap: 14px; }
.pl-disc { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle, #3a2a48 0 30%, transparent 31%),
              repeating-radial-gradient(circle, #2b1f36 0 2px, #3b2c4a 2px 4px);
  box-shadow: 0 6px 16px rgba(74,47,99,.3), inset 0 0 0 3px rgba(255,255,255,.06); }
.pl-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); }
.pl-label { position: absolute; inset: 22px; border-radius: 50%; background: linear-gradient(135deg, #ffd0e2, #e7d6ff); overflow: hidden; display: grid; place-items: center; }
.pl-label svg { width: 120%; height: 120%; margin-top: 8px; }
.pl-disc.spin { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pl-info { flex: 1; min-width: 0; }
.pl-title { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pl-eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-top: 8px; }
.pl-eq i { width: 4px; height: 4px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent2)); }
.pl-eq.on i { animation: eq .9s ease-in-out infinite; }
.pl-eq.on i:nth-child(2) { animation-delay: -.3s; } .pl-eq.on i:nth-child(3) { animation-delay: -.6s; }
.pl-eq.on i:nth-child(4) { animation-delay: -.15s; } .pl-eq.on i:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.pl-seek { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-seek input { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--accent2), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, #eee3f6; }
.pl-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(74,47,99,.35); }
.pl-seek input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(74,47,99,.35); }
.player { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.pl-btn { width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #f6eefc; color: var(--text); -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.pl-btn:active { transform: scale(.9); }
.pl-btn svg { width: 22px; height: 22px; }
.pl-btn.small { width: 38px; height: 38px; background: transparent; color: var(--muted); }
.pl-btn.small svg { width: 19px; height: 19px; }
.pl-btn.small.on { color: var(--accent); background: rgba(196,90,168,.1); }
.pl-btn.play { width: 62px; height: 62px; color: #fff; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 8px 18px rgba(196,90,168,.35); }
.pl-btn.play svg { width: 26px; height: 26px; }
.pl-btn.play .i-pause, .pl-btn.play.on .i-play { display: none; }
.pl-btn.play.on .i-pause { display: block; }
.pl-btn.play .i-play svg { margin-left: 3px; }
.tracks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.tracks li.off { opacity: .45; }
.tracks li.playing { background: linear-gradient(90deg, rgba(196,90,168,.12), rgba(155,111,214,.08)); }
.tr-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #f6eefc; color: var(--accent2); cursor: pointer; }
.tr-ic svg { width: 16px; height: 16px; }
.tracks li.playing .tr-ic { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; }
.mini-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.mini-eq i { width: 3px; background: #fff; border-radius: 2px; animation: eq2 .8s ease-in-out infinite; }
.mini-eq i:nth-child(2) { animation-delay: -.25s; } .mini-eq i:nth-child(3) { animation-delay: -.5s; }
@keyframes eq2 { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.tr-del { flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.tr-del svg { width: 18px; height: 18px; }
.tr-del:active { background: #ffe8ef; color: #c0457f; }
.mini-switch { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.mini-switch input { display: none; }
.mini-switch span { position: absolute; inset: 0; border-radius: 999px; background: #ddd; transition: background .2s; }
.mini-switch span::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,.2); transition: transform .2s; }
.mini-switch input:checked + span { background: linear-gradient(135deg, var(--accent2), var(--accent)); }
.mini-switch input:checked + span::after { transform: translateX(16px); }
.btn.add { width: 100%; justify-content: center; gap: 6px; background: transparent; border: 2px dashed #e3d2f2; box-shadow: none; color: var(--accent2); }
.btn.add svg { width: 18px; height: 18px; }

/* ---- статус скачивания песен ---- */
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pl-head h3 { margin: 0; }
.dl-all { border: 0; border-radius: 999px; padding: 6px 12px; font: 700 12px/1 system-ui, sans-serif; color: var(--accent2); background: #f3eaff; cursor: pointer; }
.dl-all[hidden] { display: none; }
.tr-ic.remote { background: #eef4ff; color: #6a8fe0; }
.tr-ic.loading { position: relative; background: #fff; }
.tr-ic .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-ic .ring circle { fill: none; stroke-width: 3.5; }
.tr-ic .ring .rb { stroke: #efe4f8; }
.tr-ic .ring .rf { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .2s; }
.tr-ic .pct { position: relative; font-size: 9px; font-weight: 800; color: var(--accent); }
.tracks li.playing .tr-ic.loading { background: #fff; }
.pl-btn.play.wait { animation: curpulse 1.2s ease-in-out infinite; }
.toast-msg { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  background: #4a2f63; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }