/* Вишня · warm cherry, rose milk, pistachio. Shared skin for every game screen. */
:root{
  --bg:#140b12;--surface:#21141e;--surface-2:#2b1a27;--surface-3:#392333;
  --text:#fff3ec;--text-2:#d5bac7;--text-3:#ab8799;
  --line:rgba(255,196,215,.10);--line-2:rgba(255,196,215,.22);
  --cherry:#f74778;--cherry-2:#ff96b2;--accent-pale:#ffd0dd;
  --gold:#edc78a;--gold-2:#ffe4b3;--mint:#a5d8ac;
  --r-l:24px;--r-xl:30px;
}
body{background:var(--bg)}
#app{background:radial-gradient(ellipse at 95% 15%,#77264222,transparent 40%),radial-gradient(ellipse at 0 65%,#4c2f5422,transparent 50%),var(--bg)}
button,[data-go]{touch-action:manipulation}
button:focus-visible,[data-go]:focus-visible{outline:2px solid #ffd5e1;outline-offset:4px}
.apphead{background:linear-gradient(180deg,#140b12fa 65%,#140b12dc);padding-bottom:14px}
.me-t small{color:var(--text-3);margin-top:4px}
.chip{border-radius:12px;background:#281a25;font-size:13px}
.chip-star{background:#edc78a12;color:#ffe4b3;border-color:#edc78a33}
.screen{padding-left:18px;padding-right:18px}
.view{gap:16px}
.nav{left:12px;right:12px;bottom:calc(10px + var(--safe-bottom));padding:9px 4px 8px;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid #fbaac423;border-radius:24px;background:#21121ded;box-shadow:0 10px 35px #08030888,inset 0 1px 0 #ffffff09}
.nav button{color:#ab8799;font-size:9px;gap:3px;min-height:46px;min-width:0;transition:color .25s}
.nav .ic{width:32px;height:23px;transition:background .25s,transform .35s,color .25s}
.nav .nav-tops{color:#e7c789}
.nav .nav-tops .ic{color:#f5d18f;background:#e6be7410}
.nav .nav-tops.on .ic{background:#e6be7425;color:#ffe1a2}
.nav .nav-tops.on::after{background:#f5d18f}
.bn.tops-featured{min-height:164px;background:radial-gradient(ellipse at 100% 0%,#fbd07645,transparent 65%),linear-gradient(130deg,#5c4025,#32251e);border:1px solid #e8c47c65;box-shadow:0 6px 26px #d5a74910,inset 0 1px 0 #fff0c91f}
.tops-featured h3{max-width:62%;font-size:25px;line-height:1.1}
.tops-featured p{font-size:12px;color:#f0ddbf;max-width:62%}
.tops-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:11px;font-weight:700;color:#ffe2a9}
.tops-link .ic{width:15px;height:15px}
.nav .on{color:#ffd3df}
.nav .on .ic{color:#ff9ab7;background:#f7477824;transform:translateY(-2px)}
.nav .on::after{content:'';height:3px;width:12px;background:#f98aa9;border-radius:10px;position:absolute;bottom:-5px;animation:cherry-pop .3s both}
.btn,.welcome-cta{position:relative;overflow:hidden;isolation:isolate}
.btn{border-radius:17px;font-weight:700;transition:transform .2s,box-shadow .25s,filter .25s}
.btn-cherry,.btn-primary{background:linear-gradient(120deg,#fd7097,#ee396c 65%,#cc2056);box-shadow:inset 0 1px 0 #ffffff4d,0 7px 24px #ed396b30;color:#fff6f7}
.btn-gold,.cta-gold{background:linear-gradient(135deg,#ffe6ba,#eec181);box-shadow:inset 0 1px 0 #fff7e8aa,0 5px 24px #edc78a1a;color:#492916}
.btn-ghost{background:#2b1a27;border-color:#fbaac426}
.btn-ok,.btn-green{background:linear-gradient(120deg,#c0e3bd,#8ec89e);box-shadow:0 6px 20px #a5d8ac15;color:#183025}
.card,.note,.quest,.task,.stat{border-color:var(--line);box-shadow:inset 0 1px 0 #ffffff03}
.bar{height:6px;background:#ffffff0c}
.bar i{background:linear-gradient(90deg,#d72f60,#ffa0bd);position:relative}
.bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff4,transparent);transform:translateX(-100%);animation:cherry-bar-shine 4.5s ease-in-out infinite}
.bn{border-radius:25px;transition:transform .25s,box-shadow .25s;min-width:0}
.bn h3{font-size:21px;line-height:1.14;text-transform:none;letter-spacing:-.04em}
.bn-h h3{font-size:15px;letter-spacing:-.02em}
.bn::after{box-shadow:inset 0 0 0 1px #ffd1df19,inset 0 1px 0 #ffe0e622}
.bn p{color:#e4cbd5;font-weight:400}
.bn .mini-pill{backdrop-filter:blur(8px)}
.t-cherry{background:radial-gradient(ellipse at 90% 5%,#dc477d55,transparent 70%),linear-gradient(135deg,#631831,#321322)}
.t-fire{background:radial-gradient(ellipse at 90% 5%,#e2856350,transparent 70%),linear-gradient(135deg,#5f292c,#2b1720)}
.t-gold{background:radial-gradient(ellipse at 90% 5%,#d8ad6140,transparent 70%),linear-gradient(135deg,#493127,#25191d)}
.t-violet{background:radial-gradient(ellipse at 90% 5%,#a382dd45,transparent 70%),linear-gradient(135deg,#3d2857,#211728)}
.t-blue{background:radial-gradient(ellipse at 90% 5%,#70aaca40,transparent 70%),linear-gradient(135deg,#253748,#171e2a)}
.t-green{background:radial-gradient(ellipse at 90% 5%,#8ec59b40,transparent 70%),linear-gradient(135deg,#2b4238,#172821)}
.t-pink{background:radial-gradient(ellipse at 90% 5%,#d991cb40,transparent 70%),linear-gradient(135deg,#573050,#281829)}
.t-steel{background:radial-gradient(ellipse at 90% 5%,#b497ac30,transparent 70%),linear-gradient(135deg,#382c37,#201720)}
.t-teal{background:radial-gradient(ellipse at 90% 5%,#7fc5b730,transparent 70%),linear-gradient(135deg,#254139,#182625)}
.bn-tops{background:radial-gradient(ellipse at 95% 10%,#d5a96030,transparent 65%),linear-gradient(120deg,#413025,#271c21)}
.bn-pass{background:radial-gradient(ellipse at 95% 10%,#b38ddf40,transparent 65%),linear-gradient(120deg,#3f2c50,#251b30)}
.bn-prof{background:radial-gradient(ellipse at 95% 10%,#9acdb630,transparent 65%),linear-gradient(120deg,#2b3d35,#1c2524)}
.cherry-welcome{position:relative;overflow:hidden;isolation:isolate;min-height:340px;border:1px solid #ff9aba38;border-radius:30px;background:radial-gradient(ellipse at 100% 35%,#b6386360,transparent 68%),linear-gradient(140deg,#65213c,#3d172c 70%,#271422);padding:23px 21px 50px}
.cherry-welcome::before{content:'';position:absolute;width:230px;height:230px;right:-100px;top:-130px;border:1px solid #ffc5d72b;border-radius:50%;box-shadow:0 0 0 35px #ffc5d708,0 0 0 70px #ffc5d706;pointer-events:none}
.welcome-copy{position:relative;z-index:3}
.brand-label{display:flex;align-items:center;gap:7px;font:700 12px var(--f-b);letter-spacing:.17em;color:#ffe1e7}
.brand-label>svg{width:24px;height:24px;color:#ff86a5}
.brand-label>span{margin-left:1px;color:#f5acbf;font-size:9px;letter-spacing:.2em;font-weight:500}
.cherry-welcome h1{margin-top:25px;font:700 clamp(23px,6.3vw,34px)/1.2 var(--f-d);letter-spacing:-.055em}
.cherry-welcome h1 em,.section-intro h1 em{font-style:normal;color:#ff9fb9}
.cherry-welcome p{font-size:12px;line-height:1.65;color:#dec0cd;margin-top:13px;max-width:62%}
.welcome-cta{margin-top:20px;padding:12px 15px;border-radius:14px;color:#482032;background:#ffe1e9;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:800;box-shadow:0 6px 20px #19091225}
.welcome-cta svg{width:17px;height:17px}
.welcome-art{position:absolute;right:-17px;bottom:55px;width:154px;height:200px;z-index:1;transform:rotate(-10deg);pointer-events:none}
.hero-cherries{position:absolute;inset:18px 0 0;width:100%;height:100%;color:#ff668d;filter:drop-shadow(0 14px 0 #65132b) drop-shadow(0 28px 20px #19081366);animation:cherry-sway 6s ease-in-out infinite}
.cherry-halo{position:absolute;inset:10px -12px;border-radius:50%;border:1px solid #ffbbd030;transform:rotate(30deg);box-shadow:0 0 0 18px #ffbbd008}
.orbit-star{position:absolute;color:#ffe0a9;animation:cherry-twinkle 3.6s ease-in-out infinite}
.s1{left:0;top:25px;font-size:25px}.s2{right:18px;top:-15px;font-size:38px;animation-delay:-1s}.s3{right:10px;bottom:5px;font-size:18px;animation-delay:-2s}
.welcome-stamp{position:absolute;bottom:-23px;left:28px;font-size:9px;line-height:1.5;letter-spacing:.07em;text-align:center;color:#e2b7c8;transform:rotate(10deg)}
.welcome-bottom{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:center;gap:7px;background:#130b1638;border-top:1px solid #ffbbd014;color:#d9b3c3;font-size:10px;letter-spacing:.02em}
.welcome-bottom i,.section-intro .eyebrow::before{width:5px;height:5px;border-radius:50%;background:#a5d8ac;box-shadow:0 0 10px #a5d8ac44}
.section-intro{padding:12px 3px 5px}
.section-intro .eyebrow{display:flex;align-items:center;gap:8px;color:#d0a3b6;font-size:9px;letter-spacing:.17em}
.section-intro .eyebrow::before{content:''}
.section-intro h1{font:700 clamp(22px,5.9vw,32px)/1.25 var(--f-d);letter-spacing:-.045em;margin-top:13px}
.section-intro p{color:var(--text-3);font-size:12px;margin-top:10px;line-height:1.6}
.pity{padding:13px;background:linear-gradient(100deg,#edc78a0d,#edc78a04);border-color:#edc78a20;border-radius:18px}
.pity .t>span{font-size:11px;color:#dbc2b0}
.pity>b{font-size:12px;color:var(--gold-2)}
.pity .pity-img{width:30px;height:30px}
.cherry-case{overflow:visible;filter:drop-shadow(0 15px 15px #16061140)}
.cherry-case-card{min-height:235px;padding:16px;background-blend-mode:normal}
.cherry-case-card .bn-art{width:158px;height:155px;top:-1px;right:calc(50% - 79px);filter:none}
.cherry-case-card .bn-body{min-height:65px}
.cherry-case-card h3{font-family:var(--f-b);font-size:17px;font-weight:800;line-height:1.18;letter-spacing:-.025em;overflow-wrap:anywhere}
.cherry-case-card .mini-pill{height:22px;font-size:10px;border-radius:8px;margin-top:9px}
.cherry-case-featured{min-height:245px}
.cherry-case-featured .art-big{width:220px;height:220px;right:-45px;margin-top:-103px;filter:none}
.cherry-case-featured .big-t{font-size:25px;letter-spacing:-.05em;max-width:55%}
.cherry-case-featured .bn-body{max-width:100%}
.cherry-case-featured p{font-size:12px;max-width:51%}
.cherry-case-featured .cta-gold{height:39px;font-size:12px;margin-top:17px}
.cherry-case-featured .tag-new{font-size:9px;background:#1e0b2040;border-color:#ffc5d723;color:#ffd8df;letter-spacing:.04em}
.case-hero{min-height:335px;padding:23px 20px;isolation:isolate;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--case-color) 24%,transparent),transparent 67%),linear-gradient(155deg,#301b2c,#1d1320);border:1px solid #ffc5d71c}
.case-hero::before{content:'';position:absolute;left:17%;right:17%;height:22px;top:245px;background:var(--case-color);opacity:.1;filter:blur(13px);border-radius:50%}
.case-big{width:245px;height:235px;z-index:2;margin:-3px 0 -8px;filter:drop-shadow(0 18px 20px #0a030c50)}
.case-edition{font-size:8px;letter-spacing:.22em;color:#d7b7c7;z-index:2}
.case-sub{font-size:12px;line-height:1.6;max-width:255px;position:relative;z-index:2;color:#d7bdcb}
.case-n{top:44px;right:18px;background:#ffffff08;border-color:#ffffff15;color:#ffe0eb}
.case-orbit{position:absolute;left:50%;top:52%;width:225px;height:225px;border:1px solid #ffb8cf18;border-radius:50%;transform:translate(-50%,-50%);z-index:0}
.case-orbit::before{content:'';position:absolute;inset:20px;border:1px dashed #ffb8cf15;border-radius:50%;animation:spin 50s linear infinite}
.case-orbit i{position:absolute;width:4px;height:4px;background:var(--case-color);box-shadow:0 0 10px var(--case-color);border-radius:50%;top:20px;left:40px;animation:cherry-twinkle 3s ease-in-out infinite}
.case-orbit i:nth-child(2){top:150px;left:210px;animation-delay:-1s}.case-orbit i:nth-child(3){top:209px;left:60px;animation-delay:-2s}
.case-sparkles{transform-origin:50% 50%;animation:cherry-twinkle 3s ease-in-out infinite}
.in-view .cherry-case:not(.case-big){animation:cherry-case-float 5s ease-in-out infinite}
.case-big.float{animation:cherry-case-float 5.5s ease-in-out infinite}
.bn:not(.in-view) .cherry-case,.bn:not(.in-view) .float,.bn:not(.in-view) .w-rot{animation-play-state:paused}
.cherry-welcome:not(.in-view) .hero-cherries,.cherry-welcome:not(.in-view) .orbit-star{animation-play-state:paused}
.view.enter>.bn,.view.enter>.grid2,.view.enter>.cherry-welcome,.view.enter>.case-hero{animation:cherry-enter .5s var(--enter-delay,0ms) both cubic-bezier(.2,.8,.2,1)}
.cherry-ripple{position:absolute;z-index:5;pointer-events:none;width:12px;height:12px;margin:-6px;border-radius:50%;background:#ffe4eb48;animation:cherry-ripple .55s ease-out both}
.case-opening{background:radial-gradient(ellipse at 50% 40%,#582138aa,transparent 65%),#130b15f5!important;backdrop-filter:blur(16px)!important}
.opening-brand{position:absolute;top:calc(30px + var(--safe-top));left:0;right:0;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.25em;color:#e4b7cb;pointer-events:none}
.opening-brand svg{width:23px;height:23px;color:#ff9dbb}
.opening-skip{position:absolute;bottom:calc(35px + var(--safe-bottom));left:50%;transform:translateX(-50%);z-index:5;padding:10px 18px;background:#ffffff09;border:1px solid #ffd4e622;border-radius:30px;color:#d7b3c5;font-size:12px;min-height:40px}
.opening-status{position:absolute;top:calc(50% - 125px);left:15px;right:15px;text-align:center;color:#e7bdcf;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.case-result-card{max-height:calc(100dvh - 135px - var(--safe-top));overflow-y:auto!important;border-radius:28px!important;padding:21px!important;background:linear-gradient(145deg,#362034,#20131f)!important;width:min(310px,calc(100vw - 44px))!important;border-width:1px!important}
.case-result-card::before{content:'ТВОЯ НОВАЯ НАХОДКА';display:block;font:600 9px var(--f-b);letter-spacing:.19em;color:#c59aaf;margin-bottom:14px}
.case-result-card>button{border-radius:15px!important;height:49px!important;background:linear-gradient(120deg,#ffd5e2,#f89bb9)!important;box-shadow:0 6px 22px #f7477825!important;color:#45172d!important}
.case-result-card>div:nth-child(2){border-radius:20px!important;background:radial-gradient(circle,#ffffff0d,transparent 75%)!important}
.case-result-card>div:nth-child(2) img{animation:cherry-case-float 4s ease-in-out infinite}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
/* Artwork chooses the card palette, so a violet potion never sits on green. */
.art-tone-violet{--art-light:#b88cdd;--art-dark:#36213f;--art-base:#221728;--art-edge:#c08aee32}
.art-tone-gold{--art-light:#e6bd70;--art-dark:#483323;--art-base:#281d1b;--art-edge:#edc78a30}
.art-tone-steel{--art-light:#9ca8c5;--art-dark:#30313f;--art-base:#1c1c28;--art-edge:#b0bbd230}
.art-tone-cherry{--art-light:#f2819d;--art-dark:#572135;--art-base:#2c1724;--art-edge:#ffa0bc32}
.art-tone-fire{--art-light:#e8a272;--art-dark:#553126;--art-base:#2b1b1b;--art-edge:#f0af8030}
.bn[class*="art-tone-"],.card[class*="art-tone-"],.st-hero[class*="art-tone-"],.pass-hero[class*="art-tone-"],.coins-card[class*="art-tone-"]{background:radial-gradient(ellipse at 95% 10%,color-mix(in srgb,var(--art-light) 25%,transparent),transparent 70%),linear-gradient(130deg,var(--art-dark),var(--art-base));border-color:var(--art-edge)}
.bn[class*="art-tone-"]::after{box-shadow:inset 0 0 0 1px var(--art-edge),inset 0 1px 0 #ffffff0d}
.potion-card{position:relative;overflow:hidden;padding:19px}
.potion-card .opt>img{width:78px;height:88px;object-fit:contain;filter:drop-shadow(0 12px 12px #0a061444) drop-shadow(0 0 16px color-mix(in srgb,var(--art-light) 20%,transparent));animation:cherry-case-float 5s ease-in-out infinite}
.potion-card .opt{gap:15px;align-items:center}
.potion-card .opt b{font-size:16px;color:#f4e8f4}
.potion-card .opt small{color:color-mix(in srgb,var(--art-light) 50%,#e3d5e5)}
.potion-card.art-tone-violet .mini-pill{color:#e8caff;background:#bd8bee20;border-color:#bd8bee40}
.potion-card .sub{font-size:13px;line-height:1.6;color:#c5bdd2}
.ava{--frame-width:2.5px;isolation:isolate;aspect-ratio:1;overflow:hidden}
.ava.xl{--frame-width:5px}
.ava.lg{--frame-width:4px}
.ava.pm{--frame-width:3px}
.bn-prof .ava.xl{--frame-width:4px}
.ava>i{inset:0;border-radius:50%;pointer-events:none;transform-origin:50% 50%}
.ava>span{position:absolute;inset:var(--frame-width);width:auto;height:auto;min-width:0;min-height:0;overflow:hidden;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3a1b30,#1e1120)}
.ava>span>img.cherry-avatar{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;transform:scale(1.3);flex:none}
.cos-cherry-mark{width:66px;height:66px}
.brand-eyes{transform-box:fill-box;transform-origin:center;animation:cherry-blink 6s infinite}
@keyframes cherry-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
@keyframes cherry-sway{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}
@keyframes cherry-case-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes cherry-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@keyframes cherry-bar-shine{0%,45%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
@keyframes cherry-ripple{to{transform:scale(28);opacity:0}}
@keyframes cherry-pop{from{transform:scaleX(.1);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes cherry-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (hover:hover){.bn:hover{transform:translateY(-3px);box-shadow:0 14px 25px #08030c33}.btn:hover{filter:brightness(1.08)}.welcome-cta:hover{background:#fff0f4}}
@media (min-width:600px){#app{max-width:560px;margin:auto}.nav{max-width:536px;left:50%;right:auto;width:calc(100% - 24px);transform:translateX(-50%)}.cherry-welcome{min-height:355px}.welcome-art{width:195px;right:10px}.cherry-welcome h1{font-size:35px}.cherry-welcome p{font-size:14px}}
@media (max-width:360px){.screen{padding-left:12px;padding-right:12px}.cherry-welcome{padding:20px 16px 48px;min-height:320px}.cherry-welcome h1{font-size:23px}.welcome-art{right:-27px;width:132px}.welcome-copy p{font-size:11px}.cherry-case-card{min-height:222px;padding:13px}.cherry-case-card .bn-art{width:143px;height:143px;right:calc(50% - 71px)}.cherry-case-featured .art-big{width:187px;right:-42px}.cherry-case-featured .big-t{font-size:21px}.brand-label{font-size:10px}.me-t b{max-width:31vw;font-size:13px}.bal{gap:4px}.chip{padding:0 6px;font-size:11px}.chip .st{width:15px;height:15px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.float{transform:none}.cherry-ripple{display:none}}