:root{
  --navy-deep:#171a26;
  --navy:#1f2436;
  --navy-soft:#2a2f47;
  --sakura:#f0a8c4;
  --sakura-bright:#ff8fb8;
  --sakura-deep:#d6789f;
  --moss:#6f9273;
  --moss-deep:#4d6b52;
  --bark:#8a6248;
  --bark-deep:#5e4230;
  --cream:#f2e9e0;
  --cream-dim:#c9c0ba;
  --line: rgba(242,233,224,0.12);
  --scrim: rgba(10,10,14,0.55);
  color-scheme: dark;
}
html[data-theme="light"]{
  --navy-deep:#f7f3ee;
  --navy:#ffffff;
  --navy-soft:#f1ece3;
  --sakura:#e895b8;
  --sakura-bright:#ff7fae;
  --sakura-deep:#c85f8d;
  --moss:#5c8863;
  --moss-deep:#3f6045;
  --bark:#8a6248;
  --bark-deep:#5e4230;
  --cream:#2a2f3d;
  --cream-dim:#666c80;
  --line: rgba(42,47,61,0.12);
  --scrim: rgba(30,30,36,0.35);
  color-scheme: light;
}
html{transition:background-color .35s ease;}
body,header,.cart-drawer,.mobile-nav,.mobile-overlay{transition:background-color .35s ease, background .35s ease, border-color .35s ease;}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-deep);
  color:var(--cream);
  font-family:'Vazirmatn', sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}
.pixel{font-family:'Press Start 2P', 'Vazirmatn', sans-serif;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
::selection{background:var(--sakura); color:var(--navy-deep);}

/* petals canvas */
#petals.petal-field{position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden;}
.petal{position:absolute; top:-60px; will-change:transform; animation:petalFall linear infinite; contain:layout paint;}
.petal svg{display:block;}
@keyframes petalFall{
  0%{transform:translate(0,-8vh) rotate(0deg) scale(var(--petal-scale,1));}
  20%{transform:translate(var(--drift1,40px), 18vh) rotate(70deg) scale(var(--petal-scale,1));}
  40%{transform:translate(var(--drift2,-30px), 40vh) rotate(150deg) scale(var(--petal-scale,1));}
  60%{transform:translate(var(--drift1,40px), 62vh) rotate(210deg) scale(var(--petal-scale,1));}
  80%{transform:translate(var(--drift2,-30px), 85vh) rotate(300deg) scale(var(--petal-scale,1));}
  100%{transform:translate(0, 112vh) rotate(380deg) scale(var(--petal-scale,1));}
}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(31,36,54,0.72), rgba(23,26,38,0.6));
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px -20px rgba(0,0,0,0.5);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand .blossom{width:26px; height:26px;}
.brand-bloom{animation:brandBreathe 4.5s ease-in-out infinite; transform-origin:center;}
.brand:hover .brand-bloom{animation-duration:1.1s;}
@keyframes brandBreathe{
  0%,100%{transform:scale(1) rotate(0deg);}
  50%{transform:scale(1.12) rotate(10deg);}
}
.brand-name{font-size:19px; font-weight:800; letter-spacing:0.5px;}
.brand-name .dotir{color:var(--sakura-bright);}
.nav-links{display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500;}
.nav-links a{position:relative; padding:6px 0; color:var(--cream-dim); transition:color .2s;}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.current{color:var(--sakura-bright);}
.nav-links a::after{content:'';position:absolute; right:0; bottom:0; width:0; height:2px; background:var(--sakura-bright); transition:width .25s;}
.nav-links a:hover::after, .nav-links a.current::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:14px;}
.cart-btn{position:relative; background:var(--navy-soft); border:1px solid var(--line); width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.cart-btn:hover{border-color:var(--sakura-deep);}
.cart-count{position:absolute; top:-6px; left:-6px; background:var(--sakura-bright); color:var(--navy-deep); font-size:11px; font-weight:800; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.btn-auth{background:var(--moss); color:#0e1510; font-weight:700; padding:10px 18px; border-radius:9px; font-size:14px; transition:filter .2s, transform .2s;}
.btn-auth:hover{filter:brightness(1.1); transform:translateY(-1px);}
.burger{display:none; width:42px; height:42px; align-items:center; justify-content:center; background:var(--navy-soft); border:1px solid var(--line); border-radius:10px; flex-direction:column; gap:4px;}
.burger span{width:18px; height:2px; background:var(--cream); display:block;}

/* MOBILE NAV DRAWER */
.mobile-nav{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:linear-gradient(165deg, rgba(42,47,71,0.96), rgba(23,26,38,0.98)); backdrop-filter:blur(8px) saturate(1.15); -webkit-backdrop-filter:blur(8px) saturate(1.15); border-left:1px solid var(--line); z-index:80; transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.9,.35,1); padding:26px 22px; display:flex; flex-direction:column; gap:22px; box-shadow:-20px 0 50px -20px rgba(0,0,0,0.6);}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{font-size:17px; font-weight:600; color:var(--cream);}
.mobile-overlay{position:fixed; inset:0; background:var(--scrim); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s;}
.mobile-overlay.open{opacity:1; pointer-events:auto;}
.mobile-close{align-self:flex-start; background:none; color:var(--cream-dim); font-size:14px; display:flex; align-items:center; gap:8px; transition:color .2s;}
.mobile-close:hover{color:var(--sakura-bright);}

/* PAGE HERO (small, for inner pages) */
.page-hero{padding:64px 0 20px; position:relative; z-index:3;}
.page-hero .section-tag{color:var(--sakura-bright); font-size:13px; font-weight:700; margin-bottom:12px;}
.page-hero h1{font-size:clamp(28px,4vw,42px); font-weight:800; margin-bottom:12px;}
.page-hero p{color:var(--cream-dim); max-width:60ch; font-size:15.5px;}

/* HOME HERO */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; z-index:3;}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(240,168,196,0.16), transparent 55%),
    radial-gradient(ellipse at 82% 75%, rgba(111,146,115,0.14), transparent 50%);
  z-index:-1;
}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:50px; align-items:center; width:100%;}
.eyebrow-badge{display:inline-flex; align-items:center; gap:8px; background:var(--navy-soft); border:1px solid var(--line); padding:7px 14px; border-radius:100px; font-size:13px; color:var(--sakura-bright); margin-bottom:22px;}
.eyebrow-badge .dot{width:7px; height:7px; border-radius:50%; background:#5fd97e; box-shadow:0 0 8px #5fd97e;}
h1.hero-title{font-size:clamp(36px,5.6vw,60px); font-weight:800; line-height:1.18; margin-bottom:20px;}
h1.hero-title em{font-style:normal; color:var(--sakura-bright);}
.hero-sub{font-size:17px; color:var(--cream-dim); max-width:52ch; margin-bottom:34px;}
.ip-box{
  display:flex; align-items:center; background:var(--navy); border:1px solid var(--line);
  border-radius:14px; padding:8px 8px 8px 22px; max-width:430px; gap:14px;
}
.ip-box .ip-text{font-family:'Press Start 2P'; font-size:13px; color:var(--cream); flex:1; letter-spacing:1px;}
.copy-btn{background:var(--moss); color:#0e1510; font-weight:700; padding:13px 20px; border-radius:9px; font-size:14px; display:flex; align-items:center; gap:8px; transition:transform .18s, background .2s;}
.copy-btn:hover{background:#7fa384; transform:translateY(-1px);}
.copy-btn.copied{background:var(--moss); color:#0e1510;}
.hero-meta{display:flex; gap:28px; margin-top:30px; flex-wrap:wrap;}
.meta-item{display:flex; align-items:center; gap:10px;}
.meta-item .num{font-family:'Press Start 2P'; font-size:16px; color:var(--sakura-bright);}
.meta-item .lbl{font-size:13px; color:var(--cream-dim);}
.pulse-dot{width:9px; height:9px; border-radius:50%; background:#5fd97e; box-shadow:0 0 0 rgba(95,217,126,.5); animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,217,126,.5);}70%{box-shadow:0 0 0 9px rgba(95,217,126,0);}100%{box-shadow:0 0 0 0 rgba(95,217,126,0);}}
.hero-art{position:relative; height:440px;}
.hero-art svg{width:100%; height:100%;}
.tree-sway{animation:treeSway 6s ease-in-out infinite;}
@keyframes treeSway{
  0%,100%{transform:rotate(-1.1deg);}
  50%{transform:rotate(1.1deg);}
}
.tree-sway.shaking{animation:treeShake .5s ease-out;}
@keyframes treeShake{
  0%{transform:rotate(-1.1deg) scale(1,1);}
  22%{transform:rotate(-3.6deg) scale(1.012,.985);}
  46%{transform:rotate(2.4deg) scale(.99,1.012);}
  70%{transform:rotate(-1.2deg) scale(1.005,.996);}
  100%{transform:rotate(-1.1deg) scale(1,1);}
}
#treeHitArea{transition:opacity .2s;}
#treeShed{position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:2;}
.shed-petal{
  position:absolute; width:9px; height:12px;
  background:linear-gradient(135deg, #fff6fa, var(--petal-color, var(--sakura-bright)));
  border-radius:0 70% 0 70%;
  opacity:.95;
  animation:shedFall var(--fall-dur,2.4s) cubic-bezier(.33,0,.2,1) forwards;
}
@keyframes shedFall{
  0%{transform:translate(0,0) rotate(0deg); opacity:.95;}
  55%{transform:translate(var(--sx1,15px), var(--sy1,110px)) rotate(var(--rot1,150deg)); opacity:.9;}
  100%{transform:translate(var(--sx2,-10px), var(--sy2,230px)) rotate(var(--rot2,300deg)); opacity:0;}
}
.floating-petal-1, .floating-petal-2, .floating-petal-3{animation:heroFloatPetal 4.5s ease-in-out infinite;}
.floating-petal-2{animation-delay:1.3s;}
.floating-petal-3{animation-delay:2.5s;}
@keyframes heroFloatPetal{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(16px) rotate(30deg);}
}

/* SECTION generic */
section{position:relative; padding:100px 0; z-index:3;}
.page-section{padding:50px 0 100px;}
.section-head{max-width:620px; margin-bottom:52px; padding-inline:8px;}
.section-tag{color:var(--sakura-bright); font-size:13px; font-weight:700; margin-bottom:12px;}
.section-title{font-size:clamp(26px,3.4vw,36px); font-weight:800; margin-bottom:14px;}
.section-desc{color:var(--cream-dim); font-size:15.5px;}

/* GAMEMODES */
.modes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.mode-card{background:var(--navy); border:1px solid var(--line); border-radius:18px; padding:30px 26px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s;}
.mode-card:hover{border-color:var(--sakura-deep); transform:translateY(-4px);}
.mode-card .icon{width:44px; height:44px; margin-bottom:20px;}
.mode-card h3{font-size:19px; font-weight:700; margin-bottom:10px;}
.mode-card p{color:var(--cream-dim); font-size:14.5px;}
.mode-badge{position:absolute; top:22px; left:26px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px;}
.mode-badge.live{background:rgba(95,217,126,0.15); color:#5fd97e;}
.mode-badge.soon{background:rgba(138,98,72,0.22); color:#c9a583;}

/* DOWNLOADS */
.dl-picker{display:flex; flex-direction:column; gap:22px; margin-bottom:30px; padding:22px; background:var(--navy); border:1px solid var(--line); border-radius:16px;}
.dl-step{display:flex; flex-direction:column; gap:10px;}
.dl-step-label{font-size:13px; font-weight:700; color:var(--cream-dim);}
.dl-step .tabs{margin-bottom:0;}
.tabs{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.tab-btn{background:var(--navy); border:1px solid var(--line); padding:11px 20px; border-radius:10px; font-size:14px; font-weight:600; color:var(--cream-dim); transition:.2s;}
.tab-btn.active{background:var(--moss); color:#0e1510; border-color:var(--moss);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.dl-card{background:var(--navy); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px;}
.dl-top{display:flex; align-items:center; justify-content:space-between;}
.dl-kind{font-size:11px; font-weight:700; color:var(--moss); background:rgba(111,146,115,0.15); padding:4px 10px; border-radius:100px;}
.dl-card h4{font-size:16px; font-weight:700;}
.dl-card p{font-size:13.5px; color:var(--cream-dim); flex:1;}
.dl-btn{border:1px solid var(--line); background:var(--navy-soft); text-align:center; padding:10px; border-radius:9px; font-size:13.5px; font-weight:600; transition:.2s;}
.dl-btn:hover{border-color:var(--sakura-bright); color:var(--sakura-bright);}
.dl-pagination{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:28px;}
.page-btn{background:var(--navy); border:1px solid var(--line); color:var(--cream-dim); padding:9px 14px; border-radius:9px; font-size:13.5px; font-weight:600; transition:.2s;}
.page-btn:hover:not(:disabled){border-color:var(--sakura-bright); color:var(--sakura-bright);}
.page-btn.active{background:var(--moss); color:#0e1510; border-color:var(--moss);}
.page-btn:disabled{opacity:.4;}
.page-btn.page-num{min-width:40px;}
.version-note{font-size:12.5px; color:var(--cream-dim); margin-top:6px;}

/* SHOP */
.shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.pack-card{background:var(--navy); border:1px solid var(--line); border-radius:18px; padding:28px 22px; display:flex; flex-direction:column; gap:16px; position:relative;}
.pack-card.featured{border-color:var(--moss); box-shadow:0 0 0 1px var(--moss), 0 18px 40px -18px rgba(111,146,115,0.35);}
.pack-tag{position:absolute; top:-13px; right:22px; background:var(--moss); color:#0e1510; font-size:11px; font-weight:800; padding:5px 12px; border-radius:100px;}
.pack-card h4{font-size:18px; font-weight:800;}
.pack-price{font-family:'Press Start 2P'; font-size:20px; color:var(--sakura-bright);}
.pack-price span{font-family:'Vazirmatn'; font-size:13px; color:var(--cream-dim); font-weight:500;}
.pack-list{display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--cream-dim);}
.pack-list li{display:flex; gap:8px; align-items:flex-start;}
.pack-list li::before{content:'✿'; color:var(--moss); flex-shrink:0;}
.add-cart-btn{margin-top:auto; background:var(--navy-soft); border:1px solid var(--line); padding:12px; border-radius:9px; font-weight:700; font-size:14px; transition:.2s;}
.add-cart-btn:hover{background:var(--moss); color:#0e1510; border-color:var(--moss);}

/* DONATE STRIP */
.donate-strip{
  background:linear-gradient(120deg, var(--sakura-deep), var(--sakura-bright));
  border-radius:22px; padding:46px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#2a1220; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.donate-strip h3{font-size:24px; font-weight:800; margin-bottom:8px;}
.donate-strip p{opacity:0.85; font-size:14.5px; max-width:48ch;}
.donate-btn{background:#2a1220; color:var(--cream); font-weight:800; padding:16px 30px; border-radius:11px; font-size:15px; display:flex; align-items:center; gap:10px; animation:donatepulse 2.4s infinite;}
@keyframes donatepulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.donate-ways{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;}
.donate-way{background:var(--navy); border:1px solid var(--line); border-radius:16px; padding:26px; text-align:center;}
.donate-way h4{margin-bottom:10px; font-size:16px;}
.donate-way p{color:var(--cream-dim); font-size:13.5px; margin-bottom:16px;}

/* FLOATING DONATE — liquid glass pill + radar rings + sparkles */
.float-donate-wrap{position:fixed; bottom:26px; left:26px; z-index:60;}
.float-donate{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:15px 24px 15px 21px; border-radius:100px;
  color:#2a1220; font-weight:800; font-size:14.5px;
  background:linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,143,184,0.62) 45%, rgba(214,120,159,0.72));
  backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 16px 40px -12px rgba(255,80,140,0.6), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -8px 16px -10px rgba(120,20,60,0.4);
  overflow:hidden; isolation:isolate;
  animation:donateFloatBob 3.2s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  will-change:transform;
}
.float-donate:hover{transform:translateY(-7px) scale(1.07); box-shadow:0 22px 50px -12px rgba(255,80,140,0.75), inset 0 1px 0 rgba(255,255,255,0.75); animation-play-state:paused;}
@keyframes donateFloatBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.float-donate-emoji{position:relative; z-index:1; display:inline-block; font-size:16px; animation:donateEmojiWiggle 2.2s ease-in-out infinite; transform-origin:60% 70%;}
@keyframes donateEmojiWiggle{
  0%,100%{transform:rotate(0deg) scale(1);}
  25%{transform:rotate(-16deg) scale(1.12);}
  50%{transform:rotate(2deg) scale(1);}
  75%{transform:rotate(16deg) scale(1.12);}
}
.float-donate-text{position:relative; z-index:1;}
.float-donate-ring{position:absolute; inset:-2px; border-radius:100px; pointer-events:none; border:2px solid var(--sakura-bright); opacity:0; animation:donateRingPing 2.8s ease-out infinite;}
.float-donate-ring.ring2{animation-delay:1.4s; border-color:var(--sakura);}
@keyframes donateRingPing{
  0%{transform:scale(0.92); opacity:0.75;}
  75%{opacity:0;}
  100%{transform:scale(1.55); opacity:0;}
}
.donate-sparkle{position:fixed; z-index:59; border-radius:50%; background:var(--sakura-bright); pointer-events:none; animation:donateSparkleUp 1.6s ease-out forwards;}
@keyframes donateSparkleUp{
  0%{transform:translate(0,0) scale(1); opacity:0.9;}
  100%{transform:translate(var(--sx,0), -46px) scale(0.2); opacity:0;}
}

/* CART DRAWER */
.cart-drawer{position:fixed; inset:0 0 0 auto; width:min(90vw,400px); background:linear-gradient(165deg, rgba(42,47,71,0.82), rgba(23,26,38,0.9)); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border-left:1px solid var(--line); z-index:90; transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.9,.35,1); display:flex; flex-direction:column; box-shadow:-20px 0 50px -20px rgba(0,0,0,0.6);}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:22px; border-bottom:1px solid var(--line);}
.cart-items{flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:14px;}
.cart-item{display:flex; justify-content:space-between; align-items:center; background:var(--navy-soft); border-radius:10px; padding:12px 14px; font-size:13.5px;}
.cart-item button{color:var(--sakura-bright); font-size:12px; font-weight:700;}
.cart-close-btn{width:34px; height:34px; border-radius:10px; background:var(--navy-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cream-dim); transition:transform .3s ease, background .25s, color .25s;}
.cart-close-btn:hover{background:var(--sakura); color:#2a1220; transform:rotate(90deg);}
.remove-item{width:30px; height:30px; border-radius:9px; background:transparent; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--cream-dim); transition:transform .2s, background .2s, color .2s, border-color .2s; flex-shrink:0;}
.remove-item:hover{background:rgba(214,120,159,0.15); border-color:var(--sakura-deep); color:var(--sakura-bright); transform:scale(1.1);}

/* LIQUID BLOB decoration
   PERF FIX: this used to also run an infinite "blobMorph" animation that keyframed
   border-radius every frame. Animating border-radius forces the browser to repaint
   a 55px-blurred shape on every single frame (it can't be handled by the GPU compositor
   the way transform can), which was the main cause of pages with this element (login,
   donate, index) feeling slow and everything else on the page — including nearby hover
   transitions — feeling laggy. The shape is now fixed and only the cheap, GPU-accelerated
   transform drift keeps it animated, which looks basically identical but costs a fraction
   of the previous frame time. */
.liquid-blob{
  position:absolute; filter:blur(55px); opacity:0.32; pointer-events:none; z-index:0;
  border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;
  animation:blobDrift 15s ease-in-out infinite;
  will-change:transform;
}
@keyframes blobDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(22px,-18px) scale(1.08);}
}
.liquid-blob.moss{background:linear-gradient(135deg, var(--moss), var(--moss-deep));}
.liquid-blob.sakura{background:linear-gradient(135deg, var(--sakura), var(--sakura-deep));}

/* global press feedback for interactive buttons */
.submit-btn, .add-cart-btn, .copy-btn, .checkout-btn, .donate-btn, .ping-btn,
.dl-btn, .tab-btn, .btn-auth, .social-btn, .auth-tab, .cart-close-btn, .remove-item{
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.submit-btn:active, .add-cart-btn:active, .copy-btn:active, .checkout-btn:active,
.donate-btn:active, .ping-btn:active, .dl-btn:active{transform:scale(0.96);}

/* shimmer sweep on donate CTAs */
.donate-btn, .float-donate{position:relative; overflow:hidden;}
.donate-btn::after, .float-donate::after{
  content:''; position:absolute; inset:0; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:translateX(-150%) skewX(-20deg);
  animation:shimmerSweep 3.2s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{transform:translateX(-150%) skewX(-20deg);}
  60%,100%{transform:translateX(350%) skewX(-20deg);}
}
.cart-empty{color:var(--cream-dim); font-size:14px; text-align:center; margin-top:40px;}
.cart-foot{padding:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px;}
.cart-total{display:flex; justify-content:space-between; font-weight:700; font-size:15px;}
.checkout-btn{background:var(--moss); color:#0e1510; padding:14px; border-radius:10px; font-weight:800; font-size:14.5px;}
.checkout-btn:hover{background:#7fa384;}

/* ADMIN PANEL */
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:900px){.admin-grid{grid-template-columns:1fr;}}
.admin-card{background:var(--navy); border:1px solid var(--line); border-radius:16px; padding:26px;}
.admin-card h3{font-size:16px; margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.admin-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:36px;}
.stat-box{background:var(--navy); border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center;}
.stat-box .num{font-family:'Press Start 2P'; font-size:18px; color:var(--moss);}
.stat-box .lbl{font-size:12.5px; color:var(--cream-dim); margin-top:8px;}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line);}
.price-row:last-child{border-bottom:none;}
.price-row span{font-size:14px;}
.price-row input{width:110px; background:var(--navy-soft); border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--cream); font-family:inherit;}
.price-row button{background:var(--moss); color:#0e1510; padding:8px 14px; border-radius:8px; font-weight:700; font-size:12.5px;}
.report-list{display:flex; flex-direction:column; gap:12px; margin-top:20px;}
.report-item{background:var(--navy-soft); border-radius:10px; padding:14px; font-size:13.5px;}
.report-item .rt{font-weight:700; margin-bottom:4px;}
.report-item .rd{color:var(--cream-dim); font-size:12.5px;}
textarea{background:var(--navy); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--cream); font-family:inherit; font-size:14px; resize:vertical; min-height:90px;}

/* HOME: FEATURES + ADMINS */
.features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.feature-box{background:var(--navy); border:1px solid var(--line); border-radius:16px; padding:24px 20px;}
.feature-box .icon{width:36px; height:36px; margin-bottom:16px; color:var(--moss);}
.feature-box h4{font-size:15.5px; margin-bottom:8px;}
.feature-box p{font-size:13px; color:var(--cream-dim);}
.admins-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.admin-person{background:var(--navy); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; align-items:center; gap:16px;}
.admin-avatar{width:54px; height:54px; border-radius:12px; background:linear-gradient(135deg, var(--moss), var(--bark)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; color:var(--cream);}
.admin-person .real-name{font-weight:700; font-size:14.5px;}
.admin-person .game-name{font-size:13px; color:var(--sakura-bright); font-family:'Press Start 2P'; font-size:11px; margin-top:6px; display:block;}
.launchers-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.launcher-card{background:var(--navy); border:1px solid var(--line); border-radius:16px; padding:24px; text-align:center; display:flex; flex-direction:column;}
.launcher-icon{width:56px; height:56px; margin:0 auto 16px; border-radius:14px; background:var(--navy-soft); display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P'; font-size:11px; color:var(--moss); border:1px solid var(--line);}
.launcher-card h4{font-size:15px; margin-bottom:8px;}
.launcher-card p{font-size:13px; color:var(--cream-dim); margin-bottom:18px;}
.launcher-card .dl-btn{margin-top:auto;}
@media (max-width:980px){.features-grid{grid-template-columns:repeat(2,1fr);} .admins-grid{grid-template-columns:1fr;} .launchers-grid{grid-template-columns:1fr;}}

/* LEADERBOARD */
.lb-tabs{display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap;}
.lb-panel{display:none;}
.lb-panel.active{display:block;}
.lb-table{background:var(--navy); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.lb-row{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-family:'Press Start 2P'; font-size:13px; width:28px; color:var(--cream-dim); flex-shrink:0;}
.lb-row:nth-child(1) .lb-rank{color:#e8c96a;}
.lb-row:nth-child(2) .lb-rank{color:#c9c9d4;}
.lb-row:nth-child(3) .lb-rank{color:#cf9a6b;}
.lb-avatar{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--moss), var(--bark)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:var(--cream); flex-shrink:0;}
.lb-name{flex:1; font-size:14px; font-weight:600;}
.lb-value{font-family:'Press Start 2P'; font-size:12px; color:var(--sakura-bright);}

/* ADMIN ONLINE STATUS */
.admin-person{position:relative; flex-wrap:wrap;}
.admin-status{display:flex; align-items:center; gap:6px; margin-inline-start:auto; font-size:12px;}
.admin-status .dot{width:8px; height:8px; border-radius:50%;}
.admin-status.online .dot{background:#5fd97e; box-shadow:0 0 6px #5fd97e;}
.admin-status.offline .dot{background:#6b7280;}
.admin-status.online{color:#5fd97e;}
.admin-status.offline{color:var(--cream-dim);}
.ping-btn{background:var(--navy-soft); border:1px solid var(--line); padding:7px 12px; border-radius:8px; font-size:12px; font-weight:700; margin-inline-start:10px;}
.ping-btn:hover{border-color:var(--moss); color:var(--moss);}

/* SCROLL REVEAL */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.9,.35,1), transform .7s cubic-bezier(.22,.9,.35,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* FAST, CLEAN CARD HOVER — original visual preserved, transitions synchronized */
.feature-box, .mode-card, .launcher-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .22s cubic-bezier(.22,.9,.35,1), border-color .22s cubic-bezier(.22,.9,.35,1), box-shadow .22s cubic-bezier(.22,.9,.35,1), background-color .22s cubic-bezier(.22,.9,.35,1);
  will-change:transform;
}

.feature-box::after, .mode-card::after, .launcher-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s cubic-bezier(.22,.9,.35,1), border-color .22s cubic-bezier(.22,.9,.35,1);
}

.feature-box:hover, .mode-card:hover, .launcher-card:hover,
.feature-box.hover-touch, .mode-card.hover-touch, .launcher-card.hover-touch{
  transform:translate3d(0,-4px,0);
  border-color:var(--sakura-deep);
  box-shadow:0 10px 24px -20px rgba(240,168,196,.75), 0 0 0 1px rgba(240,168,196,.08);
}

.feature-box:hover::after, .mode-card:hover::after, .launcher-card:hover::after,
.feature-box.hover-touch::after, .mode-card.hover-touch::after, .launcher-card.hover-touch::after{
  opacity:1;
  border-color:rgba(240,168,196,.42);
}

.feature-box .icon, .mode-card .icon{
  transition:transform .22s cubic-bezier(.22,.9,.35,1), color .22s cubic-bezier(.22,.9,.35,1), filter .22s cubic-bezier(.22,.9,.35,1);
  will-change:transform;
}
.feature-box:hover .icon, .mode-card:hover .icon,
.feature-box.hover-touch .icon, .mode-card.hover-touch .icon{
  transform:translate3d(0,-2px,0) scale(1.045);
  color:var(--sakura-bright);
  filter:drop-shadow(0 4px 8px rgba(240,168,196,.18));
}

.feature-box h3, .feature-box h4, .mode-card h3{
  transition:color .22s cubic-bezier(.22,.9,.35,1);
}
.feature-box:hover h3, .feature-box:hover h4, .mode-card:hover h3,
.feature-box.hover-touch h3, .feature-box.hover-touch h4, .mode-card.hover-touch h3{
  color:var(--sakura-bright);
}

.admin-person:hover{border-color:var(--sakura-deep); transform:translate3d(0,-3px,0); box-shadow:0 12px 26px -24px rgba(240,168,196,.55);}

@media (hover: none), (pointer: coarse){
  .feature-box:hover, .mode-card:hover, .launcher-card:hover,
  .feature-box:hover .icon, .mode-card:hover .icon,
  .feature-box:hover h3, .feature-box:hover h4, .mode-card:hover h3{
    transform:none;
    color:inherit;
    border-color:inherit;
    box-shadow:none;
    filter:none;
  }
  .feature-box:hover::after, .mode-card:hover::after, .launcher-card:hover::after{
    opacity:0;
    border-color:transparent;
  }
}

@media (prefers-reduced-motion: reduce){
  .feature-box, .mode-card, .launcher-card, .admin-person, .feature-box::after, .mode-card::after, .launcher-card::after, .feature-box .icon, .mode-card .icon, .feature-box h3, .feature-box h4, .mode-card h3{transition:none !important;}
  .feature-box:hover, .mode-card:hover, .launcher-card:hover, .admin-person:hover, .feature-box:hover .icon, .mode-card:hover .icon, .feature-box.hover-touch, .mode-card.hover-touch, .launcher-card.hover-touch, .feature-box.hover-touch .icon, .mode-card.hover-touch .icon{transform:none;}
}

/* AUTH PAGE — split panel layout */
.auth-shell{
  max-width:960px; margin:0 auto; padding:30px 16px 120px;
  display:grid; grid-template-columns:0.85fr 1.15fr;
  border-radius:26px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  position:relative; backdrop-filter:blur(2px);
}
.auth-side{
  background:linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  padding:56px 46px; display:flex; flex-direction:column; justify-content:center;
  gap:22px; position:relative; overflow:hidden;
}
.auth-side::before{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,168,196,0.2), transparent 70%);
  top:-90px; right:-90px; pointer-events:none;
}
.auth-side::after{
  content:''; position:absolute; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,146,115,0.16), transparent 70%);
  bottom:-80px; left:-80px; pointer-events:none;
}
.auth-side > *{position:relative; max-width:280px;}
.auth-side > .liquid-blob{position:absolute; max-width:none;}
.auth-side .auth-blossom{width:44px; height:44px; margin-bottom:6px; max-width:none;}
.auth-side h2{font-size:23px; font-weight:800; line-height:1.55;}
.auth-side p{color:var(--cream-dim); font-size:14px; line-height:1.8;}
.auth-perks{display:flex; flex-direction:column; gap:15px; margin-top:8px;}
.auth-perk{display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--cream-dim);}
.auth-perk .dot{width:8px; height:8px; border-radius:50%; background:var(--moss); flex-shrink:0;}
.auth-form-side{background:rgba(31,36,54,0.55); backdrop-filter:blur(6px);}
.auth-tabs{position:relative; display:flex; gap:6px; background:var(--navy-soft); border:1px solid var(--line); border-radius:12px; padding:5px; margin-bottom:32px; isolation:isolate;}
.auth-tab{flex:1; text-align:center; padding:12px; border-radius:9px; font-weight:700; font-size:14px; color:var(--cream-dim); background:transparent; position:relative; z-index:1; transition:color .25s ease;}
.auth-tab.active{color:#0e1510;}
.auth-tab-indicator{
  position:absolute; top:5px; bottom:5px; right:5px; width:calc(50% - 8px);
  background:linear-gradient(135deg, var(--moss), #7fa384); border-radius:9px; z-index:0;
  box-shadow:0 6px 16px -6px rgba(111,146,115,0.65);
  transition:transform .32s cubic-bezier(.34,1.4,.5,1);
}
.auth-tab-indicator.pos-1{transform:translateX(-100%);}
.auth-form{display:flex; flex-direction:column; gap:20px; opacity:0; max-height:0; overflow:hidden; pointer-events:none; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease;}
.auth-form.active{display:flex; opacity:1; max-height:none; overflow:visible; pointer-events:auto; transform:translateY(0);}
.field{display:flex; flex-direction:column; gap:9px;}
.field label{font-size:13.5px; color:var(--cream-dim); font-weight:500;}
.field input{background:var(--navy-soft); border:1px solid var(--line); border-radius:11px; padding:14px 16px; color:var(--cream); font-family:inherit; font-size:14.5px; transition:border-color .2s;}
.field input:focus{outline:none; border-color:var(--moss);}
.field-hint{font-size:12px; color:var(--cream-dim); line-height:1.6;}
.submit-btn{background:var(--moss); color:#0e1510; padding:15px; border-radius:11px; font-weight:800; font-size:15px; margin-top:10px;}
.submit-btn:hover{background:#7fa384;}
.form-msg{font-size:13.5px; padding:13px 15px; border-radius:10px; display:none; line-height:1.7;}
.form-msg.show{display:block; margin-bottom:4px;}
.form-msg.error{background:rgba(214,120,159,0.15); color:var(--sakura-bright);}
.form-msg.success{background:rgba(111,146,115,0.18); color:#8fce97;}
@media (max-width:800px){
  .auth-shell{grid-template-columns:1fr; border-radius:22px; padding:20px 12px 100px;}
  .auth-side{padding:38px 30px;}
  .auth-form-side{padding:38px 28px;}
}

footer{border-top:1px solid var(--line); padding:60px 0 30px; position:relative; z-index:3; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.15));}
.footer-top{display:grid; grid-template-columns:1.3fr 0.8fr 0.8fr 1.1fr; gap:36px; margin-bottom:40px;}
.footer-brand p{color:var(--cream-dim); font-size:13.5px; max-width:34ch; margin-top:10px; line-height:1.8;}
.footer-social{display:flex; gap:10px; margin-top:18px;}
.social-btn{width:38px; height:38px; border-radius:10px; background:var(--navy-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cream-dim); transition:.25s;}
.social-btn:hover{background:var(--moss); color:#0e1510; border-color:var(--moss); transform:translateY(-3px);}
.footer-col h5{font-size:13px; color:var(--cream-dim); margin-bottom:16px; letter-spacing:.5px;}
.footer-col a{display:block; font-size:14px; margin-bottom:11px; color:var(--cream); transition:color .2s, transform .2s;}
.footer-col a:hover{color:var(--sakura-bright); transform:translateX(-3px);}
.footer-cta p{color:var(--cream-dim); font-size:13px; margin-bottom:14px; line-height:1.8;}
.footer-bottom{border-top:1px solid var(--line); padding-top:22px; font-size:12.5px; color:var(--cream-dim); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.footer-bottom .footer-ip{font-family:'Press Start 2P'; font-size:10px; color:var(--cream-dim);}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr; row-gap:30px;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{justify-content:center; text-align:center;}
}

.toast{position:fixed; bottom:26px; right:26px; background:rgba(111,146,115,0.85); backdrop-filter:blur(7px) saturate(1.15); -webkit-backdrop-filter:blur(7px) saturate(1.15); border:1px solid rgba(255,255,255,0.18); color:#0e1510; padding:13px 20px; border-radius:10px; font-size:13.5px; font-weight:700; z-index:100; transform:translateY(120%); transition:transform .35s cubic-bezier(.34,1.56,.64,1); box-shadow:0 14px 34px -14px rgba(0,0,0,0.5);}
.toast.show{transform:translateY(0);}

/* ================= COSMIC SAKURA — starfield behind the petals ================= */
.star-field{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.star{position:absolute; border-radius:50%; background:#fff; animation:starTwinkle ease-in-out infinite;}
@keyframes starTwinkle{0%,100%{opacity:0.12;} 50%{opacity:1;}}
.shooting-star{
  position:absolute; width:130px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,143,184,0.4), transparent);
  opacity:0; transform:rotate(-32deg);
}
.shooting-star.go{animation:shootingStarGo 1.25s ease-in forwards;}
@keyframes shootingStarGo{
  0%{opacity:0; transform:rotate(-32deg) translateX(0);}
  12%{opacity:1;}
  75%{opacity:.7;}
  100%{opacity:0; transform:rotate(-32deg) translateX(-380px);}
}

/* ================= CLICK FX — soft sakura petal burst ================= */
#clickFX{position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden;}
.hit-pop{
  position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), var(--sakura-bright) 55%, transparent 75%);
  animation:hitPop .38s ease-out forwards;
}
@keyframes hitPop{0%{transform:scale(.4);opacity:.9;}100%{transform:scale(2.6);opacity:0;}}
.hit-petal{
  position:absolute; width:9px; height:11px; margin:-5px 0 0 -4px;
  background:linear-gradient(135deg, #fff6fa, var(--petal-color, var(--sakura-bright)));
  border-radius:0 70% 0 70%;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  animation:hitPetalFly .78s cubic-bezier(.16,.8,.28,1) forwards;
}
@keyframes hitPetalFly{
  0%{transform:translate(0,0) rotate(var(--start-rot,0deg)) scale(.6); opacity:.95;}
  65%{opacity:1;}
  100%{transform:translate(var(--sx,0), var(--sy,42px)) rotate(var(--end-rot,220deg)) scale(.85); opacity:0;}
}

/* ================= CART LIVELINESS ================= */
.cart-count{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.cart-count.bump{animation:cartCountBump .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes cartCountBump{
  0%{transform:scale(1);} 35%{transform:scale(1.55) rotate(-8deg);} 65%{transform:scale(0.9) rotate(4deg);} 100%{transform:scale(1) rotate(0);}
}
.cart-btn.shake{animation:cartShake .45s ease;}
@keyframes cartShake{
  0%,100%{transform:rotate(0);} 20%{transform:rotate(-9deg);} 40%{transform:rotate(8deg);} 60%{transform:rotate(-6deg);} 80%{transform:rotate(4deg);}
}
.cart-item{animation:cartItemIn .4s cubic-bezier(.22,.9,.35,1) both;}
@keyframes cartItemIn{
  0%{opacity:0; transform:translateX(18px) scale(.95);}
  100%{opacity:1; transform:translateX(0) scale(1);}
}
/* PERF FIX: this used to transition "left"/"top"/"width"/"height", which are layout
   properties — the browser has to re-run layout on every single animation frame to
   move this dot, which is one of the more expensive things you can animate. It's now
   positioned once with left/top and animated purely with transform + opacity, which the
   browser can hand straight to the compositor/GPU. Same visual result, far cheaper. */
.fly-dot{
  position:fixed; z-index:200; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--sakura-bright), var(--sakura-deep));
  box-shadow:0 0 10px 2px rgba(255,143,184,0.6);
  will-change:transform, opacity;
  transition:transform .55s cubic-bezier(.3,.6,.15,1), opacity .55s ease .2s;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1 !important; transform:none !important;}
  .star-field, #clickFX{display:none !important;}
}

@media (max-width:980px){
  .modes-grid{grid-template-columns:repeat(2,1fr);}
  .dl-grid{grid-template-columns:repeat(2,1fr);}
  .shop-grid{grid-template-columns:repeat(2,1fr);}
  .donate-ways{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{height:280px; order:-1;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .modes-grid, .dl-grid, .shop-grid{grid-template-columns:1fr;}
  section{padding:70px 0;}
  .page-section{padding:30px 0 70px;}
  .donate-strip{flex-direction:column; align-items:flex-start; padding:32px;}
  .float-donate-wrap{left:14px; bottom:14px;}
  .float-donate{padding:12px 18px; font-size:13px;}
  .header-auth-btn{display:none;}
}

/* CHECKOUT CONFIRMATION */
.checkout-wrap{max-width:560px; margin:0 auto; padding:20px 0 110px; text-align:center;}
.checkout-icon{width:80px; height:80px; margin:0 auto 26px; border-radius:50%; background:rgba(111,146,115,0.15); display:flex; align-items:center; justify-content:center; color:var(--moss);}
.checkout-card{background:var(--navy); border:1px solid var(--line); border-radius:22px; padding:36px 32px; text-align:right; margin-top:30px;}
.checkout-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;}
.checkout-row:last-child{border-bottom:none;}
.checkout-total-row{display:flex; justify-content:space-between; padding-top:18px; font-weight:800; font-size:17px;}
.page-loader{
  position:fixed; inset:0; z-index:999; background:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.page-loader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.loader-inner{display:flex; flex-direction:column; align-items:center; gap:26px;}
.bloom{width:96px; height:96px; position:relative;}
.bloom svg{width:100%; height:100%; overflow:visible;}
.bloom .petal-b{
  transform-origin:48px 48px;
  transform:rotate(var(--rot,0deg)) scale(0.25);
  animation:bloomOpen 2.6s cubic-bezier(.34,1.4,.5,1) infinite;
}
.bloom .petal-b:nth-child(1){animation-delay:0s;}
.bloom .petal-b:nth-child(2){animation-delay:.08s;}
.bloom .petal-b:nth-child(3){animation-delay:.16s;}
.bloom .petal-b:nth-child(4){animation-delay:.24s;}
.bloom .petal-b:nth-child(5){animation-delay:.32s;}
@keyframes bloomOpen{
  0%{transform:rotate(var(--rot,0deg)) scale(0.25); opacity:.35;}
  35%{transform:rotate(var(--rot,0deg)) scale(1); opacity:1;}
  70%{transform:rotate(var(--rot,0deg)) scale(1); opacity:1;}
  100%{transform:rotate(var(--rot,0deg)) scale(0.25); opacity:.35;}
}
.bloom .center-dot{fill:var(--bark);}
.loader-text{font-size:14px; color:var(--cream-dim); letter-spacing:2px;}
.loader-text .dotir{color:var(--sakura-bright);}
.loader-dots{display:flex; gap:6px;}
.loader-dots span{width:6px; height:6px; border-radius:50%; background:var(--moss); animation:dotPulse 1.2s ease-in-out infinite;}
.loader-dots span:nth-child(2){animation-delay:.15s;}
.loader-dots span:nth-child(3){animation-delay:.3s;}
@keyframes dotPulse{
  0%,100%{opacity:.3; transform:scale(0.8);}
  50%{opacity:1; transform:scale(1.15);}
}

/* ================= LIGHT THEME: glass-surface adjustments ================= */
html[data-theme="light"] header{
  background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,243,238,0.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 30px -20px rgba(30,30,40,0.18);
}
html[data-theme="light"] .mobile-nav{background:linear-gradient(165deg, rgba(255,255,255,0.92), rgba(247,243,238,0.96)); box-shadow:-20px 0 50px -20px rgba(30,30,40,0.25);}
html[data-theme="light"] .cart-drawer{background:linear-gradient(165deg, rgba(255,255,255,0.92), rgba(247,243,238,0.96)); box-shadow:-20px 0 50px -20px rgba(30,30,40,0.25);}
html[data-theme="light"] .auth-form-side{background:rgba(255,255,255,0.7);}
html[data-theme="light"] .star-field{display:none;}
.cart-btn svg{stroke:var(--cream);}

/* ---- theme toggle button ---- */
.theme-toggle{
  position:relative; width:42px; height:42px; border-radius:10px;
  background:var(--navy-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .25s ease;
}
.theme-toggle:hover{transform:translateY(-1px);}
.theme-toggle svg{width:18px; height:18px; stroke:var(--cream); transition:opacity .2s ease, transform .35s ease;}
.theme-toggle .icon-sun{position:absolute; opacity:0; transform:rotate(-40deg) scale(.6);}
.theme-toggle .icon-moon{opacity:1; transform:rotate(0) scale(1);}
html[data-theme="light"] .theme-toggle .icon-sun{opacity:1; transform:rotate(0) scale(1);}
html[data-theme="light"] .theme-toggle .icon-moon{opacity:0; transform:rotate(40deg) scale(.6);}

/* ================= POLISH PATCH — layout, light theme & performance ================= */
/* Keep existing motion/keyframes untouched; these rules only reduce layout/paint pressure. */
.wrap{width:100%; min-width:0;}
.page-hero,
.section-head{width:100%; min-width:0;}
.page-hero h1,
.page-hero p,
.section-title,
.section-desc{max-width:100%; overflow-wrap:break-word; word-break:normal;}
.page-hero h1{line-height:1.4;}
.section-head{margin-inline:0 auto;}

/* The floating support pill stays, but the expanding outline/radar effect is removed. */
.float-donate-ring{display:none !important;}
.float-donate{
  box-shadow:0 12px 30px -14px rgba(255,80,140,0.55), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -8px 16px -10px rgba(120,20,60,0.28);
}

/* Toast: fully leaves the viewport when hidden instead of leaving a visual remnant. */
.toast{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0, calc(100% + 28px), 0);
  will-change:transform, opacity;
}
.toast.show{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0);
}

/* Auth split panel: cleaner separation without touching the existing tab/form animation. */
.auth-shell{gap:14px;}
.auth-side,
.auth-form-side{
  border:1px solid var(--line);
  border-radius:18px;
}
.auth-form-side{padding:44px 42px; min-width:0;}
.auth-side{min-width:0;}
.auth-tabs{margin-bottom:28px;}

/* Prevent long Persian/Latin strings from pushing a grid wider than the viewport. */
.auth-side h2,
.auth-side p,
.auth-perk,
.pack-list li,
.feature-box p,
.launcher-card p,
.lb-name,
.lb-value{min-width:0; overflow-wrap:anywhere;}

/* Reduce expensive compositing surfaces slightly while preserving their appearance and motion. */
@media (max-width:720px){
  .page-hero{padding-top:44px;}
  .page-hero h1{font-size:clamp(26px,7.5vw,34px); line-height:1.45;}
  .page-hero p{font-size:15px; line-height:1.9;}
  .section-head{margin-bottom:34px;}
  .section-title{line-height:1.5;}
  .auth-shell{padding:16px 8px 100px; gap:12px;}
  .auth-side{padding:34px 24px;}
  .auth-form-side{padding:30px 22px;}
  header{backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);}
  .float-donate{backdrop-filter:blur(10px) saturate(1.35); -webkit-backdrop-filter:blur(10px) saturate(1.35);}
  .toast{left:14px; right:14px; bottom:14px; text-align:center;}
}

@media (min-width:721px){
  .auth-side{border-radius:20px 18px 18px 20px;}
  .auth-form-side{border-radius:18px 20px 20px 18px;}
}

/* Give the browser clearer containment hints for frequently animated/revealed cards. */
.mode-card,
.feature-box,
.pack-card,
.launcher-card,
.admin-person,
.checkout-card,
.auth-side,
.auth-form-side{contain:layout;}

@media (max-width:720px){
  .float-donate-wrap{left:14px; bottom:calc(14px + env(safe-area-inset-bottom));}
}


/* ================= SECOND POLISH — RTL spacing, mobile menu & light support ================= */
/* Give inner-page headings real breathing room so Persian text never hugs the viewport edge. */
.page-hero,
.page-section > .wrap{padding-inline:clamp(38px, 6vw, 72px);}
.page-hero h1,
.section-title,
.page-hero p,
.section-desc{margin-inline:0; text-wrap:balance;}
.page-hero h1,
.section-title{padding-inline:2px;}
.page-hero > *,
.section-head > *{max-width:100%;}
.page-hero p,
.section-desc{padding-inline-end:4px;}

/* A cleaner drawer header: circular close control, no loose text button. */
.mobile-nav{padding:20px 20px 28px; gap:12px; overflow-y:auto; overscroll-behavior:contain;}
.mobile-nav-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.mobile-nav-title{font-size:13px; font-weight:800; color:var(--cream-dim); letter-spacing:.2px;}
.mobile-close{width:44px; height:44px; min-width:44px; border-radius:12px; align-self:auto; justify-content:center; background:var(--navy-soft); border:1px solid var(--line); color:var(--cream); font-size:0; gap:0; box-shadow:0 8px 22px -16px rgba(0,0,0,.65); transition:background .2s, border-color .2s, color .2s, transform .2s;}
.mobile-close:hover{background:var(--sakura); border-color:var(--sakura); color:#2a1220; transform:scale(1.02);}
.mobile-nav > a:not(.btn-auth){display:flex; align-items:center; min-height:44px; padding:9px 12px; border-radius:10px; color:var(--cream); border:1px solid transparent;}
.mobile-nav > a:not(.btn-auth):hover,
.mobile-nav > a:not(.btn-auth).current{background:var(--navy-soft); border-color:var(--line); color:var(--sakura-bright);}
.mobile-nav > .btn-auth{margin-top:8px; padding:12px 14px; border-radius:11px;}

/* Keep the fixed support pill readable in both themes. */
.float-donate{border-color:rgba(255,255,255,.62);}
html[data-theme="light"] .float-donate{
  color:#4a2033;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,184,211,.92) 48%, rgba(232,149,184,.94));
  border-color:rgba(200,95,141,.28);
  box-shadow:0 14px 34px -14px rgba(190,83,130,.35), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -8px 16px -10px rgba(180,70,115,.16);
}
html[data-theme="light"] .float-donate:hover{
  box-shadow:0 20px 42px -16px rgba(190,83,130,.42), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -8px 16px -10px rgba(180,70,115,.18);
}
html[data-theme="light"] .donate-btn{background:#4a2033; color:#fff7fb;}

@media (max-width:720px){
  .page-hero,
  .page-section > .wrap{padding-inline:34px;}
  .page-hero h1{padding-inline:0; line-height:1.5;}
  .section-title{padding-inline:0; line-height:1.55;}
  .page-hero p,.section-desc{line-height:1.95;}
  .mobile-nav{width:min(86vw,340px); padding:18px 18px calc(24px + env(safe-area-inset-bottom));}
  .mobile-nav-head{margin-bottom:4px;}
}


/* ================= V9 — SMOOTH HOVER + FAQ + FEEDBACK ================= */
/* Hover lag fix:
   Scroll-reveal used an inline transition-delay on the same cards that receive hover.
   That made hover start/finish late and feel out of sync. Reveal timing now lives separately,
   while interaction transitions always start immediately. */
.feature-box, .mode-card, .launcher-card{
  --card-ease:cubic-bezier(.2,.75,.25,1);
  transition:
    transform .24s var(--card-ease),
    border-color .18s ease,
    box-shadow .24s var(--card-ease),
    background-color .22s ease;
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.feature-box::after, .mode-card::after, .launcher-card::after{
  transition:opacity .18s ease, border-color .18s ease;
}
.feature-box:hover, .mode-card:hover, .launcher-card:hover,
.feature-box.hover-touch, .mode-card.hover-touch, .launcher-card.hover-touch{
  transform:translate3d(0,-5px,0);
  border-color:rgba(240,168,196,.65);
  box-shadow:0 14px 30px -24px rgba(240,168,196,.85), 0 0 0 1px rgba(240,168,196,.09);
}
.feature-box .icon, .mode-card .icon{
  transition:transform .24s var(--card-ease), color .18s ease, filter .24s ease;
}
.feature-box:hover .icon, .mode-card:hover .icon,
.feature-box.hover-touch .icon, .mode-card.hover-touch .icon{
  transform:translate3d(0,-3px,0) scale(1.045);
}
.feature-box h3, .feature-box h4, .mode-card h3{
  transition:color .18s ease;
}
/* Brand / Zyran interaction: no slow text jump, just a compact coordinated lift. */
.brand{
  transition:transform .2s var(--card-ease);
  will-change:transform;
}
.brand:hover{transform:translate3d(0,-1px,0);}
.brand-name{transition:color .18s ease, text-shadow .22s ease;}
.brand:hover .brand-name{
  color:var(--cream);
  text-shadow:0 0 18px rgba(240,168,196,.22);
}
.brand:hover .brand-bloom{animation-duration:1.8s;}

/* Reveal delay is reset after an element has entered, so subsequent hover is instant. */
.reveal.in-view{will-change:auto;}
.reveal.reveal-ready{
  transition-delay:0s !important;
}

/* FAQ */
.faq-section{padding-top:72px;}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.faq-item{
  background:var(--navy);
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  transition:border-color .18s ease, background-color .2s ease, box-shadow .22s ease;
  contain:layout paint;
}
.faq-item:hover{border-color:rgba(240,168,196,.4);}
.faq-item[open]{border-color:rgba(240,168,196,.5);box-shadow:0 12px 28px -26px rgba(240,168,196,.7);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 20px;
  font-size:14px;
  font-weight:700;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{
  flex:0 0 28px;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--navy-soft);color:var(--sakura-bright);
  font-size:20px;line-height:1;
  transition:transform .22s ease, background-color .18s ease;
}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:rgba(240,168,196,.14);}
.faq-item p{
  color:var(--cream-dim);
  font-size:13.5px;
  line-height:2;
  padding:0 20px 18px;
  animation:faqOpen .22s ease-out;
}
@keyframes faqOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Feedback */
.feedback-section{padding-top:72px;}
.feedback-panel{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:34px;
  padding:38px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(240,168,196,.10), transparent 32%),
    linear-gradient(145deg,var(--navy),var(--navy-soft));
  box-shadow:0 20px 55px -42px rgba(0,0,0,.8);
}
.feedback-copy .section-title{margin-bottom:12px;}
.feedback-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.feedback-points span{
  padding:7px 11px;border-radius:100px;
  background:rgba(111,146,115,.13);
  border:1px solid rgba(111,146,115,.22);
  color:var(--moss);
  font-size:12px;font-weight:700;
}
.feedback-form{display:grid;gap:13px;}
.feedback-form label{display:grid;gap:6px;font-size:12.5px;font-weight:700;color:var(--cream);}
.feedback-form label span{color:var(--cream-dim);font-weight:500;}
.feedback-form input,.feedback-form select,.feedback-form textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;
  background:rgba(0,0,0,.12);color:var(--cream);
  padding:11px 13px;font:inherit;font-size:13px;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.feedback-form textarea{resize:vertical;min-height:118px;}
.feedback-form input::placeholder,.feedback-form textarea::placeholder{color:var(--cream-dim);opacity:.72;}
.feedback-form input:focus,.feedback-form select:focus,.feedback-form textarea:focus{
  border-color:var(--sakura-deep);
  box-shadow:0 0 0 3px rgba(240,168,196,.09);
}
.feedback-submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;border-radius:11px;background:var(--sakura);
  color:#2b1721;font-weight:800;font-size:13px;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.feedback-submit:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 12px 24px -18px rgba(240,168,196,.9);}
.feedback-submit:active{transform:translateY(0);}
.feedback-form small{font-size:10.5px;color:var(--cream-dim);line-height:1.8;}

@media (max-width:720px){
  .faq-grid{grid-template-columns:1fr;}
  .faq-item summary{padding:15px 16px;font-size:13.5px;}
  .faq-item p{padding:0 16px 16px;font-size:13px;}
  .feedback-panel{grid-template-columns:1fr;padding:24px 18px;gap:25px;border-radius:18px;}
  .feedback-section,.faq-section{padding-top:54px;}
}
@media (prefers-reduced-motion:reduce){
  .feature-box,.mode-card,.launcher-card,.feature-box .icon,.mode-card .icon,.brand,
  .faq-item,.faq-plus,.feedback-submit,.feedback-form input,.feedback-form select,.feedback-form textarea{transition:none !important;}
  .faq-item p{animation:none;}
}

/* ================= V10 — Sakura hover + navigation polish ================= */
/* Keep game-mode/feature hover in one compositor-friendly path. */
.feature-box, .mode-card, .launcher-card{
  transition:transform .20s cubic-bezier(.22,.8,.25,1),
             border-color .16s ease,
             box-shadow .20s cubic-bezier(.22,.8,.25,1),
             background-color .16s ease !important;
  will-change:transform;
  backface-visibility:hidden;
}
.feature-box::after, .mode-card::after, .launcher-card::after{
  transition:opacity .16s ease, border-color .16s ease !important;
}
.feature-box .icon, .mode-card .icon{
  color:var(--sakura-bright) !important;
  stroke:var(--sakura-bright) !important;
  fill:none !important;
  transition:transform .20s cubic-bezier(.22,.8,.25,1),
             stroke .16s ease, color .16s ease, filter .20s ease !important;
  will-change:transform,filter;
}
.feature-box h3,.feature-box h4,.mode-card h3{
  transition:color .16s ease !important;
}
.feature-box:hover .icon, .mode-card:hover .icon,
.feature-box.hover-touch .icon, .mode-card.hover-touch .icon{
  color:var(--sakura-bright) !important;
  stroke:var(--sakura-bright) !important;
  transform:translate3d(0,-3px,0) scale(1.045);
  filter:drop-shadow(0 4px 9px rgba(240,168,196,.22));
}
.feature-box:hover h3,.feature-box:hover h4,.mode-card:hover h3,
.feature-box.hover-touch h3,.feature-box.hover-touch h4,.mode-card.hover-touch h3{
  color:var(--sakura-bright) !important;
}
.mode-card:hover,.launcher-card:hover,.feature-box:hover,
.mode-card.hover-touch,.launcher-card.hover-touch,.feature-box.hover-touch{
  transform:translate3d(0,-5px,0);
  border-color:rgba(240,168,196,.65) !important;
  box-shadow:0 14px 30px -24px rgba(240,168,196,.85),0 0 0 1px rgba(240,168,196,.09);
}
/* Never let reveal delays/animations recolor the card text during hover. */
.mode-card .reveal,.mode-card h3,.mode-card p,
.feature-box h3,.feature-box h4,.feature-box p{
  animation:none !important;
}
.reveal.reveal-ready{transition-delay:0s !important;}

.telegram-cta-section{padding-top:24px;padding-bottom:20px;}
.telegram-site-card{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid rgba(240,168,196,.28);border-radius:20px;background:linear-gradient(135deg,rgba(240,168,196,.09),var(--navy));box-shadow:0 16px 40px -30px rgba(240,168,196,.65);}
.telegram-site-icon{width:52px;height:52px;flex:0 0 52px;border-radius:15px;display:grid;place-items:center;background:rgba(240,168,196,.13);color:var(--sakura-bright);border:1px solid rgba(240,168,196,.25);}
.telegram-site-icon svg{width:26px;height:26px;}
.telegram-site-copy{flex:1;min-width:0;}
.telegram-kicker{font-size:11px;color:var(--sakura-bright);font-weight:800;}
.telegram-site-copy h2{font-size:20px;margin:4px 0 5px;}
.telegram-site-copy p{font-size:13px;color:var(--cream-dim);margin:0;line-height:1.7;}
.telegram-site-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:11px;background:var(--sakura);color:#2a1220;font-weight:800;font-size:13px;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease;}
.telegram-site-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(240,168,196,.9);}
@media(max-width:620px){.telegram-site-card{align-items:flex-start;flex-wrap:wrap;padding:20px;}.telegram-site-btn{width:100%;justify-content:center;}.telegram-site-copy h2{font-size:18px;}}


/* ================= V12 — mobile stability + instant hover ================= */
html, body { max-width:100%; overflow-x:hidden; }
body.menu-open { overflow:hidden; touch-action:none; }
.mobile-nav {
  top:0; right:0; bottom:0; left:auto;
  width:min(86vw, 340px);
  max-width:100vw;
  overflow-y:auto; overflow-x:hidden;
  transform:translate3d(110%,0,0);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior:contain;
  contain:layout paint;
}
.mobile-nav.open { transform:translate3d(0,0,0); }
.mobile-overlay { overscroll-behavior:none; }
.mobile-nav-head { flex:0 0 auto; }
.mobile-nav a { flex:0 0 auto; }
/* Authentication is deliberately not part of the top navigation. */
/* One transform owns the card hover. Reveal never owns transform, so there is no two-step jump. */
.mode-card, .feature-box, .launcher-card {
  transform:translate3d(0,0,0);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}
.mode-card.reveal, .feature-box.reveal, .launcher-card.reveal { transform:translate3d(0,0,0); }
.mode-card.in-view, .feature-box.in-view, .launcher-card.in-view { transform:translate3d(0,0,0); }
.mode-card:hover, .feature-box:hover, .launcher-card:hover,
.mode-card.hover-touch, .feature-box.hover-touch, .launcher-card.hover-touch {
  transform:translate3d(0,-5px,0) !important;
}
.mode-card .icon, .feature-box .icon {
  transform:translate3d(0,0,0);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), color .12s ease, stroke .12s ease, filter .16s ease !important;
}
.mode-card:hover .icon, .feature-box:hover .icon,
.mode-card.hover-touch .icon, .feature-box.hover-touch .icon {
  transform:translate3d(0,-2px,0) scale(1.045) !important;
  color:var(--sakura-bright) !important;
  stroke:var(--sakura-bright) !important;
  filter:drop-shadow(0 4px 8px rgba(240,168,196,.18));
}
.mode-card h3, .feature-box h3, .feature-box h4 { transition:color .12s ease !important; }
.mode-card:hover h3, .feature-box:hover h3, .feature-box:hover h4,
.mode-card.hover-touch h3, .feature-box.hover-touch h3, .feature-box.hover-touch h4 { color:var(--sakura-bright) !important; }
@media (hover:none), (pointer:coarse) {
  .mode-card:hover, .feature-box:hover, .launcher-card:hover { transform:translate3d(0,0,0) !important; }
  .mode-card:hover .icon, .feature-box:hover .icon { transform:none !important; }
}
@media (max-width:720px) {
  nav.wrap { height:68px; gap:10px; }
  .nav-actions { margin-inline-start:auto; gap:8px; }
  .brand { min-width:0; }
  .brand-name { font-size:17px; }
  .brand .blossom { width:24px; height:24px; }
  .theme-toggle, .cart-btn, .burger { width:40px; height:40px; flex:0 0 40px; }
  .mobile-nav { padding:22px 18px; gap:18px; }
}

/* ================= V15 — responsive hybrid navigation =================
   Desktop: primary pages stay in the header; secondary pages stay in the drawer.
   Tablet: only the compact registration CTA stays beside the drawer button.
   Mobile: no header action buttons; the drawer is the navigation. */
.nav-links{display:none;}
.nav-links li:nth-child(n+5){display:none;}
.burger{display:flex; flex:0 0 42px;}
nav.wrap{gap:16px;}
.nav-actions{margin-inline-start:auto; gap:10px; flex:0 0 auto;}
.header-auth-btn{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  white-space:nowrap;
}
.auth-tablet{display:none;}
.mobile-nav{width:min(88vw,380px);}

@media (min-width:1100px){
  .nav-links{display:flex; align-items:center; gap:22px; font-size:14px; font-weight:600; min-width:0;}
  .nav-links li{display:list-item;}
  .header-auth-btn{display:inline-flex;}
  nav.wrap{height:78px; gap:18px;}
  .mobile-nav{width:390px;}
  .mobile-nav > a:not(.btn-auth){font-size:16px;}
}

@media (min-width:721px) and (max-width:1099px){
  nav.wrap{height:78px; gap:14px;}
  .header-auth-btn{display:inline-flex;}
  .auth-wide{display:none;}
  .auth-tablet{display:inline;}
  .mobile-nav{padding:24px 22px 30px; gap:12px;}
  .mobile-nav > a:not(.btn-auth){min-height:48px; padding:11px 14px; font-size:15.5px;}
  .mobile-nav-head{margin-bottom:8px;}
}

@media (max-width:720px){
  nav.wrap{height:68px; gap:10px;}
  .header-auth-btn,
  .theme-toggle,
  .cart-btn{display:none !important;}
  .nav-actions{gap:8px;}
  .brand{min-width:0;}
  .brand-name{font-size:17px;}
  .brand .blossom{width:24px;height:24px;}
  .burger{width:40px;height:40px;flex:0 0 40px;}
  .mobile-nav{padding:22px 18px; gap:18px;}
}


/* ================= V16 — CLEAN RESPONSIVE HEADER + SIMPLE HOVER ================= */
/* Header policy:
   desktop: important links + auth + cart + theme + menu
   tablet: auth (signup label) + cart + theme + menu
   phone: brand + menu ONLY
*/
.header-auth-btn{display:inline-flex !important; align-items:center; justify-content:center; white-space:nowrap;}
.auth-tablet{display:none;}
.nav-actions{display:flex; align-items:center; gap:12px; flex:0 0 auto;}

/* Secondary links live in the drawer; keep the desktop header readable. */
@media (max-width:1100px){
  .nav-links{display:none !important;}
  .burger{display:flex !important;}
  .nav-actions{gap:10px;}
  .header-auth-btn .auth-wide{display:none;}
  .header-auth-btn .auth-tablet{display:inline;}
}
@media (max-width:720px){
  /* Phone header is intentionally navigation-only: no auth/cart/theme buttons. */
  .header-auth-btn,.cart-btn,.theme-toggle{display:none !important;}
  .nav-actions{gap:0;}
  .burger{display:flex !important;}
}

/* Do not let the reveal animation own transform on interactive cards.  The cards
   fade in only; hover gets the single transform below. */
.mode-card.reveal,.feature-box.reveal,.launcher-card.reveal,
.mode-card.reveal.in-view,.feature-box.reveal.in-view,.launcher-card.reveal.in-view{
  transform:none !important;
}
.mode-card,.feature-box,.launcher-card{
  transition:transform .20s ease, border-color .20s ease, box-shadow .20s ease !important;
  will-change:transform;
  backface-visibility:hidden;
}
.mode-card:hover,.feature-box:hover,.launcher-card:hover,
.mode-card.hover-touch,.feature-box.hover-touch,.launcher-card.hover-touch{
  transform:translateY(-6px) !important;
  border-color:var(--sakura-bright) !important;
  box-shadow:0 14px 34px -20px rgba(240,168,196,.80), 0 0 0 1px rgba(240,168,196,.18) !important;
}
.mode-card .icon,.feature-box .icon{
  transform:none !important;
  transition:transform .20s ease, filter .20s ease !important;
  transform-origin:center;
  color:var(--cream) !important;
}
.mode-card:hover .icon,.feature-box:hover .icon,
.mode-card.hover-touch .icon,.feature-box.hover-touch .icon{
  transform:scale(1.12) !important;
  color:var(--sakura-bright) !important;
  filter:drop-shadow(0 5px 10px rgba(240,168,196,.35));
}
.mode-card:hover .icon svg,.feature-box:hover .icon svg,
.mode-card.hover-touch .icon svg,.feature-box.hover-touch .icon svg{
  transform:scale(1.12) !important;
}
.mode-card .icon svg,.feature-box .icon svg{
  transition:transform .20s ease, stroke .20s ease, fill .20s ease, filter .20s ease !important;
  transform-origin:center;
  stroke:currentColor !important;
}
.mode-card:hover .icon svg,.feature-box:hover .icon svg,
.mode-card.hover-touch .icon svg,.feature-box.hover-touch .icon svg{
  stroke:var(--sakura-bright) !important;
  color:var(--sakura-bright) !important;
  filter:drop-shadow(0 4px 9px rgba(240,168,196,.30));
}
.mode-card h3,.feature-box h3,.feature-box h4{
  transition:color .20s ease !important;
}
.mode-card:hover h3,.feature-box:hover h3,.feature-box:hover h4,
.mode-card.hover-touch h3,.feature-box.hover-touch h3,.feature-box.hover-touch h4{
  color:var(--sakura-bright) !important;
}

/* The mobile touch bridge must not invent another movement on phones. */
@media (hover:none), (pointer:coarse){
  .mode-card:hover,.feature-box:hover,.launcher-card:hover{
    transform:none !important;
    border-color:var(--line) !important;
    box-shadow:none !important;
  }
  .mode-card:hover .icon,.feature-box:hover .icon,
  .mode-card:hover .icon svg,.feature-box:hover .icon svg{
    transform:none !important;
    filter:none !important;
    color:inherit !important;
    stroke:currentColor !important;
  }
}

/* ================= V17 — FINAL NAV + NON-FLICKER HOVER ================= */
/* The drawer owns secondary navigation. Mobile also gets auth/cart/theme INSIDE the drawer. */
.mobile-nav-links{display:flex;flex-direction:column;gap:10px;}
.mobile-nav-account{display:flex;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);}
.mobile-nav-account a{flex:1;text-align:center;}
.mobile-nav-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px;padding-top:14px;border-top:1px solid var(--line);}
.mobile-nav-tools button{min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--cream);font:inherit;font-size:12px;cursor:pointer;}
.mobile-nav-tools button b{font-size:10px;color:var(--sakura-bright);margin-inline-start:4px;}
@media (min-width:1101px){
  .nav-links{display:flex!important;gap:22px;}
  .mobile-nav-links{gap:8px;}
}
@media (max-width:720px){
  .nav-actions{gap:0!important;}
  .mobile-nav{width:min(90vw,380px);}
  .mobile-nav-account{display:flex;}
  .mobile-nav-tools{display:grid;}
}

/* One and only one interactive transform. No reveal transform, no nested card movement. */
.mode-card.reveal,.feature-box.reveal,.launcher-card.reveal,
.mode-card.reveal.in-view,.feature-box.reveal.in-view,.launcher-card.reveal.in-view{
  transform:none!important;
  animation:none!important;
}
.mode-card,.feature-box,.launcher-card{
  transform:none!important;
  will-change:transform;
  backface-visibility:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease!important;
}
.mode-card:hover,.feature-box:hover,.launcher-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(240,168,196,.68)!important;
  box-shadow:0 12px 28px -20px rgba(240,168,196,.72),0 0 0 1px rgba(240,168,196,.12)!important;
}
.mode-card .icon,.feature-box .icon{
  transform:none!important;
  color:var(--cream)!important;
  transition:transform .18s ease,filter .18s ease,color .18s ease!important;
}
.mode-card .icon svg,.feature-box .icon svg{
  transform:none!important;
  transform-origin:center;
  transition:transform .18s ease,filter .18s ease,stroke .18s ease,fill .18s ease!important;
}
.mode-card:hover .icon,.feature-box:hover .icon{
  transform:scale(1.06)!important;
  color:var(--sakura-bright)!important;
  filter:drop-shadow(0 4px 10px rgba(240,168,196,.30));
}
.mode-card:hover .icon svg,.feature-box:hover .icon svg{
  transform:scale(1.08)!important;
  stroke:var(--sakura-bright)!important;
  color:var(--sakura-bright)!important;
  filter:drop-shadow(0 3px 8px rgba(240,168,196,.28));
}
.mode-card h3,.feature-box h3,.feature-box h4{transition:color .18s ease!important;}
.mode-card:hover h3,.feature-box:hover h3,.feature-box:hover h4{color:var(--sakura-bright)!important;}
@media (hover:none),(pointer:coarse){
  .mode-card:hover,.feature-box:hover,.launcher-card:hover{transform:none!important;}
  .mode-card:hover .icon,.feature-box:hover .icon,.mode-card:hover .icon svg,.feature-box:hover .icon svg{transform:none!important;filter:none!important;color:inherit!important;}
}

/* V20 — HEADER CONTROLS ONLY (do not alter card hover) */
@media (min-width:1100px){
  .nav-links li:nth-child(n+5){display:list-item !important;}
  .nav-links{display:flex !important;}
  .theme-toggle,.cart-btn{display:flex;}
}
@media (max-width:720px){
  /* On phones cart + theme stay in the TOP HEADER, not the drawer. */
  .header-auth-btn{display:none !important;}
  .theme-toggle,.cart-btn{display:flex !important;}
  .nav-actions{gap:8px;}
  .burger{display:flex !important;}
}

/* V21 — phone header spacing only */
@media (max-width:720px){
  .nav-actions{
    gap:10px !important;
    margin-inline-start:10px;
    align-items:center;
  }
  .nav-actions .theme-toggle,
  .nav-actions .cart-btn,
  .nav-actions .burger{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    flex:0 0 42px !important;
  }
  .nav-actions .theme-toggle,
  .nav-actions .cart-btn{
    border:1px solid var(--line);
    border-radius:12px;
  }
}

/* V22 — keep the top navigation always with the viewport */
header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:90;
}
body{padding-top:78px;}
@media (max-width:720px){
  body{padding-top:68px;}
}

/* V23 — mobile drawer must open ABOVE the fixed header */
@media (max-width:1100px){
  .mobile-overlay{z-index:95 !important;}
  .mobile-nav{z-index:110 !important;}
}


/* RESTORED — FAQ + Feedback */
/* FAQ */
.faq-section{padding-top:72px;}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.faq-item{
  background:var(--navy);
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  transition:border-color .18s ease, background-color .2s ease, box-shadow .22s ease;
  contain:layout paint;
}
.faq-item:hover{border-color:rgba(240,168,196,.4);}
.faq-item[open]{border-color:rgba(240,168,196,.5);box-shadow:0 12px 28px -26px rgba(240,168,196,.7);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 20px;
  font-size:14px;
  font-weight:700;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{
  flex:0 0 28px;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--navy-soft);color:var(--sakura-bright);
  font-size:20px;line-height:1;
  transition:transform .22s ease, background-color .18s ease;
}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:rgba(240,168,196,.14);}
.faq-item p{
  color:var(--cream-dim);
  font-size:13.5px;
  line-height:2;
  padding:0 20px 18px;
  animation:faqOpen .22s ease-out;
}
@keyframes faqOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Feedback */
.feedback-section{padding-top:72px;}
.feedback-panel{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:34px;
  padding:38px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(240,168,196,.10), transparent 32%),
    linear-gradient(145deg,var(--navy),var(--navy-soft));
  box-shadow:0 20px 55px -42px rgba(0,0,0,.8);
}
.feedback-copy .section-title{margin-bottom:12px;}
.feedback-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.feedback-points span{
  padding:7px 11px;border-radius:100px;
  background:rgba(111,146,115,.13);
  border:1px solid rgba(111,146,115,.22);
  color:var(--moss);
  font-size:12px;font-weight:700;
}
.feedback-form{display:grid;gap:13px;}
.feedback-form label{display:grid;gap:6px;font-size:12.5px;font-weight:700;color:var(--cream);}
.feedback-form label span{color:var(--cream-dim);font-weight:500;}
.feedback-form input,.feedback-form select,.feedback-form textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;
  background:rgba(0,0,0,.12);color:var(--cream);
  padding:11px 13px;font:inherit;font-size:13px;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.feedback-form textarea{resize:vertical;min-height:118px;}
.feedback-form input::placeholder,.feedback-form textarea::placeholder{color:var(--cream-dim);opacity:.72;}
.feedback-form input:focus,.feedback-form select:focus,.feedback-form textarea:focus{
  border-color:var(--sakura-deep);
  box-shadow:0 0 0 3px rgba(240,168,196,.09);
}
.feedback-submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;border-radius:11px;background:var(--sakura);
  color:#2b1721;font-weight:800;font-size:13px;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.feedback-submit:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 12px 24px -18px rgba(240,168,196,.9);}
.feedback-submit:active{transform:translateY(0);}
.feedback-form small{font-size:10.5px;color:var(--cream-dim);line-height:1.8;}

@media (max-width:720px){
  .faq-grid{grid-template-columns:1fr;}
  .faq-item summary{padding:15px 16px;font-size:13.5px;}
  .faq-item p{padding:0 16px 16px;font-size:13px;}
  .feedback-panel{grid-template-columns:1fr;padding:24px 18px;gap:25px;border-radius:18px;}
  .feedback-section,.faq-section{padding-top:54px;}
}
@media (prefers-reduced-motion:reduce){
  .feature-box,.mode-card,.launcher-card,.feature-box .icon,.mode-card .icon,.brand,
  .faq-item,.faq-plus,.feedback-submit,.feedback-form input,.feedback-form select,.feedback-form textarea{transition:none !important;}
  .faq-item p{animation:none;}
}


/* RESTORED — Telegram CTA */
.telegram-cta-section{padding-top:24px;padding-bottom:20px;}
.telegram-site-card{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid rgba(240,168,196,.28);border-radius:20px;background:linear-gradient(135deg,rgba(240,168,196,.09),var(--navy));box-shadow:0 16px 40px -30px rgba(240,168,196,.65);}
.telegram-site-icon{width:52px;height:52px;flex:0 0 52px;border-radius:15px;display:grid;place-items:center;background:rgba(240,168,196,.13);color:var(--sakura-bright);border:1px solid rgba(240,168,196,.25);}
.telegram-site-icon svg{width:26px;height:26px;}
.telegram-site-copy{flex:1;min-width:0;}
.telegram-kicker{font-size:11px;color:var(--sakura-bright);font-weight:800;}
.telegram-site-copy h2{font-size:20px;margin:4px 0 5px;}
.telegram-site-copy p{font-size:13px;color:var(--cream-dim);margin:0;line-height:1.7;}
.telegram-site-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:11px;background:var(--sakura);color:#2a1220;font-weight:800;font-size:13px;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease;}
.telegram-site-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(240,168,196,.9);}
@media(max-width:620px){.telegram-site-card{align-items:flex-start;flex-wrap:wrap;padding:20px;}.telegram-site-btn{width:100%;justify-content:center;}.telegram-site-copy h2{font-size:18px;}}



/* V25 — desktop header ends at Store; extra links stay in drawer only */
@media (min-width:1100px){
  .nav-links li:nth-child(n+7){display:none !important;}
}

/* V26 — desktop drawer opens above the fixed header too */
.mobile-overlay{z-index:105 !important;}
.mobile-nav{z-index:110 !important;}

/* V29 — Keep normal text on the standard arrow cursor. Interactive controls keep their expected cursor. */
body, body * { cursor: default; }
a, button, [role="button"], summary,
input[type="button"], input[type="submit"], input[type="reset"], select { cursor: pointer; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], textarea,
[contenteditable="true"] { cursor: text; }
/* V30 — Light theme visibility fixes: keep theme icons and Sakura brand bloom visible on every page. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon{
  stroke:currentColor !important;
  color:var(--cream) !important;
  fill:none !important;
  pointer-events:none;
}
html[data-theme="light"] .theme-toggle .icon-sun{
  opacity:1 !important;
  visibility:visible !important;
  transform:rotate(0) scale(1) !important;
}
html[data-theme="light"] .theme-toggle .icon-moon{
  opacity:0 !important;
  visibility:hidden !important;
}
html[data-theme="light"] .brand-bloom{
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
}
.brand-bloom{
  flex:0 0 auto;
  overflow:visible;
}


/* V31 — unify header with home + restore custom scrollbar */
@media (min-width:1101px){
  /* Desktop header ends at «فروشگاه»; secondary items remain in drawer. */
  .nav-links li:nth-child(n+7){display:none !important;}
  .nav-links{display:flex !important;}
  .nav-actions{display:flex;align-items:center;gap:12px;}
  .header-auth-btn{display:inline-flex !important;order:3;}
  .burger{order:4;}
  .theme-toggle{order:1;}
  .cart-btn{order:2;}
}

/* Keep the auth CTA immediately beside the menu button on desktop/tablet. */
@media (min-width:721px){
  .nav-actions{display:flex;align-items:center;gap:12px;}
  .header-auth-btn{order:3 !important;}
  .burger{order:4 !important;}
  .theme-toggle{order:1 !important;}
  .cart-btn{order:2 !important;}
}

/* Site-wide custom scrollbar — restored Zyran palette */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--sakura-deep) var(--navy-soft);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{width:10px;height:10px;}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{background:var(--navy-deep);}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--sakura-bright),var(--sakura-deep));
  border:2px solid var(--navy-deep);
  border-radius:999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{background:var(--sakura);}