/* ═════════ وزیرمتن، خودمیزبان. هیچ درخواست بیرونی. ═════════ */
@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url(/fonts/Vazirmatn-Regular.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(/fonts/Vazirmatn-Medium.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:600;font-display:swap;src:url(/fonts/Vazirmatn-SemiBold.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;src:url(/fonts/Vazirmatn-Bold.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:800;font-display:swap;src:url(/fonts/Vazirmatn-ExtraBold.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:900;font-display:swap;src:url(/fonts/Vazirmatn-Black.woff2) format('woff2')}
/* ═════════ توکنها، سه حالته. هیچ رنگی تنها داخل مدیا تعریف نشده. ═════════ */
:root{
--bg:#FBF9F1; --tintA:rgba(46,160,67,.06); --tintB:rgba(255,199,44,.08);
--chatbg:#EFE6CE; --chatline:#E2D6B4;
--surface:#FFFFFF; --surface2:#FFFDF7; --surface3:#F5F0E1;
--line:#F5F0E1; --line2:#E9E0C9; --lip:#E9E0C9;
--ink:#2B2118; --soft:#5C5346; --muted:#8A7C6B; --faint:#B9AE9C;
--grass:#2EA043; --grassD:#1B6A2B; --grassDD:#0F3D19; --grassL:#43C765;
--grass50:#EDFBEF; --grass100:#D3F5DA;
--sun:#FFC72C; --sunD:#A87800; --sun50:#FFFBEB; --sun100:#FFF3C4;
--farm:#FF7A00; --farmD:#9E4B00; --farm50:#FFF3E8;
--red:#DC2626; --red50:#FEF2F2; --redD:#9B1C1C;
--sky:#3B82F6; --skyD:#1D4ED8; --sky50:#EFF6FF; --sky100:#DBEAFE;
--plum:#8B5CF6; --plumD:#6D28D9; --plum50:#F5F3FF;
--heroA:#1B6A2B; --heroB:#123F1C; --heroC:#0B2B13;
--scrim:rgba(16,22,30,.34);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#12160F; --tintA:rgba(46,160,67,.10); --tintB:rgba(255,199,44,.06);
--chatbg:#0C0F09; --chatline:#222A19;
--surface:#1B2117; --surface2:#212819; --surface3:#2A331F;
--line:#2A331F; --line2:#364227; --lip:#0C0F09;
--ink:#F2EFE4; --soft:#CFC8B6; --muted:#9A9382; --faint:#6E6857;
--grass:#43C765; --grassD:#6FDC8A; --grassDD:#0F3D19; --grassL:#6FDC8A;
--grass50:#1C2B1E; --grass100:#22391F;
--sun:#FFD65C; --sunD:#FFD65C; --sun50:#2A2415; --sun100:#332C18;
--farm:#FF9E4F; --farmD:#4A2A10; --farm50:#2B1D12;
--red:#F87171; --red50:#2A1616; --redD:#7F1D1D;
--sky:#60A5FA; --skyD:#93C5FD; --sky50:#16202E; --sky100:#1C2B3F;
--plum:#A78BFA; --plumD:#C4B5FD; --plum50:#1F1A2E;
--heroA:#17331C; --heroB:#0E2413; --heroC:#07160B;
--scrim:rgba(0,0,0,.56);
}
}
:root[data-theme="dark"]{
--bg:#12160F; --tintA:rgba(46,160,67,.10); --tintB:rgba(255,199,44,.06);
--chatbg:#0C0F09; --chatline:#222A19;
--surface:#1B2117; --surface2:#212819; --surface3:#2A331F;
--line:#2A331F; --line2:#364227; --lip:#0C0F09;
--ink:#F2EFE4; --soft:#CFC8B6; --muted:#9A9382; --faint:#6E6857;
--grass:#43C765; --grassD:#6FDC8A; --grassDD:#0F3D19; --grassL:#6FDC8A;
--grass50:#1C2B1E; --grass100:#22391F;
--sun:#FFD65C; --sunD:#FFD65C; --sun50:#2A2415; --sun100:#332C18;
--farm:#FF9E4F; --farmD:#4A2A10; --farm50:#2B1D12;
--red:#F87171; --red50:#2A1616; --redD:#7F1D1D;
--sky:#60A5FA; --skyD:#93C5FD; --sky50:#16202E; --sky100:#1C2B3F;
--plum:#A78BFA; --plumD:#C4B5FD; --plum50:#1F1A2E;
--heroA:#17331C; --heroB:#0E2413; --heroC:#07160B;
--scrim:rgba(0,0,0,.56);
}
*{box-sizing:border-box}
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a,label,input,select{touch-action:manipulation}
body{
margin:0;background-color:var(--bg);color:var(--ink);overflow-x:hidden;
font-family:Vazirmatn,'IRANSansX',Tahoma,'Segoe UI',system-ui,sans-serif;
background-image:radial-gradient(circle at 12% 8%,var(--tintA) 0 30%,transparent 60%),
radial-gradient(circle at 88% 92%,var(--tintB) 0 30%,transparent 60%);
background-attachment:fixed;overscroll-behavior:none;
}
button{font:inherit;font-family:inherit;letter-spacing:inherit;text-align:inherit;
border:0;margin:0;padding:0;background:none;color:inherit;cursor:pointer;text-decoration:none;
-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
button::-moz-focus-inner{border:0;padding:0}
button:disabled{cursor:not-allowed}
input{font-family:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
.tnum{font-variant-numeric:tabular-nums}
.bignum{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
svg{display:block;flex:none}
/* ═════════ چیدمان ═════════ */
.shell{max-width:600px;margin:0 auto;padding:0 16px 132px}
@media(min-width:820px){body.app{padding-inline-start:240px}body.app .rail{display:flex!important}body.app nav.bot{display:none}}
@media(max-width:819px){.rail{display:none}}
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}
.hd{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:12px 16px 8px}
.hd{min-width:0}
.hd>*{min-width:0}
/* اسم مزرعه هرچه بلند باشد یک خط میماند و با سهنقطه کوتاه میشود */
.hd .nm{font-weight:800;font-size:13px;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0;overflow:hidden}
.lvl>*{flex:none}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 8px;font-size:10px;font-weight:800}
.xp{width:56px;height:6px;border-radius:99px;background:var(--line2);overflow:hidden}
.xp i{display:block;height:100%;border-radius:99px;background:linear-gradient(270deg,var(--grassL),var(--sun));
transform-origin:right center;transition:transform .8s cubic-bezier(.34,1.2,.64,1)}
/* حباب موجودی.
موجودی میتواند ۴ رقمی باشد یا ۱۲ رقمی. اگر آزادش بگذاری، عدد بلند
کل نوار بالا را میبلعد: اسم مزرعه دو خطی میشود و دکمهها بیرون
میزنند. پس هم عرضش سقف دارد، هم فونت عدد پلهپله کوچک میشود. */
.pill{display:flex;align-items:center;gap:6px;background:var(--surface);border-radius:99px;padding:8px 12px;
box-shadow:0 3px 0 0 var(--lip);font-weight:800;font-size:13px;color:var(--grassD);transition:transform .1s;
flex:0 1 auto;min-width:0;max-width:46%}
.pill svg{flex:none}
.pill .tnum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-variant-numeric:tabular-nums}
.pill .tnum.n2{font-size:12px;letter-spacing:-.01em}
.pill .tnum.n3{font-size:11px;letter-spacing:-.02em}
.pill .tnum.n4{font-size:10px;letter-spacing:-.03em}
@media(max-width:360px){ .pill{padding:8px 10px;max-width:42%} }
.pill:active{transform:translateY(3px);box-shadow:none}
.ico-btn{width:40px;height:40px;border-radius:99px;background:var(--surface);box-shadow:0 3px 0 0 var(--lip);
display:grid;place-items:center;position:relative;transition:transform .1s;color:var(--soft)}
.ico-btn:active{transform:translateY(3px);box-shadow:none}
.dot{position:absolute;top:-2px;inset-inline-end:-2px;min-width:17px;height:17px;border-radius:99px;background:var(--farm);
color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.alerts{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px;max-width:600px;margin:0 auto}
.alerts>.chip{flex:0 1 auto;white-space:nowrap;min-width:0}
.alerts>.chip>span{overflow:hidden;text-overflow:ellipsis}
.alerts::-webkit-scrollbar{height:0}
.hr{height:1px;background:linear-gradient(270deg,transparent,var(--line2),transparent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;
box-shadow:0 2px 0 0 var(--lip),0 12px 28px -16px rgba(0,0,0,.28)}
.sec{margin-top:16px}
h2.t{font-size:14px;font-weight:800;margin:0 0 8px;padding:0 4px;
display:flex;align-items:center;gap:7px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:99px;
font-weight:800;padding:13px 22px;font-size:14px;color:#fff;transition:transform .1s}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:none!important}
.btn:disabled{opacity:.4;box-shadow:none!important;cursor:not-allowed}
.b-pri{background:var(--grass);box-shadow:0 5px 0 0 var(--grassD)}
.b-acc{background:var(--farm);box-shadow:0 5px 0 0 var(--farmD)}
.b-sun{background:var(--sun);color:#2B2118;box-shadow:0 5px 0 0 var(--sunD)}
.b-gho{background:var(--surface);color:var(--ink);box-shadow:0 5px 0 0 var(--lip)}
/* دکمهٔ کارِ برگشتناپذیر. همان حجمِ سهبعدیِ بقیه، فقط قرمز. */
.b-bad{background:var(--red);color:#fff;box-shadow:0 5px 0 0 var(--redD,#9B1C1C)}
.b-sm{padding:10px 10px;font-size:12.5px;min-width:0;line-height:1.5}
.b-sm svg{flex:none}
@media(max-width:359px){.b-sm{padding:9px 7px;font-size:11.5px;gap:5px}}
.blk{width:100%}
.g{display:flex;align-items:center;gap:7px}
.g .tr{flex:1;height:8px;border-radius:99px;background:var(--line2);overflow:hidden;
box-shadow:inset 0 2px 5px rgba(0,0,0,.12);position:relative}
.g .fl{position:absolute;inset:0;border-radius:99px;transform-origin:right center;
transition:transform .85s cubic-bezier(.34,1.2,.64,1)}
.g .pc{font-size:10px;font-weight:800;color:var(--muted);width:30px;text-align:left}
/* ═════════ کارت دام ═════════ */
.acard{position:relative;padding:14px}
.acard.rdy{padding-top:18px}
.acard.rdy{box-shadow:0 0 0 2px var(--sun),0 2px 0 0 var(--lip),0 12px 28px -16px rgba(0,0,0,.28)}
.scene{width:88px;height:88px;flex:0 0 auto;border-radius:22px;position:relative;overflow:hidden;padding:0;
background:linear-gradient(180deg,#BFE9FF,var(--grass100))}
.scene .hill{position:absolute;left:-20%;right:-20%;bottom:-30%;height:62%;border-radius:50%;
background:linear-gradient(180deg,var(--grassL),var(--grass))}
.scene .sn{position:absolute;top:8px;left:8px;width:12px;height:12px;border-radius:99px;background:var(--sun);
box-shadow:0 0 12px 3px rgba(255,199,44,.6)}
.sprite{position:absolute;left:50%;bottom:8px;margin-left:-26px}
.sprite.hgy{filter:grayscale(.42)}
.bub{position:absolute;top:9px;inset-inline-start:11px;z-index:6;padding:0}
.bub .in{position:relative;display:flex;align-items:center;gap:4px;background:var(--sun);color:#2B2118;
border:2px solid var(--surface);
border-radius:99px;padding:5px 9px 5px 7px;font-size:12px;font-weight:800;box-shadow:0 4px 0 0 var(--sunD)}
.bub .rg{position:absolute;inset:0;border-radius:99px;background:var(--sun)}
.tag{position:absolute;bottom:6px;inset-inline-end:6px;background:color-mix(in srgb,var(--surface) 88%,transparent);
color:var(--grassD);font-size:9px;font-weight:800;border-radius:5px;padding:2px 5px;display:flex;gap:2px;align-items:center}
.hgb{position:absolute;bottom:6px;inset-inline-start:6px;color:var(--red)}
.hgb2{color:var(--red)}
.wig{color:var(--red)}
.float{position:absolute;left:50%;top:24px;z-index:30;pointer-events:none;background:var(--surface);
border-radius:99px;padding:6px 12px;font-size:14px;font-weight:800;color:var(--grassD);display:flex;gap:5px;
align-items:center;box-shadow:0 4px 0 0 var(--lip);white-space:nowrap;animation:fl 1.3s ease-out forwards}
@keyframes fl{0%{opacity:0;transform:translate(-50%,0) scale(.5)}
20%{opacity:1;transform:translate(-50%,-14px) scale(1.2)}
100%{opacity:0;transform:translate(-50%,-78px) scale(.95)}}
@keyframes pop{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.3) rotate(-11deg)}
55%{transform:scale(.93) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.pop{animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion: no-preference){
@keyframes idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes shim{0%{transform:translateX(200%)}100%{transform:translateX(-200%)}}
@keyframes ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.sprite{animation:idle 3.2s ease-in-out infinite}
.bub .in{animation:bob 1.8s ease-in-out infinite}
.bub .rg{animation:ring 1.6s ease-out infinite}
.hgb,.wig>svg{animation:wig .5s ease-in-out infinite}
.shine i{animation:shim 2.8s linear infinite}
.live .p b:first-child{animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
}
.coop{border-radius:24px;padding:16px;display:flex;align-items:center;gap:12px;
position:relative;
background:linear-gradient(200deg,
color-mix(in srgb,var(--sun100) 92%,#fff) 0%, var(--sun100) 45%, var(--sun50) 100%)}
.coop .bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--surface) 70%,transparent);
overflow:hidden;margin-top:8px}
.coop .bar i{display:block;height:100%;border-radius:99px;transform-origin:right center;
background:linear-gradient(270deg,var(--grass),var(--sun));transition:transform .9s cubic-bezier(.34,1.2,.64,1)}
/* ═════════ کارت قهرمان کیف پول ═════════ */
.hero{position:relative;overflow:hidden;border-radius:32px;padding:20px;color:#fff;
background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--heroA) 82%,#4FD16A) 0%,
rgba(21,84,34,.18) 55%,transparent 100%),
linear-gradient(155deg,var(--heroA) 0%,var(--heroB) 48%,var(--heroC) 100%);
box-shadow:0 22px 45px -22px rgba(11,43,19,.9)}
.hero::before{content:'';position:absolute;inset:0;opacity:.07;pointer-events:none;
background:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 7px)}
.hero::after{content:'';position:absolute;inset-inline-start:-64px;top:-64px;width:210px;height:210px;border-radius:99px;
background:rgba(255,199,44,.2);filter:blur(48px);pointer-events:none}
.hero>*{position:relative}
.chipx{width:44px;height:36px;border-radius:8px;display:grid;place-items:center;
background:linear-gradient(135deg,#FFD65C,#F5B400);box-shadow:inset 0 2px 6px rgba(0,0,0,.2)}
.chipx .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.chipx .gr i{width:5px;height:3px;border-radius:1px;background:rgba(168,120,0,.5)}
.live{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(111,220,138,.3);
background:rgba(111,220,138,.1);border-radius:99px;padding:4px 10px;font-size:11px;font-weight:800;color:#A7EBB6}
.live .p{position:relative;width:6px;height:6px}
.live .p b{position:absolute;inset:0;border-radius:99px;background:#6FDC8A}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid rgba(255,255,255,.1);
padding-top:16px;margin-top:18px}
.cols>div{padding-inline-start:8px}.cols>div+div{border-inline-start:1px solid rgba(255,255,255,.1)}
.cols .v{font-size:15px;font-weight:800}
.cols .l{font-size:10px;color:rgba(255,255,255,.45);margin-top:3px;display:flex;gap:4px;align-items:center}
.shine{position:relative;overflow:hidden;width:100%;margin-top:18px;border-radius:16px;
border:1px solid rgba(255,255,255,.25);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));
padding:14px;font-size:15px;font-weight:800;color:#2B2118;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transition:transform .1s}
.shine:active{transform:translateY(2px)}
.shine i{position:absolute;inset:0;background:linear-gradient(270deg,transparent,#fff,transparent);opacity:.55}
.shine span{position:relative;display:inline-flex;align-items:center;gap:8px}
.ghb{border-radius:16px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
padding:12px;font-size:13px;font-weight:700;color:rgba(255,255,255,.9);transition:transform .1s,background .15s;
display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ghb:active{transform:translateY(2px)}.ghb:hover{background:rgba(255,255,255,.12)}
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.act{display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .1s}
.act:active{transform:scale(.92)}
.act .cir{position:relative;width:56px;height:56px;border-radius:99px;display:grid;place-items:center}
.act .lb{font-size:11px;font-weight:700;color:var(--soft)}
.act .bg{position:absolute;top:-2px;inset-inline-end:-2px;min-width:19px;height:19px;border-radius:99px;background:var(--farm);
color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.tx{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.tx .ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
.tx .tt{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .ag{font-size:11px;color:var(--muted);margin-top:2px}
.tx .am{font-size:13px;font-weight:800;flex:0 0 auto}
nav.bot{position:fixed;inset-inline:0;bottom:0;z-index:50;padding:0 12px;
padding-bottom:max(env(safe-area-inset-bottom),12px)}
nav.bot .in{max-width:600px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-around;
background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--line);border-radius:26px;
padding:6px;box-shadow:0 -4px 26px -8px rgba(0,0,0,.3);backdrop-filter:blur(18px)}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-radius:18px;
position:relative;transition:background .2s;color:var(--muted)}
.nb.on{background:var(--grass50);color:var(--grassD)}
.nb .l{font-size:10px;font-weight:700}
.nb.ctr{flex:0 0 auto;margin-top:-28px;color:var(--muted)}
.nb.ctr .cc{width:56px;height:56px;border-radius:99px;display:grid;place-items:center;color:#fff;
background:linear-gradient(180deg,var(--grassL),var(--grass));box-shadow:0 5px 0 0 var(--grassDD)}
.nb.ctr.on{background:none;color:var(--grassD)}
.nb.ctr.on .cc{box-shadow:0 6px 0 0 var(--grassDD),0 0 0 5px color-mix(in srgb,var(--grass) 20%,transparent)}
.nb .nbg{position:absolute;top:2px;inset-inline-start:20%;min-width:16px;height:16px;border-radius:99px;background:var(--farm);
color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.rail{position:fixed;inset-inline-start:0;top:0;height:100%;width:210px;flex-direction:column;gap:4px;padding:74px 12px 0;
border-inline-end:1px solid var(--line);background:color-mix(in srgb,var(--surface) 74%,transparent);
backdrop-filter:blur(18px);z-index:40}
.rb{display:flex;align-items:center;gap:12px;border-radius:18px;padding:12px;font-size:14px;font-weight:800;
color:var(--soft);transition:background .2s}
.rb:hover{background:var(--surface2)}
.rb.on{background:var(--grass);color:#fff;box-shadow:0 4px 0 0 var(--grassD)}
#toasts{position:fixed;inset-inline:0;bottom:calc(96px + max(env(safe-area-inset-bottom),12px));z-index:60;display:flex;flex-direction:column;align-items:center;
gap:8px;padding:0 16px;pointer-events:none}
@media(min-width:820px){#toasts{bottom:24px}}
.toast{max-width:380px;border-radius:16px;padding:10px 16px;font-size:13px;font-weight:700;color:#fff;
display:flex;gap:8px;align-items:center;box-shadow:0 8px 30px -8px rgba(0,0,0,.4);animation:tin .3s cubic-bezier(.34,1.4,.64,1)}
@keyframes tin{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
.toast.out{animation:tout .3s forwards}
@keyframes tout{to{opacity:0;transform:translateY(12px) scale(.95)}}
.t-ok{background:var(--grass)}.t-er{background:var(--red)}.t-in{background:var(--ink);color:var(--bg)}
.row{display:flex;align-items:center;gap:12px}
.mut{color:var(--muted)}.sm{font-size:12px}.xs{font-size:11px}.b8{font-weight:800}
.dash{border:2px dashed var(--grass);background:color-mix(in srgb,var(--grass50) 60%,transparent);
border-radius:24px;padding:22px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
font-weight:800;font-size:14px;color:var(--grassD);transition:transform .1s}
.dash:active{transform:scale(.98)}
.scrollx{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.scrollx::-webkit-scrollbar{height:0}
.inv{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:var(--surface2);border-radius:16px;padding:8px 12px}
.slide{animation:sl .22s ease-out}
@keyframes sl{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.ipt{flex:1;min-width:0;border:1px solid var(--line2);background:var(--surface2);border-radius:14px;padding:12px;
font-size:16px;font-weight:700;direction:ltr;text-align:center;color:var(--soft)}
.ms{display:flex;align-items:center;gap:12px;padding:14px}
.ms .e{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto}
/* ══════════════════ چیزهایی که سایت چندصفحهای لازم دارد ══════════════════ */
/* هیچ دکمهای خط زیر ندارد. فقط لینکهای داخل متن با کلاس .tlink خط میگیرند. */
a{color:var(--grassD);text-decoration:none}
a:hover,a:focus,a:active,a:visited{text-decoration:none}
.tlink{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tlink:hover{text-decoration:underline}
button:focus-visible,a:focus-visible,[role=button]:focus-visible{
outline:3px solid color-mix(in srgb,var(--grass) 55%,transparent);outline-offset:2px}
/* فرم پنهانِ ناوبری. عمدا display:none نیست: سافاری روی آیفون فرمی را
که رندر نشده submit نمیکند و همهٔ دکمههای ناوبری بیاثر میشوند.
پس از دید پنهانش میکنیم ولی در جریان رندر میماند. */
/* فرم کوچکِ هر دکمهٔ ناوبری. display:contents یعنی خودش در چیدمان
دیده نمیشود و دکمه دقیقا همانجای قبلی مینشیند. */
.navf{display:contents}
/* اگر مرورگری display:contents نداشت، دستکم چیدمان به هم نریزد */
@supports not (display:contents){ .navf{display:inline-flex;min-width:0} }
form#kshgo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none}
img{max-width:100%;height:auto}
/* پیام سیستم بالای صفحه */
.flash{border-radius:18px;padding:13px 16px;font-weight:700;font-size:13px;margin-bottom:14px;
display:flex;gap:9px;align-items:center}
.flash.ok{background:var(--grass50);color:var(--grassD)}
.flash.err{background:var(--red50);color:var(--red)}
.flash.info{background:var(--sun50);color:var(--sunD)}
/* فرمها */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:800;color:var(--soft);margin-bottom:6px}
.field .hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.8}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],
select,textarea{
width:100%;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
background:var(--surface2);border:1px solid var(--line2);border-radius:14px;padding:13px 14px;
transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--grass);
box-shadow:0 0 0 3px color-mix(in srgb,var(--grass) 20%,transparent)}
textarea{min-height:96px;resize:vertical;line-height:1.9}
.otp-input{text-align:center;letter-spacing:.5em;font-size:26px;font-weight:900;direction:ltr;
padding:16px 14px}
fieldset{border:0;padding:0;margin:0}
/* شبکهها */
.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid3{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.split{display:grid;gap:8px;grid-template-columns:1fr 1fr}
/* سربرگ صفحه */
.phead{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.phead h1{font-size:19px;font-weight:900;margin:0}
.phead .sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.8}
.back{width:38px;height:38px;border-radius:99px;background:var(--surface);flex:none;
box-shadow:0 3px 0 0 var(--lip);display:grid;place-items:center;color:var(--soft)}
.back:active{transform:translateY(3px);box-shadow:none}
/* کارت محصول یا دام در فروشگاه */
.pcard{padding:14px;display:flex;flex-direction:column;gap:10px}
.pcard .top{display:flex;gap:12px;align-items:flex-start}
.pcard .art{width:74px;height:74px;flex:none;border-radius:20px;display:grid;place-items:center;
background:linear-gradient(180deg,#BFE9FF,var(--grass100))}
.pcard .meta{font-size:11px;color:var(--muted);line-height:1.9}
.pcard .price{font-size:17px;font-weight:900;color:var(--ink)}
.pcard .price small{font-size:11px;font-weight:700;color:var(--muted)}
.roi{display:inline-flex;gap:5px;align-items:center;background:var(--grass50);color:var(--grassD);
border-radius:99px;padding:4px 10px;font-size:11px;font-weight:800}
/* جدول ساده */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:start;font-size:11px;color:var(--muted);font-weight:700;padding:10px 12px;
background:var(--surface2);white-space:nowrap}
.tbl td{padding:12px;border-top:1px solid var(--line)}
.tbl tr:first-child td{border-top:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ═════════ صفحه ورود و ثبت نام ═════════
صفحه سفید و لخت نباشد: یک پسزمینه مزرعهای، نوار برند بالا،
کارت اصلی وسط و سه مزیت کوتاه زیرش. */
.auth-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
padding:16px 16px 30px;position:relative;overflow:hidden}
.auth-wrap::before{content:'';position:absolute;inset-inline:-20%;top:-32%;height:62%;
border-radius:50%;background:radial-gradient(circle at 50% 60%,
color-mix(in srgb,var(--grass) 22%,transparent) 0%, transparent 68%);
pointer-events:none}
.auth-wrap::after{content:'';position:absolute;inset-inline:-30%;bottom:-38%;height:56%;
border-radius:50%;background:linear-gradient(180deg,
color-mix(in srgb,var(--grass100) 70%,transparent), transparent);
pointer-events:none}
.auth-wrap>*{position:relative;z-index:1}
.auth-top{display:flex;align-items:center;gap:10px;align-self:flex-start;
background:var(--surface);border:1px solid var(--line);border-radius:99px;
padding:6px 15px 6px 6px;box-shadow:0 2px 0 0 var(--lip);text-decoration:none;
max-width:100%;min-width:0}
.auth-top img{width:34px;height:34px;border-radius:11px;flex:none;
box-shadow:0 1px 0 0 var(--lip)}
/* نام و زیرنویس زیرِ هم، وگرنه در یک خط سهتایی میشوند و روی
گوشیِ باریک متن میشکند. */
.auth-top .nm{display:flex;flex-direction:column;align-items:flex-start;
gap:1px;min-width:0;line-height:1.35}
.auth-top b{font-size:14px;font-weight:900;color:var(--ink)}
.auth-top .sub{font-size:10.5px;color:var(--muted);font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.auth-top:hover{text-decoration:none}
.auth-box{width:100%;max-width:430px;margin:auto}
.auth-logo{display:flex;justify-content:center;margin:22px 0 16px}
.auth-logo img{width:132px;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.18))}
.auth-card{padding:26px 22px 30px;border-radius:28px;position:relative}
.auth-badge{display:inline-flex;align-items:center;gap:6px;background:var(--grass50);
color:var(--grassD);border:1px solid var(--grass100);border-radius:99px;
padding:6px 13px;font-size:11.5px;font-weight:800;margin:0 auto 14px;
display:flex;width:fit-content}
.auth-h1{font-size:21px;font-weight:900;margin:0 0 6px;text-align:center}
.auth-lead{text-align:center;margin:0 0 20px;line-height:1.9}
.auth-card form{margin-top:16px}
/* سه مزیتِ زیرِ کارت. یک کارتِ یکپارچه با خطِ جداکننده، نه سه
جعبهٔ جدا؛ اینطور زیرِ فرم آرامتر است و شلوغ به نظر نمیرسد. */
.auth-perks{list-style:none;padding:0;margin:16px 0 0;display:grid;
background:color-mix(in srgb,var(--surface) 78%,transparent);
border:1px solid var(--line);border-radius:20px;overflow:hidden}
.auth-perks li{display:flex;align-items:center;gap:11px;
padding:12px 14px;min-width:0;
border-block-end:1px solid var(--line)}
.auth-perks li:last-child{border-block-end:0}
/* اسمشان عمدا pk- دارد. .tx و .ic از قبل در همین فایل برای
ردیفهای تراکنش تعریف شدهاند و اگر همان را به کار میبردیم،
پدینگ و خطِ بالای آنها هم روی این میافتاد. */
.auth-perks .pk-ic{display:grid;place-items:center;width:34px;height:34px;
border-radius:11px;flex:none;background:var(--grass50);color:var(--grassD)}
.auth-perks .pk-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.auth-perks .pk-tx b{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.55}
.auth-perks .pk-tx i{font-style:normal;font-size:11px;font-weight:600;
color:var(--muted);line-height:1.65}
.auth-perks svg{flex:none}
.auth-legal{text-align:center;margin-top:14px;line-height:2}
.auth-back{text-align:center;margin-top:8px}
.auth-back a{display:inline-flex;align-items:center;gap:5px}
/* دسکتاپ: کارت ورود کنار معرفی برند، نه یک ستون باریک وسط صفحه سفید */
@media(min-width:900px){
.auth-wrap{padding:22px 32px 40px}
.auth-box{max-width:1000px;display:grid;grid-template-columns:1fr 430px;
gap:0 56px;align-items:center;align-content:center;grid-auto-rows:min-content}
.auth-logo{grid-column:2;grid-row:1;margin:0 0 16px}
.auth-card{grid-column:2;grid-row:2}
.auth-perks{grid-column:1;grid-row:1 / -1;align-self:center;gap:12px;margin:0}
.auth-perks li{font-size:14px;padding:16px 18px;border-radius:20px}
.auth-legal{grid-column:2;grid-row:3}
.auth-back{grid-column:2;grid-row:4}
.auth-h1{font-size:24px}
}
/* صفحه فرود */
.hero-l{padding:26px 0 8px;text-align:center}
.hero-l h1{font-size:29px;font-weight:900;line-height:1.5;margin:16px 0 10px}
.hero-l h1 b{color:var(--grassD)}
.hero-l p{font-size:14px;color:var(--soft);line-height:2;margin:0 auto;max-width:44ch}
.hero-art{width:100%;max-width:420px;margin:0 auto;display:block}
.usp{display:grid;gap:10px;margin-top:20px}
.usp li{display:flex;gap:11px;align-items:center;background:var(--surface);border:1px solid var(--line);
border-radius:20px;padding:13px 15px;font-size:13.5px;font-weight:700;
box-shadow:0 2px 0 0 var(--lip)}
.usp li svg{color:var(--grass);flex:none}
.steps{counter-reset:s;display:grid;gap:12px;margin-top:14px}
.step{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
border-radius:20px;padding:15px;box-shadow:0 2px 0 0 var(--lip)}
.step .n{width:32px;height:32px;flex:none;border-radius:99px;background:var(--grass);color:#fff;
display:grid;place-items:center;font-weight:900;font-size:14px}
.step h3{margin:0 0 4px;font-size:14px;font-weight:800}
.step p{margin:0;font-size:12.5px;color:var(--soft);line-height:1.9}
/* فوتر سایت */
footer.site{margin-top:28px;border-top:1px solid var(--line);padding:22px 0 8px}
footer.site .cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
footer.site h4{font-size:12px;font-weight:800;margin:0 0 9px;color:var(--ink)}
footer.site a{display:block;font-size:12.5px;color:var(--muted);padding:4px 0}
footer.site .copy{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
font-size:11px;color:var(--faint);display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
/* حالت خالی */
.empty{padding:38px 20px;text-align:center;color:var(--muted)}
.empty .ic{display:flex;justify-content:center;color:var(--faint);margin-bottom:12px}
.empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}
/* نوار پیشرفت عمومی */
.bar{height:12px;border-radius:99px;background:var(--line2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transform-origin:right center;
background:linear-gradient(270deg,var(--grass),var(--sun));
transition:transform .8s cubic-bezier(.34,1.2,.64,1)}
@media print{ nav,.rail,#toasts{display:none} }
/* ══════════════════ نوار بالای صفحه فرود ══════════════════ */
.lnav{display:flex;align-items:center;gap:10px;padding:14px 0 6px;position:sticky;top:0;z-index:30;
background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px)}
.lnav-brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-decoration:none}
.lnav-brand b{font-size:16px;font-weight:900;color:var(--ink)}
.lnav-brand:hover{text-decoration:none}
.lnav-links{display:none}
/* ══════════════════ وزن فونت، یکدست در کل سایت ══════════════════
وزیرمتن شش وزن دارد. استفاده درست از آنها چیزی است که رابط را
حرفهای میکند: متن بدنه 500، برچسب و دکمه 700، تیتر و عدد درشت 900. */
body{font-weight:500}
h1,h2,h3,h4,.b8,b,strong,.btn,.chip,.pill,.nb .l,.rb{font-weight:800}
h1,.bignum,.price,.cols .v{font-weight:900}
.mut,.xs,.sm,.hint,.meta,.ag,.l{font-weight:500}
.tnum,.nums{font-weight:700;font-variant-numeric:tabular-nums}
label{font-weight:700}
input,select,textarea{font-weight:600}
/* حالت بارگذاری بخش، فقط یک محو شدن کوتاه تا پرش دیده نشود */
#view{transition:opacity .12s ease}
#view.is-loading{opacity:.55}
.btn.is-busy{opacity:.6;pointer-events:none}
/* شبکه کارت دامها */
.agrid{display:grid;gap:12px}
/* ══════════════════════════════════════════════════════════════════════
دسکتاپ
موبایل دست نمیخورد. هر چه اینجاست از ۸۲۰ پیکسل به بالا شروع میشود.
دو پوسته داریم: body.site برای صفحههای عمومی و body.app برای برنامه.
══════════════════════════════════════════════════════════════════════ */
/* ── نشانگر ماوس: چیزی که در موبایل با لمس کار میکرد، اینجا با هاور ── */
@media (hover:hover) and (pointer:fine){
.btn{transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04)}
.b-pri:hover:not(:disabled){box-shadow:0 7px 0 0 var(--grassD)}
.b-acc:hover:not(:disabled){box-shadow:0 7px 0 0 var(--farmD)}
.b-sun:hover:not(:disabled){box-shadow:0 7px 0 0 var(--sunD)}
.b-gho:hover:not(:disabled){box-shadow:0 7px 0 0 var(--lip)}
.btn:active:not(:disabled){transform:translateY(2px)}
.ico-btn:hover,.pill:hover{transform:translateY(-2px);box-shadow:0 5px 0 0 var(--lip)}
.card{transition:box-shadow .18s,transform .18s}
.acard:hover,.pcard:hover{transform:translateY(-3px);
box-shadow:0 2px 0 0 var(--lip),0 20px 38px -20px rgba(0,0,0,.34)}
.usp li:hover,.step:hover{border-color:var(--line2)}
.dash:hover{background:var(--grass100)}
.scene{cursor:pointer}
.tx:hover{background:var(--surface2)}
a:hover{text-decoration:none}
.lnav-links a:hover{background:var(--surface2);color:var(--ink)}
footer.site a:hover{color:var(--grassD)}
}
/* اسکرولبار نازک، فقط دسکتاپ */
@media(min-width:820px){
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;
border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
}
/* ══════════════ ۱. پوسته برنامه در دسکتاپ ══════════════ */
@media(min-width:820px){
body.app .shell{max-width:1040px;padding:0 24px 48px}
body.app .hd{max-width:1040px;padding:14px 24px 10px}
body.app .alerts{max-width:1040px;padding:0 24px 10px}
body.app header{background:color-mix(in srgb,var(--bg) 82%,transparent)}
/* ریل به یک سایدبار واقعی تبدیل میشود، نه یک نوار پایین کشیدهشده */
.rail{width:240px;padding:18px 14px 0;gap:3px;
background:color-mix(in srgb,var(--surface) 82%,transparent)}
.rail-brand{display:flex;align-items:center;gap:10px;text-decoration:none;
padding:6px 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.rail-brand b{font-size:16px;font-weight:900;color:var(--ink)}
.rail-brand>span{display:flex;flex-direction:column;min-width:0}
.rail-brand .sub{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:3px;
line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-sep{height:1px;background:var(--line);margin:10px 8px}
.rail-cap{font-size:10px;font-weight:800;color:var(--faint);padding:8px 12px 4px;letter-spacing:.02em}
.rb{padding:11px 12px;font-size:13.5px;border-radius:14px}
.rb.on{box-shadow:0 3px 0 0 var(--grassD)}
.rail-foot{margin-top:auto;padding:12px 0 18px}
.rail-bal{display:flex;align-items:center;gap:9px;background:var(--surface2);
border:1px solid var(--line);border-radius:16px;padding:11px 12px;margin-bottom:8px}
.rail-bal .l{font-size:10px;color:var(--muted);font-weight:600}
.rail-bal .v{font-size:14px;font-weight:900;color:var(--grassD)}
/* دامها و کارتها چند ستونه */
.agrid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid3{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.acts{max-width:520px}
}
@media(min-width:1280px){
body.app .shell,body.app .hd,body.app .alerts{max-width:1200px}
.agrid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}
/* در دسکتاپ کارت کیف پول کنار میانبرها مینشیند تا صفحه خالی نماند */
@media(min-width:1100px){
.wal-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
gap:16px;align-items:stretch}
.wal-top>*{margin-top:0}
/* میانبرها در ستون باریک، دو در دو و داخل یک قاب */
.wal-top .acts{grid-template-columns:repeat(2,1fr);gap:18px 8px;max-width:none;
align-content:center;background:var(--surface);border:1px solid var(--line);
border-radius:24px;padding:22px 16px;box-shadow:0 2px 0 0 var(--lip),0 12px 28px -16px rgba(0,0,0,.28)}
}
/* ── قهرمان صفحه فرود: در موبایل تصویر بالا، در دسکتاپ کنار متن ── */
.hero-l{display:grid;gap:0}
.hero-media{order:-1}
.hero-cta{display:grid;gap:10px;margin-top:22px;max-width:340px;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--grass50);
color:var(--grassD);border:1px solid var(--grass100);border-radius:99px;
padding:6px 13px;font-size:12px;font-weight:800}
/* ══════════════ ۲. صفحههای عمومی در دسکتاپ ══════════════ */
@media(min-width:820px){
body.site .shell{max-width:880px;padding:0 24px 48px}
body.site .shell.wide{max-width:1200px}
}
@media(min-width:1024px){
/* نوار بالا: برند راست، لینکها وسط، دکمهها چپ */
.lnav{padding:18px 0 14px;gap:18px}
.lnav-brand{flex:0 0 auto}
.lnav-brand b{font-size:18px}
.lnav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.lnav-links a{padding:9px 14px;border-radius:12px;font-size:14px;font-weight:700;
color:var(--soft);transition:background .16s,color .16s}
.lnav .btn.b-sm{padding:12px 22px;font-size:14px}
/* قهرمان دو ستونه */
.hero-l{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
align-items:center;gap:52px;text-align:start;padding:52px 0 44px}
.hero-media{order:0}
.hero-copy{max-width:none}
.hero-l h1{font-size:clamp(30px,3.05vw,44px);line-height:1.4;margin:16px 0 18px;
text-wrap:balance;overflow-wrap:break-word}
.hero-l p{font-size:16.5px;line-height:2.05;max-width:50ch;margin:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;max-width:none;margin:28px 0 0}
.hero-cta .btn{flex:0 0 auto;width:auto}
.hero-art{max-width:100%}
/* مزیتها سه ستونه، مرحلهها چهار ستونه */
.usp{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;max-width:none}
.usp li{font-size:14px;padding:16px 17px;align-items:flex-start}
.steps{grid-template-columns:repeat(4,1fr);gap:14px;max-width:none}
.step{flex-direction:column;gap:12px;padding:20px}
.step h3{font-size:15px}
.step p{font-size:13px}
/* سوالها دو ستونه، ستونها مستقل باز و بسته میشوند */
.shell .kfaq{max-width:none;display:grid;grid-template-columns:1fr 1fr;
gap:10px 14px;align-items:start}
.shell .kfaq h2{grid-column:1 / -1;font-size:21px;margin-bottom:4px}
.shell .kfaq details{margin:0}
/* فوتر */
footer.site{padding-top:30px}
footer.site .cols{grid-template-columns:1.6fr 1fr 1fr;gap:36px}
/* سربرگ صفحههای محتوایی */
.phead h1{font-size:27px}
.phead .sub{font-size:13.5px}
}
@media(min-width:1280px){
.hero-l{gap:64px;padding:64px 0 52px}
.hero-l h1{font-size:clamp(38px,3.15vw,50px)}
}
/* ── نوار عددها، فقط داده واقعی از تنظیمات سایت ── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:20px;
padding:16px;text-align:center;box-shadow:0 2px 0 0 var(--lip)}
.stat .v{font-size:20px;font-weight:900;color:var(--grassD);line-height:1.4}
.stat .l{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}
@media(min-width:1024px){
.stats{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.stat{padding:22px 16px}
.stat .v{font-size:26px}
.stat .l{font-size:12.5px}
}
/* ── کارت دامهای قابل خرید در صفحه فرود ── */
.lstock{display:grid;gap:12px;margin-top:14px}
.lscard{background:var(--surface);border:1px solid var(--line);border-radius:22px;
padding:18px;box-shadow:0 2px 0 0 var(--lip);display:flex;gap:14px;align-items:flex-start}
.lscard .art{width:66px;height:66px;flex:none;border-radius:20px;display:grid;place-items:center;
background:linear-gradient(180deg,#BFE9FF,var(--grass100))}
.lscard h3{margin:0 0 5px;font-size:15px;font-weight:800}
.lscard .pr{font-size:16px;font-weight:900;color:var(--ink)}
.lscard .pr small{font-size:11px;font-weight:700;color:var(--muted)}
.lscard p{margin:6px 0 0;font-size:12.5px;color:var(--soft);line-height:1.9}
@media(min-width:1024px){
.lstock{grid-template-columns:repeat(3,1fr);gap:16px}
.lscard{flex-direction:column;text-align:center;align-items:center;padding:24px}
.lscard .art{width:86px;height:86px}
.lscard h3{font-size:16px}
.lscard .pr{font-size:19px}
}
/* ── نوار پایانی دعوت به شروع ── */
.cta-band{margin-top:32px;border-radius:28px;padding:26px 20px;text-align:center;color:#fff;
background:linear-gradient(155deg,var(--heroA) 0%,var(--heroB) 55%,var(--heroC) 100%);
box-shadow:0 22px 45px -24px rgba(11,43,19,.9)}
.cta-band h2{margin:0 0 8px;font-size:20px;font-weight:900;color:#fff}
.cta-band p{margin:0 auto 18px;font-size:13.5px;line-height:2;color:rgba(255,255,255,.8);max-width:52ch}
@media(min-width:1024px){
.cta-band{padding:44px 40px;margin-top:44px}
.cta-band h2{font-size:28px}
.cta-band p{font-size:15px;margin-bottom:24px}
}
/* ── بخش اعتماد، در موبایل عمودی و وسطچین ── */
.trust{text-align:center}
/* ── بخش اعتماد، در دسکتاپ افقی ── */
@media(min-width:1024px){
.trust{display:flex;align-items:center;gap:24px;text-align:start;padding:28px 32px}
.trust .ic{flex:none;margin:0}
.trust p{margin-top:6px;max-width:70ch}
}
/* کارت خوشآمد کاربر وارد شده در صفحه فرود، در دسکتاپ پهن نشود */
@media(min-width:1024px){
.welcome{max-width:520px;margin-inline-start:0}
}
/* نمای مزرعه در دسکتاپ: دامها ستون اصلی، بقیه یک ستون کناری */
@media(min-width:1100px){
body.app #view[data-view="farm"]{display:grid;grid-template-columns:minmax(0,1fr) 332px;
gap:0 20px;align-items:start}
#view[data-view="farm"]>.f-main{grid-column:1;grid-row:1 / span 8}
#view[data-view="farm"]>.f-side{grid-column:2}
#view[data-view="farm"]>.f-main>.agrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
/* ══════════════════ ماموریتها ══════════════════ */
.mgrid{display:grid;gap:10px}
.mcard{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
border:1px solid var(--line);border-radius:20px;padding:14px;
box-shadow:0 2px 0 0 var(--lip);transition:border-color .2s,opacity .2s}
.mcard .m-ic{width:44px;height:44px;flex:none;border-radius:15px;display:grid;place-items:center;
background:var(--surface3);color:var(--soft)}
.mcard .m-t{font-size:13.5px;font-weight:800;line-height:1.6}
.mcard .m-d{font-size:11.5px;color:var(--muted);line-height:1.9;margin-top:2px}
.mcard .m-rw{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.m-tag{display:inline-flex;align-items:center;gap:4px;background:var(--sun50);color:var(--sunD);
border-radius:99px;padding:3px 9px;font-size:10.5px;font-weight:800}
.mcard .m-act{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:0}
.m-ok{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;
background:var(--grass50);color:var(--grassD)}
.m-wait{font-size:10.5px;color:var(--faint);font-weight:700;align-self:center}
.m-grow-b{display:inline-flex;align-items:center;gap:5px;background:var(--sun100);color:var(--sunD);
border-radius:99px;padding:6px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.mcard.m-ready{border-color:var(--grass);
background:linear-gradient(200deg,var(--grass50),var(--surface) 68%);
box-shadow:0 3px 0 0 color-mix(in srgb,var(--grass) 26%,transparent),
0 10px 20px -10px color-mix(in srgb,var(--grass) 50%,transparent)}
.mcard.m-ready .m-ic{background:var(--grass100);color:var(--grassD)}
.mcard.m-collect{border-color:var(--sun);
background:linear-gradient(200deg,var(--sun50),var(--surface) 68%);
box-shadow:0 3px 0 0 color-mix(in srgb,var(--sun) 45%,transparent),
0 10px 20px -10px color-mix(in srgb,var(--sunD) 45%,transparent)}
.mcard.m-collect .m-ic{background:var(--sun100);color:var(--sunD)}
.mcard.m-grow .m-ic{background:var(--farm50);color:var(--farmD)}
.mcard.m-done{opacity:.62}
.mcard.m-done .m-ic{background:var(--grass50);color:var(--grassD)}
/* دکمه دو مرحلهای «باز کن» ← «عضو شدم» */
.m-go{min-width:104px;justify-content:center}
.m-go.is-wait{opacity:.75;cursor:progress}
.m-go.is-ready{animation:mgoIn .3s cubic-bezier(.34,1.4,.64,1)}
@keyframes mgoIn{from{transform:scale(.9);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .m-go.is-ready{animation:none} }
@media(hover:hover) and (pointer:fine){ .mcard:hover{border-color:var(--line2)} }
@media(min-width:820px){ .mgrid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))} }
/* ══════════════════ پلههای جایزه ══════════════════ */
/* عمداً خانواده رنگیاش سرد است (آبی/بنفش) تا با ماموریتها که گرماند
(زرد/نارنجی) اشتباه گرفته نشود. کاربر باید با یک نگاه بفهمد اینجا
جای دیگری است. */
.ladder{display:grid;gap:0;position:relative}
.mstep{display:flex;align-items:center;gap:13px;padding:13px 14px;position:relative;
background:var(--surface);border:1px solid var(--line);border-radius:20px;
box-shadow:0 2px 0 0 var(--lip);margin-bottom:10px;transition:transform .18s,box-shadow .18s}
.mstep:last-child{margin-bottom:0}
/* خط عمودی که پلهها را مثل یک نردبان به هم وصل میکند */
.mstep::after{content:"";position:absolute;top:100%;inset-inline-start:36px;width:3px;height:10px;
border-radius:99px;background:var(--line2)}
.mstep:last-child::after{display:none}
.mstep.on::after{background:linear-gradient(180deg,var(--sky),var(--plum))}
.mstep .st{width:46px;height:46px;flex:none;border-radius:16px;display:grid;place-items:center;
position:relative;background:var(--surface3);color:var(--faint)}
.mstep .st .n{position:absolute;inset-block-end:-5px;inset-inline-end:-5px;
min-width:19px;height:19px;padding:0 5px;border-radius:99px;display:grid;place-items:center;
font-size:10px;font-weight:800;background:var(--surface3);color:var(--muted);
box-shadow:0 0 0 2px var(--surface)}
.mstep .sb{flex:1;min-width:0}
.mstep .sn{font-size:13.5px;font-weight:800;line-height:1.6}
.mstep .sd{font-size:11px;color:var(--muted);margin-top:3px}
.mstep .sc{flex:none;display:inline-flex;align-items:center;gap:4px;border-radius:99px;
padding:5px 10px;font-size:10.5px;font-weight:800;white-space:nowrap;
background:var(--surface3);color:var(--muted)}
/* باز شده ولی هنوز گرفته نشده: آبی و زنده */
.mstep.on{border-color:color-mix(in srgb,var(--sky) 55%,transparent);
background:linear-gradient(200deg,var(--sky50),var(--surface) 70%);
box-shadow:0 3px 0 0 color-mix(in srgb,var(--sky) 26%,transparent),
0 10px 20px -10px color-mix(in srgb,var(--sky) 55%,transparent)}
.mstep.on .st{background:var(--sky100);color:var(--skyD)}
.mstep.on .st .n{background:var(--sky);color:#fff}
.mstep.on .sc{background:var(--sky100);color:var(--skyD)}
/* گرفته شده: بنفش آرام، بدون سر و صدا */
.mstep.got{border-color:color-mix(in srgb,var(--plum) 40%,transparent);
background:linear-gradient(200deg,var(--plum50),var(--surface) 70%)}
.mstep.got .st{background:color-mix(in srgb,var(--plum) 18%,transparent);color:var(--plumD)}
.mstep.got .st .n{background:var(--plum);color:#fff}
.mstep.got .sc{background:color-mix(in srgb,var(--plum) 18%,transparent);color:var(--plumD)}
/* قفل: خاکستری و کمرنگ */
.mstep.off{opacity:.72}
.mstep.off .st svg{opacity:.55}
@media(hover:hover) and (pointer:fine){
.mstep.on:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){ .mstep{transition:none} }
@media(min-width:820px){ .ladder{max-width:640px} }
/* دکمهی «کپی» و «اشتراکگذاری» وقتی متن عوض میشود نپرد */
.btn[data-copy],.btn[data-share]{min-width:88px;justify-content:center}
/* ══════════════════ برداشت کریپتو ══════════════════ */
.bonus-band{display:flex;align-items:center;gap:13px;border-radius:20px;padding:15px 16px;
margin-bottom:16px;color:#fff;
background:linear-gradient(135deg,var(--grass),var(--grassD));
box-shadow:0 10px 24px -14px rgba(11,43,19,.9)}
.bonus-band b{font-size:14px;font-weight:900;display:block}
.mth{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mth-o{position:relative;cursor:pointer}
.mth-o input{position:absolute;opacity:0;width:0;height:0}
.mth-b{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
border:2px solid var(--line2);background:var(--surface2);border-radius:18px;padding:13px 9px;
color:var(--soft);transition:border-color .16s,background .16s}
.mth-b b{font-size:13px;font-weight:800;color:var(--ink)}
.mth-o input:checked ~ .mth-b{border-color:var(--grass);background:var(--grass50)}
.mth-o input:disabled ~ .mth-b{opacity:.5}
.mth-tag{background:var(--grass);color:#fff;border-radius:99px;padding:2px 8px;
font-size:10px;font-weight:900}
.wd-out{display:flex;align-items:center;justify-content:center;gap:7px;
background:var(--grass50);color:var(--grassD);border-radius:16px;padding:13px;
font-size:13px;font-weight:700;margin-bottom:14px}
.wd-out b{font-size:19px;font-weight:900}
/* ══════════════════ کلید خاموش و روشن ══════════════════ */
.tgl{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl-s{flex:none;width:50px;height:29px;border-radius:99px;background:var(--line2);
position:relative;transition:background .2s}
.tgl-s::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:23px;height:23px;
border-radius:99px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s}
.tgl input:checked ~ .tgl-s{background:var(--grass)}
.tgl input:checked ~ .tgl-s::after{transform:translateX(-21px)}
html[dir="ltr"] .tgl input:checked ~ .tgl-s::after{transform:translateX(21px)}
.tgl input:focus-visible ~ .tgl-s{outline:2px solid var(--grass);outline-offset:2px}
/* ══════════════════ تصویرهای واقعی مزرعه ══════════════════ */
img.art{display:block;object-fit:contain;image-rendering:auto}
.sprite img.art{filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.sprite.hgy img.art{filter:grayscale(.42) drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.pcard .art img.art,.lscard .art img.art{margin:auto}
.lscard .art{overflow:hidden}
/* ══════════════════ پنل بازشو لانه و انبار ══════════════════ */
/* این دو کارت باید از پسزمینه بیرون بزنند: لبهی رنگی، سایهی سهلایه
(یک لبهی سخت زیر کارت + یک سایهی نرم دورش) و یک هایلایت داخلی بالا.
موقع فشار دادن، کارت روی لبهاش مینشیند؛ حس دکمهی واقعی میدهد. */
button.coop,button.feedbar{width:100%;text-align:start;font-family:inherit;cursor:pointer;
border:1.5px solid color-mix(in srgb,var(--sunD) 26%,transparent);
box-shadow:
inset 0 1.5px 0 0 rgba(255,255,255,.55),
0 4px 0 0 color-mix(in srgb,var(--sunD) 30%,transparent),
0 8px 18px -6px color-mix(in srgb,var(--sunD) 42%,transparent);
transition:transform .12s,box-shadow .12s}
button.feedbar{
border-color:color-mix(in srgb,var(--farm) 34%,transparent);
box-shadow:
inset 0 1.5px 0 0 rgba(255,255,255,.55),
0 4px 0 0 color-mix(in srgb,var(--farm) 34%,transparent),
0 8px 18px -6px color-mix(in srgb,var(--farm) 44%,transparent)}
button.coop:active,button.feedbar:active{transform:translateY(4px);
box-shadow:inset 0 1.5px 0 0 rgba(255,255,255,.4),0 0 0 0 transparent}
@media(hover:hover) and (pointer:fine){
button.coop:hover,button.feedbar:hover{transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
button.coop,button.feedbar{transition:none}
button.coop:active,button.feedbar:active{transform:none}
}
.feedbar{border-radius:24px;padding:14px;position:relative;
background:linear-gradient(200deg,
color-mix(in srgb,var(--farm50) 88%,#fff) 0%, var(--farm50) 48%,
color-mix(in srgb,var(--farm50) 84%,var(--farm)) 100%)}
.coop-art{width:52px;height:52px;flex:none;border-radius:17px;display:grid;place-items:center;
background:color-mix(in srgb,var(--surface) 88%,transparent);overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 3px 8px -3px rgba(0,0,0,.28)}
.pnl-cx{flex:none;color:var(--muted);transition:transform .22s}
[aria-expanded="true"] .pnl-cx{transform:rotate(-90deg)}
.pnl{overflow:hidden}
.pnl[hidden]{display:none!important}
.pnl-in{background:var(--surface);border:1px solid var(--line);border-radius:22px;
padding:16px;margin-top:9px;box-shadow:0 2px 0 0 var(--lip);
animation:pnlIn .22s cubic-bezier(.34,1.2,.64,1)}
@keyframes pnlIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pnl-hd{display:flex;align-items:center;gap:12px;padding-bottom:13px;
border-bottom:1px solid var(--line);margin-bottom:13px}
.pnl-hd img.art{border-radius:14px}
.cstairs{display:grid;gap:8px}
.cstep{display:flex;align-items:center;gap:11px;border-radius:16px;padding:11px 12px;
background:var(--surface2);border:1px solid var(--line)}
.cstep b{font-size:13px}
.cs-ic{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;
background:var(--surface3);color:var(--soft)}
.cstep.c-now{border-color:var(--grass);background:var(--grass50)}
.cstep.c-now .cs-ic{background:var(--grass);color:#fff}
.cstep.c-done{opacity:.72}
.cstep.c-done .cs-ic{background:var(--grass50);color:var(--grassD)}
.cstep.c-next{opacity:.62}
.cs-ok{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
background:var(--grass50);color:var(--grassD);flex:none}
.fstock{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.fstock:first-of-type{border-top:0;padding-top:0}
.fs-ic{width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;
background:var(--surface3);overflow:hidden}
/* ══════════ دکمههای واقعی (جای لینکهای دکمهنما) ══════════ */
.btn,.dash,.rb,.nb,.ghb,.act,.pill,.ico-btn,.back,.auth-top{
-webkit-user-select:none;user-select:none;text-decoration:none}
.btn.blk,.dash{width:100%}
.rb,.ghb{width:100%;text-align:start}
.nb{text-align:center;background:none}
.act{background:none;border:0;padding:0;width:100%}
.auth-backb{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:700}
.auth-backb:active{transform:translateY(1px)}
/* دکمهی ریز داخل متن (جای لینک متنی) */
.chipb{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
background:var(--grass50);color:var(--grassD);border-radius:99px;
padding:3px 10px;font-size:11.5px;font-weight:800;line-height:1.9;
box-shadow:0 2px 0 0 color-mix(in srgb,var(--grassD) 22%,transparent);transition:transform .1s}
.chipb:active{transform:translateY(2px);box-shadow:none}
/* ══════════════════ صحنهی متحرک بنر صفحه فرود ══════════════════ */
/* همهی حرکتها روی یک دورهی ۸ ثانیهای (یا نصف/چهارمِ آن) سوارند و
فریم اول و آخرشان یکی است، پس حلقه هیچجا تپق نمیزند. */
.stage{position:relative;width:100%;max-width:420px;margin:0 auto;
aspect-ratio:1200/630;border-radius:26px;overflow:hidden;isolation:isolate;
box-shadow:0 10px 30px -14px rgba(27,106,43,.5),0 2px 0 0 var(--lip);
background:#BFE9F5}
.stage>*{position:absolute}
.stage .sky{inset:0;background:linear-gradient(180deg,#8FD8EE 0%,#C8EDF7 46%,#E7F7DE 72%,#DFF3D2 100%)}
.stage .sun{width:15%;aspect-ratio:1;border-radius:50%;right:9%;bottom:58%;
background:radial-gradient(circle at 38% 34%,#FFF3B0 0%,#FFD34D 52%,#FFB627 100%);
box-shadow:0 0 0 3.2% rgba(255,214,92,.34),0 0 8% 3% rgba(255,190,40,.5);
animation:sunUp 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sunUp{
0% {transform:translateY(150%) scale(.82);opacity:.2}
30% {transform:translateY(0) scale(1); opacity:1}
70% {transform:translateY(0) scale(1); opacity:1}
100% {transform:translateY(150%) scale(.82);opacity:.2}
}
.stage .cloud{background:#fff;border-radius:99px;opacity:.88;
box-shadow:0 6px 12px -8px rgba(0,0,0,.2)}
.stage .cloud::before,.stage .cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.stage .c1{width:22%;height:8%;top:11%;left:-26%;animation:drift 8s linear infinite}
.stage .c1::before{width:56%;height:150%;left:12%;top:-72%}
.stage .c1::after{width:40%;height:120%;left:48%;top:-48%}
.stage .c2{width:15%;height:6%;top:24%;left:-20%;opacity:.6;animation:drift 8s linear infinite;animation-delay:-4s}
.stage .c2::before{width:58%;height:150%;left:14%;top:-70%}
.stage .c2::after{width:38%;height:118%;left:50%;top:-44%}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(760%)}}
.stage .hill{left:-6%;right:-6%;border-radius:50% 50% 0 0}
.stage .h2{bottom:0;height:44%;background:linear-gradient(180deg,#8FD46A,#6FBE50)}
.stage .h1{bottom:0;height:33%;background:linear-gradient(180deg,#A7E27E,#7FC95C)}
.stage .ch{display:grid;place-items:center}
.stage .ch img,.stage .ch svg{display:block;width:100%;height:auto}
/* بچههای تودرتو هم باید absolute باشند، وگرنه در جریان عادی مینشینند
و جعبهی والدشان را کش میدهند. */
.stage .bottle,.stage .pour,.stage .crate,.stage .laid,
.stage .cash,.stage .tap,.stage .pop{position:absolute}
/* ── گاو: شیر میریزد توی بطری ── */
.stage .cow{width:28%;left:3%;bottom:7%;animation:stageBob 4s ease-in-out infinite}
.stage .cow .bottle{width:30%;right:-22%;bottom:4%;animation:fill 8s ease-in-out infinite}
.stage .cow .pour{width:5%;right:-9%;top:44%;height:0;
border-radius:99px;background:linear-gradient(180deg,#fff,#F2F8FF);
box-shadow:0 0 0 1px rgba(120,160,200,.4);
animation:pour 8s ease-in-out infinite}
@keyframes pour{
0%,10% {height:0;opacity:0}
18% {height:30%;opacity:1}
46% {height:30%;opacity:1}
54%,100% {height:0;opacity:0}
}
@keyframes fill{
0%,14% {transform:none}
22% {transform:translateY(-5%) rotate(-4deg)}
50% {transform:translateY(-5%) rotate(-4deg)}
60%,100%{transform:none}
}
/* ── مرغ: تخم میگذارد و تخم میافتد توی شانه ── */
.stage .hen{width:20%;left:40%;bottom:26%;animation:stageBob 4s ease-in-out infinite;animation-delay:-1.3s}
.stage .hen .crate{width:54%;right:-56%;bottom:-42%}
.stage .hen .laid{width:26%;right:4%;bottom:14%;
animation:layEgg 8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes layEgg{
0%,24% {transform:translate(0,0) scale(.3);opacity:0}
32% {transform:translate(0,0) scale(1);opacity:1}
48% {transform:translate(120%,150%) scale(1) rotate(26deg);opacity:1}
56% {transform:translate(132%,178%) scale(.85) rotate(34deg);opacity:0}
100% {transform:translate(0,0) scale(.3);opacity:0}
}
/* ── گوسفند: پول میشمارد ── */
.stage .ram{width:22%;right:4%;bottom:9%;animation:stageBob 4s ease-in-out infinite;animation-delay:-2.6s}
.stage .cash{color:#F5B400;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
opacity:0;animation:floatUp 4s ease-out infinite}
.stage .c-a{left:-16%;bottom:56%}
.stage .c-b{left:0;bottom:62%;animation-delay:-1.35s}
.stage .c-c{left:-30%;bottom:52%;animation-delay:-2.7s}
@keyframes floatUp{
0% {transform:translateY(8px) scale(.6);opacity:0}
22% {transform:translateY(0) scale(1);opacity:1}
72% {transform:translateY(-42px) scale(1);opacity:.85}
100%{transform:translateY(-64px) scale(.8);opacity:0}
}
/* ── دکمه برداشت آنی که خودش زده میشود ── */
.stage .cashout{left:45%;bottom:5%;transform:translateX(-50%);line-height:1}
.stage .cbtn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
background:linear-gradient(180deg,#FFD65C,#FFB800);color:#5A3D00;
border-radius:99px;padding:7px 14px;font-size:11.5px;font-weight:800;
box-shadow:0 3px 0 0 #C98F00,0 8px 16px -8px rgba(0,0,0,.45);
animation:press 8s cubic-bezier(.34,1.4,.64,1) infinite}
@keyframes press{
0%,66% {transform:none;box-shadow:0 3px 0 0 #C98F00,0 8px 16px -8px rgba(0,0,0,.45)}
72% {transform:translateY(3px);box-shadow:0 0 0 0 #C98F00}
80%,100%{transform:none;box-shadow:0 3px 0 0 #C98F00,0 8px 16px -8px rgba(0,0,0,.45)}
}
.stage .tap{right:-16px;bottom:-18px;line-height:0;opacity:0;
filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));
animation:tapIn 8s ease-out infinite}
.stage .tap svg{display:block;width:26px;height:auto}
@keyframes tapIn{
0%,58% {transform:translate(14px,14px) scale(.7);opacity:0}
66% {transform:translate(0,0) scale(1);opacity:1}
72% {transform:translate(-2px,-3px) scale(.9);opacity:1}
82% {transform:translate(0,0) scale(1);opacity:1}
92%,100%{transform:translate(14px,14px) scale(.7);opacity:0}
}
.stage .pop{color:#F5B400;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));opacity:0;
left:50%;bottom:100%;animation:burst 8s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes burst{
0%,72% {transform:translate(-50%,14px) scale(.4);opacity:0}
78% {transform:translate(-50%,-2px) scale(1);opacity:1}
88% {transform:translate(-150%,-34px) scale(.95);opacity:.9}
95%,100%{transform:translate(-205%,-52px) scale(.7);opacity:0}
}
.stage .p2{animation-name:burst2;animation-delay:.06s}
@keyframes burst2{
0%,72% {transform:translate(-50%,14px) scale(.4);opacity:0}
78% {transform:translate(-50%,-2px) scale(1);opacity:1}
88% {transform:translate(0,-40px) scale(.95);opacity:.9}
95%,100%{transform:translate(50%,-58px) scale(.7);opacity:0}
}
.stage .p3{animation-name:burst3;animation-delay:.14s}
@keyframes burst3{
0%,72% {transform:translate(-50%,14px) scale(.4);opacity:0}
78% {transform:translate(-50%,-2px) scale(1);opacity:1}
88% {transform:translate(-70%,-48px) scale(.95);opacity:.9}
95%,100%{transform:translate(-80%,-68px) scale(.7);opacity:0}
}
/* بالا و پایین شدن ملایم شخصیتها. نامش stageBob است تا با bob که
جای دیگری استفاده میشود قاطی نشود. */
@keyframes stageBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
/* احترام به تنظیم «کاهش حرکت»: صحنه میماند، حرکت میایستد */
@media (prefers-reduced-motion:reduce){
.stage *{animation:none!important}
.stage .sun{transform:none;opacity:1}
.stage .cow .bottle,.stage .hen .laid,.stage .cash,.stage .pop,.stage .tap{opacity:1}
.stage .cow .pour{height:30%;opacity:1}
}
@media(min-width:900px){ .stage{max-width:100%} }
/* ══════════════════ بنر ویدیویی صفحه فرود ══════════════════ */
/* ویدیو دقیقا جای همان عکس قبلی مینشیند، پس چیدمان تکان نمیخورد. */
video.hero-art{width:100%;max-width:420px;margin:0 auto;display:block;
height:auto;border-radius:26px;object-fit:cover;background:#BFE9F5;
box-shadow:0 10px 30px -14px rgba(27,106,43,.5),0 2px 0 0 var(--lip)}
img.hero-art{border-radius:26px}
@media(min-width:900px){ video.hero-art{max-width:100%} }
/* ══════════════════ بنر زندهی صفحه فرود ══════════════════ */
/* تصویر اصلی بنر دستنخورده پایین مینشیند و کاراکترها لایهی جدا
روی خودشان سوارند. هر لایه فقط بزرگ میشود یا حول محور خودش
میچرخد، پس هیچوقت از جای اصلیاش کنار نمیرود و زیرش لو نمیرود.
دورهی کل حلقه ۸ ثانیه است و فریم اول و آخر دقیقا یکی است. */
.kbn{position:relative;width:100%;max-width:420px;margin:0 auto;
aspect-ratio:1376/768;overflow:hidden;border-radius:26px;isolation:isolate;
background:#BFE9F5;
box-shadow:0 10px 30px -14px rgba(27,106,43,.5),0 2px 0 0 var(--lip)}
.kbn .kb-base{position:absolute;inset:0;width:100%;height:100%;display:block;
object-fit:cover;z-index:0}
.kbn .kb-lay{position:absolute;display:block;z-index:3}
.kbn .kb-lay img{display:block;width:100%;height:100%;object-fit:contain}
/* ابرهای شناور */
.kbn .kb-cl{position:absolute;z-index:1;background:#fff;border-radius:99px;opacity:.5;filter:blur(1px)}
.kbn .kb-cl::before,.kbn .kb-cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.kbn .kb-cl1{width:7%;height:2.6%;top:9%;left:-10%;animation:kbnDrift 8s linear infinite}
.kbn .kb-cl1::before{width:56%;height:150%;left:12%;top:-72%}
.kbn .kb-cl1::after{width:40%;height:120%;left:48%;top:-46%}
.kbn .kb-cl2{width:5%;height:2%;top:20%;left:-8%;opacity:.34;
animation:kbnDrift 8s linear infinite;animation-delay:-4s}
.kbn .kb-cl2::before{width:58%;height:150%;left:14%;top:-70%}
.kbn .kb-cl2::after{width:38%;height:118%;left:50%;top:-44%}
@keyframes kbnDrift{from{transform:translateX(0)}to{transform:translateX(1900%)}}
/* خورشید: ۳۰ درجه در هر دور، یعنی دقیقا فاصلهی دو پرتو، پس چرخشش
پیوسته دیده میشود ولی حلقه سر جای اول برمیگردد */
.kbn .kb-sun{left:54.506%;top:1.042%;width:15.262%;height:26.953%;z-index:2;
animation:kbnSunPulse 4s ease-in-out infinite}
.kbn .kb-sun img{animation:kbnSunSpin 8s linear infinite}
@keyframes kbnSunSpin{from{transform:rotate(0)}to{transform:rotate(30deg)}}
@keyframes kbnSunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* نفس کشیدن شخصیتها */
.kbn .kb-ch{transform-origin:50% 100%;animation:kbnBreathe 4s ease-in-out infinite}
@keyframes kbnBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.kbn .kb-hen{left:50%;top:34.896%;width:14.099%;height:23.958%}
.kbn .kb-cow{left:79.07%;top:12.76%;width:20.93%;height:43.49%;animation-delay:-1.3s}
.kbn .kb-ram{left:84.302%;top:51.042%;width:15.698%;height:36.458%;animation-delay:-2.6s;
animation-name:kbnBreatheTilt}
@keyframes kbnBreatheTilt{
0%,100%{transform:scale(1) rotate(0)}
50% {transform:scale(1.03) rotate(-1.2deg)}
}
/* مرغ تخم میگذارد؛ تخم از پشتش میآید و روی همان خط سرعتِ بنر
به چپ پرتاب میشود */
.kbn .kb-egg2{left:50.727%;top:49.219%;width:5.378%;height:8.333%;z-index:2;opacity:0;
animation:kbnLay 8s cubic-bezier(.35,.05,.5,1) infinite}
@keyframes kbnLay{
0%,12% {transform:translate(95%,-14%) scale(.35) rotate(0);opacity:0}
19% {transform:translate(58%,-8%) scale(.92) rotate(-16deg);opacity:1}
31% {transform:translate(-95%,16%) scale(1) rotate(-46deg);opacity:1}
42% {transform:translate(-255%,36%) scale(.8) rotate(-74deg);opacity:0}
100% {transform:translate(95%,-14%) scale(.35);opacity:0}
}
/* برق روی شیشهی شیرِ دست گاو */
.kbn .kb-glint{position:absolute;z-index:4;left:77.2%;top:27.6%;width:3.6%;height:12.4%;
overflow:hidden;border-radius:22% / 8%;opacity:.9}
.kbn .kb-glint::after{content:"";position:absolute;top:-30%;left:-60%;width:40%;height:160%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
transform:rotate(14deg);animation:kbnGlint 8s ease-in-out infinite}
@keyframes kbnGlint{
0%,42% {transform:translateX(0) rotate(14deg)}
52% {transform:translateX(420%) rotate(14deg)}
100% {transform:translateX(420%) rotate(14deg)}
}
/* لحظهی کلیک: دکمه فشرده میشود و از نوک انگشت موج بیرون میزند */
.kbn .kb-btn{left:52.471%;top:73.177%;width:22.384%;height:11.719%;
transform-origin:50% 50%;z-index:2;animation:kbnPress 8s cubic-bezier(.34,1.4,.64,1) infinite}
/* فقط بزرگ میشود، هرگز کوچک. اگر کوچک شود دکمهی اصلیِ زیرش از
لبه بیرون میزند و متن دو تا دیده میشود. */
@keyframes kbnPress{
0%,54% {transform:scale(1);filter:none}
59% {transform:scale(1.035);filter:brightness(1.15) saturate(1.06)}
68% {transform:scale(1.012);filter:brightness(1.06)}
76%,100%{transform:scale(1);filter:none}
}
.kbn .kb-ring{position:absolute;z-index:4;left:67.6%;top:79.4%;width:2.4%;aspect-ratio:1;
margin:-1.2% 0 0 -1.2%;border-radius:50%;border:2px solid rgba(255,255,255,.95);
opacity:0;animation:kbnRipple 8s ease-out infinite}
@keyframes kbnRipple{
0%,54% {transform:scale(.3);opacity:0}
58% {transform:scale(.6);opacity:.95}
70% {transform:scale(4.4);opacity:0}
100% {transform:scale(.3);opacity:0}
}
/* سکهها میپرند توی گاوصندوق */
.kbn .kb-coin{left:55%;top:66%;width:3.634%;height:6.51%;z-index:4;opacity:0;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));
animation:kbnFly 8s cubic-bezier(.3,.1,.4,1) infinite}
.kbn .kb-c2{animation-delay:.16s}
.kbn .kb-c3{animation-delay:.32s}
@keyframes kbnFly{
0%,60% {transform:translate(0,0) scale(.5) rotate(0);opacity:0}
64% {transform:translate(60%,-80%) scale(1.05) rotate(60deg);opacity:1}
76% {transform:translate(560%,-46%) scale(1) rotate(320deg);opacity:1}
84% {transform:translate(770%,190%) scale(.55) rotate(520deg);opacity:0}
100% {transform:translate(0,0) scale(.5);opacity:0}
}
/* گاوصندوق موقع رسیدن سکه تکان میخورد و برق میزند */
.kbn .kb-safe{left:78.852%;top:71.354%;width:8.358%;height:14.583%;
transform-origin:50% 90%;animation:kbnPop 8s cubic-bezier(.34,1.5,.64,1) infinite}
@keyframes kbnPop{
0%,80% {transform:scale(1)}
84% {transform:scale(1.08)}
90%,100%{transform:scale(1)}
}
.kbn .kb-spark{position:absolute;z-index:4;left:83%;top:78.6%;width:10%;aspect-ratio:1;
margin:-5% 0 0 -5%;border-radius:50%;opacity:0;pointer-events:none;
background:radial-gradient(circle,rgba(255,240,170,.95) 0%,rgba(255,214,92,.45) 42%,transparent 70%);
animation:kbnSparkle 8s ease-out infinite}
@keyframes kbnSparkle{
0%,80% {transform:scale(.4);opacity:0}
85% {transform:scale(1);opacity:1}
94%,100%{transform:scale(1.6);opacity:0}
}
/* اگر کاربر «کاهش حرکت» را روشن کرده، بنر دقیقا همان عکس اصلی میشود */
@media (prefers-reduced-motion:reduce){
.kbn *{animation:none!important}
.kbn .kb-egg2,.kbn .kb-coin,.kbn .kb-ring,.kbn .kb-spark,.kbn .kb-cl,.kbn .kb-glint{opacity:0!important}
}
@media(min-width:900px){ .kbn{max-width:100%} }
/* «چقدر مانده» کنار ساعتِ دکمهٔ در حال تولید. ریز و کمرنگ، تا فقط
وقتی چشم دنبالش میگردد دیده شود و شلوغش نکند. */
.acard .eta{margin-inline-start:4px;font-size:10px;font-weight:800;opacity:.8;
border-radius:99px;padding:1px 5px;background:color-mix(in srgb,currentColor 14%,transparent);
white-space:nowrap;flex:none}
/* وقتی زمان باقیمانده هم روی دکمه هست، همه چیز باید در یک خط جا شود */
.acard .btn:has(.eta){font-size:11.5px;gap:4px;padding-inline:8px;white-space:nowrap}
@supports not selector(:has(*)){ .acard .eta{display:none} }
/* پلهٔ قفلِ جایزه: کلیک که میشود، یک لحظه قرمز و لرزان */
.mstep.off[data-locked]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mstep.shake{
animation:kshShake .5s cubic-bezier(.36,.07,.19,.97);
border-color:var(--red)!important;
box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 42%,transparent),
0 8px 18px -12px var(--red)!important;
}
@keyframes kshShake{
10%,90%{transform:translateX(-2px)}
20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-6px)}
40%,60%{transform:translateX(6px)}
100%{transform:none}
}
@media (prefers-reduced-motion:reduce){
.mstep.shake{animation:none}
}
/* ══════════════════ جلوگیری از انتخاب متن ══════════════════
اینجا محیط بازی است، نه متن خواندنی. روی گوشی هر بار که انگشت
کمی روی نوشته کشیده میشود، مرورگر متن را آبی میکند و منوی
Copy / Look Up / Translate میآورد. کاربر دنبال این نبود، فقط
دستش خورد. پس روی کلِ سایت بسته است، نه فقط داشبورد.
ولی همهجا باز میماند که کاربر واقعا باید چیزی را بردارد:
کادرهای ورودی، مبلغها و کد پیگیری و شبا و آدرس کیف پول و لینک
دعوت. اینها با کلاس .selectable یا .mono یا .tnum مشخصاند.
══════════════════════════════════════════════════════════════ */
html{
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:transparent;
}
/* استثناها: هرجا واقعا باید انتخاب یا کپی شود */
input,
textarea,
select,
[contenteditable],
.ipt,
.selectable,
.mono,
.tnum,
.bignum,
.kad-mono,
.kad-pre,
code,
pre,
kbd,
samp{
-webkit-user-select:text;
user-select:text;
-webkit-touch-callout:default;
}
/* ══════════════════════════════════════════════════════════════════
سردرِ بخشها
تابلوی باریکِ هر بخش. کمارتفاع تا فضای صفحه را نخورد، ولی با
لبهٔ برجسته و سایهٔ زیر، حجمدار و بازیگونه دیده شود.
آسمان و تپه و پراپهای ساده با CSS، شخصیتها از brand/art.
══════════════════════════════════════════════════════════════════ */
.vhead{
position:relative;
margin:2px 0 14px;
min-height:70px;
border-radius:18px;
overflow:hidden;
isolation:isolate;
display:flex;
align-items:center;
padding:9px 14px;
border:2px solid var(--vh-ln);
box-shadow:
inset 0 2px 0 rgba(255,255,255,.6),
inset 0 -4px 0 color-mix(in srgb,var(--vh-ln) 22%,transparent),
0 4px 0 0 var(--vh-lip),
0 11px 16px -11px rgba(18,58,24,.6);
}
.vhead .vh-sky{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.vhead .vh-sky::before{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,var(--vh-a) 0%,var(--vh-b) 58%,var(--vh-c) 100%)}
/* حال و هوای آسمان */
.vhead.sky-sun {--vh-a:#8FD8EE;--vh-b:#C8EDF7;--vh-c:#DFF3D2;--vh-sun:#FFD34D;--vh-h:#8FD46A;--vh-h2:#6FBE50;--vh-ln:#3E8F4E;--vh-lip:#2F7A3E}
.vhead.sky-day {--vh-a:#A9E2F5;--vh-b:#D9F1FA;--vh-c:#E6F5DA;--vh-sun:#FFE07A;--vh-h:#9BDB78;--vh-h2:#7CC95E;--vh-ln:#4A97A8;--vh-lip:#38808F}
.vhead.sky-dawn{--vh-a:#FFD9A8;--vh-b:#FFEBCB;--vh-c:#E8F3D6;--vh-sun:#FFB74D;--vh-h:#9BD97A;--vh-h2:#78C25A;--vh-ln:#C98A46;--vh-lip:#AB6F32}
.vhead.sky-dusk{--vh-a:#B8C7E8;--vh-b:#DCE3F4;--vh-c:#E2EFDC;--vh-sun:#F0C36B;--vh-h:#8CCB74;--vh-h2:#6BAF56;--vh-ln:#6E7FA6;--vh-lip:#57678B}
.vhead .vh-sun{position:absolute;width:24px;height:24px;border-radius:50%;
inset-block-start:7px;inset-inline-end:13px;
background:radial-gradient(circle at 38% 34%,#FFF6C8 0%,var(--vh-sun) 62%,var(--vh-sun) 100%);
box-shadow:0 0 0 5px color-mix(in srgb,var(--vh-sun) 26%,transparent)}
.vhead .vh-cl{position:absolute;background:#fff;border-radius:99px;opacity:.66}
.vhead .vh-cl::before,.vhead .vh-cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.vhead .c1{width:30px;height:7px;top:13px;inset-inline-end:31%}
.vhead .c1::before{width:17px;height:13px;left:6px;top:-7px}
.vhead .c1::after{width:12px;height:10px;left:18px;top:-5px}
.vhead .c2{display:none}
.vhead .vh-h2,.vhead .vh-h1{position:absolute;inset-inline:-8%;border-radius:50% 50% 0 0}
.vhead .vh-h2{bottom:0;height:30px;background:var(--vh-h2)}
.vhead .vh-h1{bottom:0;height:19px;background:var(--vh-h)}
/* پراپها */
.vhead .vh-props{position:absolute;inset:0;z-index:1;pointer-events:none}
.vhead .vp{position:absolute;display:grid;place-items:center;line-height:0}
.vhead .vp img,.vhead .vp svg{display:block}
.vhead .vp.a{inset-block-end:4px;inset-inline-end:7%;
animation:vhBob 4s ease-in-out infinite}
.vhead .vp.b{inset-block-end:5px;inset-inline-end:24%;
animation:vhBob 4s ease-in-out infinite;animation-delay:-1.6s}
.vhead .vp.barn{inset-block-end:5px;inset-inline-end:34%}
@keyframes vhBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* غرفهٔ فروشگاه */
.vhead .vp.stall{inset-block-end:7px;inset-inline-end:21%;width:48px;height:31px}
.vhead .vp.stall .roof{position:absolute;top:0;left:0;right:0;height:11px;border-radius:5px 5px 2px 2px;
background:repeating-linear-gradient(90deg,#E0533E 0 7px,#FFF7EA 7px 14px)}
.vhead .vp.stall .board{position:absolute;top:12px;left:3px;right:3px;height:14px;border-radius:3px;
background:#C98A4B;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.vhead .vp.stall .leg{position:absolute;bottom:0;width:4px;height:8px;background:#8B5E3C;border-radius:2px}
.vhead .vp.stall .leg.l{left:5px} .vhead .vp.stall .leg.r{right:5px}
/* جعبهٔ پستی */
.vhead .vp.parcel{inset-block-end:3px;inset-inline-end:9%;
animation:vhBob 4.4s ease-in-out infinite}
.vhead .vp.gift{inset-block-end:9px;inset-inline-end:38%;color:var(--sunD)}
.vhead .vp.cup{inset-block-end:8px;inset-inline-end:22%;color:#D89A15}
.vhead .vp.safe{inset-block-end:8px;inset-inline-end:8%;color:#5C6B7A}
/* حصار */
.vhead .vp.fence{inset-block-end:5px;inset-inline-end:21%;display:flex;gap:7px;align-items:flex-end}
.vhead .vp.fence i{width:5px;height:16px;background:#D8B98C;border-radius:2px 2px 0 0;
box-shadow:inset 0 0 0 1px rgba(139,94,60,.35)}
.vhead .vp.fence::after{content:"";position:absolute;inset-block-end:9px;inset-inline:0;height:3px;
background:#D8B98C;border-radius:2px}
/* تپهٔ سکه */
.vhead .vp.coins{inset-block-end:6px;inset-inline-end:8%;width:40px;height:22px}
.vhead .vp.coins i{position:absolute;width:19px;height:7px;border-radius:99px;
background:linear-gradient(180deg,#FFDE7A,#E8A800);box-shadow:0 1px 0 0 #B87F00}
.vhead .vp.coins i:nth-child(1){bottom:0;left:2px}
.vhead .vp.coins i:nth-child(2){bottom:5px;left:7px}
.vhead .vp.coins i:nth-child(3){bottom:10px;left:4px;width:16px}
/* دکمهٔ بازگشت، گوشهٔ خودِ تابلو
قبلا زیر تابلو تنها میماند و مثل یک دکمهٔ سرگردان دیده میشد. */
.vhead .vh-back{
position:relative;
z-index:3;
flex:0 0 auto;
margin-inline-end:11px;
width:30px;height:30px;
display:grid;place-items:center;
border:0;padding:0;cursor:pointer;
border-radius:50%;
color:#17311B;
background:rgba(255,255,255,.72);
box-shadow:0 1px 3px rgba(20,50,25,.22);
transition:background .15s, transform .1s;
}
.vhead .vh-back:hover{background:rgba(255,255,255,.92)}
.vhead .vh-back:active{transform:scale(.93)}
/* متن روی تابلو */
.vhead .vh-txt{position:relative;z-index:2;text-align:start;max-width:58%;min-width:0}
.vhead .vh-txt h1{font-size:17px;font-weight:900;margin:0;line-height:1.3;color:#17311B;
text-shadow:0 1px 0 rgba(255,255,255,.7)}
.vhead .vh-txt .sub{display:block;font-size:10.5px;line-height:1.55;margin-top:2px;
color:#2F4A32;opacity:.9;text-shadow:0 1px 0 rgba(255,255,255,.55);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* پردهی نرم پشت متن، تا هرچقدر هم پراپها شلوغ باشند نوشته خوانا بماند */
.vhead::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to left,
color-mix(in srgb,var(--vh-b) 86%,transparent) 0%,
color-mix(in srgb,var(--vh-b) 66%,transparent) 42%,
color-mix(in srgb,var(--vh-b) 22%,transparent) 62%,
transparent 76%)}
@media(min-width:560px){
.vhead{min-height:82px;padding:11px 18px;border-radius:20px}
.vhead .vh-txt h1{font-size:20px}
.vhead .vh-txt .sub{font-size:12px}
.vhead .vh-h2{height:36px} .vhead .vh-h1{height:23px}
}
@media (prefers-reduced-motion:reduce){ .vhead .vp{animation:none!important} }
/* در تم تیره، تابلو کمی آرامتر شود تا چشم را نزند */
:root[data-theme="dark"] .vhead,
:root:not([data-theme="light"]) .vhead{filter:saturate(.88) brightness(.9)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .vhead{filter:none} }
/* ══════════════════════════════════════════════════════════════════
انتخاب زبان · Language switch
دو دکمهٔ واقعی کنار هم، نه لینک و نه سلکت. حالت فعال پررنگ است تا
با یک نگاه معلوم باشد الان کدام زبان روشن است.
══════════════════════════════════════════════════════════════════ */
.lang-seg{
display:inline-flex;
gap:2px;
padding:3px;
border-radius:999px;
background:var(--surface3);
box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
flex:0 0 auto;
}
.lang-seg button{
appearance:none;
border:0;
cursor:pointer;
font:inherit;
font-size:11.5px;
font-weight:800;
line-height:1;
padding:7px 12px;
border-radius:999px;
color:var(--soft);
background:transparent;
transition:background .15s, color .15s, box-shadow .15s;
}
.lang-seg button:hover{color:var(--ink)}
.lang-seg button.on{
background:var(--surface);
color:var(--ink);
box-shadow:0 1px 2px rgba(0,0,0,.14), 0 0 0 1px var(--line) inset;
}
.lang-seg button[lang="en"]{letter-spacing:.04em}
/* ── وقتی زبان انگلیسی است ─────────────────────────────────────────
قالب با ویژگیهای منطقی (inline-start / inline-end) نوشته شده، پس
با عوض شدن dir خودش میچرخد. این چند مورد فقط تنظیم ریز است. */
html[lang="en"] body{ letter-spacing:0 }
html[lang="en"] .mono,
html[lang="en"] .tnum{ direction:ltr }
html[lang="en"] .vhead .vh-txt h1{ letter-spacing:-.01em }
html[lang="en"] .vhead .vh-txt .sub{ letter-spacing:0 }
/* در انگلیسی چیدمان چپبهراست است، پس فلشها باید برعکس باشند.
خودِ آیکون یکی است و فقط آینه میشود، تا دو نسخه نگه نداریم. */
.k-flip{transform:scaleX(-1)}
/* ══════════════════════════════════════════════════════════════════
ردیف پایین فوتر: دکمهٔ نصب، تلگرام، نشانها
دکمهها اندازهٔ محتوای خودشاناند، نه کشآمده تا عرض صفحه.
روی موبایل فقط دکمهٔ همان دستگاه میماند و تمامعرض میشود.
══════════════════════════════════════════════════════════════════ */
footer.site .fbar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
footer.site .fget{display:flex;flex-wrap:wrap;gap:10px}
footer.site .fget[hidden]{display:none}
footer.site .fside{display:flex;align-items:center;gap:8px}
footer.site .fbtn{
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px 8px 10px;border-radius:14px;
text-decoration:none;border:0;cursor:pointer;font:inherit;
position:relative;
/* حجم: هایلایت داخلی بالا، لبهٔ برجستهٔ زیر، سایهٔ نرم */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -2px 0 rgba(0,0,0,.35),
0 3px 0 0 var(--fbtn-lip),
0 10px 16px -10px rgba(0,0,0,.7);
transition:transform .13s ease, box-shadow .13s ease;
}
footer.site .fbtn:active{
transform:translateY(3px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -1px 0 rgba(0,0,0,.3),
0 0 0 0 var(--fbtn-lip),
0 4px 8px -7px rgba(0,0,0,.7);
}
footer.site .fbtn .i{
display:grid;place-items:center;width:36px;height:36px;
border-radius:10px;flex:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.18);
}
footer.site .fbtn .t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
footer.site .fbtn small{font-size:10px;font-weight:700;opacity:.62;white-space:nowrap}
footer.site .fbtn b{font-size:14px;font-weight:800;white-space:nowrap}
footer.site .fbtn-and{
--fbtn-lip:#050805;
background:linear-gradient(180deg,#1E2A1D 0%,#12180F 55%,#0B0F0A 100%);
color:#FFFDF7;
}
footer.site .fbtn-and .i{background:linear-gradient(180deg,#5AE89A 0%,#2CBB6C 100%);color:#0E1611}
footer.site .fbtn-ios{
--fbtn-lip:#0D0F12;
background:linear-gradient(180deg,#343A42 0%,#22262C 55%,#181B20 100%);
color:#FFFDF7;
}
footer.site .fbtn-ios .i{background:linear-gradient(180deg,#FFFFFF 0%,#DDDFE3 100%);color:#14181D}
@media (hover:hover){
footer.site .fbtn:hover{
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
inset 0 -2px 0 rgba(0,0,0,.35),
0 5px 0 0 var(--fbtn-lip),
0 16px 22px -12px rgba(0,0,0,.75);
}
}
/* فقط دکمهٔ مربوط به دستگاه کاربر */
footer.site .os-android [data-os="ios"],
footer.site .os-ios [data-os="android"]{display:none}
footer.site .ftgo{
display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
background:linear-gradient(180deg,#46B8EC 0%,#2AA3DC 55%,#1B8CC4 100%);color:#fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -2px 0 rgba(0,0,0,.18),
0 3px 0 0 #146F9D,
0 10px 14px -10px rgba(20,111,157,.9);
transition:transform .13s ease, box-shadow .13s ease;
}
footer.site .ftgo:active{
transform:translateY(3px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 0 #146F9D;
}
@media (hover:hover){footer.site .ftgo:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 0 rgba(0,0,0,.18),
0 5px 0 0 #146F9D, 0 16px 20px -12px rgba(20,111,157,.95)}}
footer.site .ftgo:focus-visible{outline:2px solid var(--grass);outline-offset:3px}
footer.site .fmarks{display:flex;align-items:center;gap:7px}
footer.site .fmarks a{display:inline-flex;line-height:0;border-radius:11px}
/* تصویر با background کشیده میشود، نه ![]()
. روی آیفون نگهداشتن
انگشت روی ![]()
منوی Save to Photos را باز میکرد و تصویر بزرگ
میشد؛ اینطوری چنین منویی اصلا وجود ندارد. */
footer.site .fmk{
display:block;width:44px;height:44px;flex:none;
background-color:#fff;background-repeat:no-repeat;
background-position:center;background-size:34px 34px;
border:1px solid var(--line);border-radius:11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 0 var(--lip);
-webkit-touch-callout:none;
-webkit-user-select:none;user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}
footer.site .fmarks a{pointer-events:auto}
footer.site .fmarks a:focus-visible{outline:2px solid var(--grass);outline-offset:3px}
@media (hover:hover){footer.site .fmarks a:hover .fmk{border-color:var(--grass)}}
/* موبایل: دکمهٔ دستگاه تمامعرض، بقیه زیرش */
@media(max-width:559px){
footer.site .fbar{gap:16px}
footer.site .fget{width:100%}
footer.site .fget .fbtn{flex:1;padding-block:11px}
footer.site .fside{width:100%;justify-content:space-between}
}
/* ══════════════════════════════════════════════════════════════════
صفحهٔ نصب
══════════════════════════════════════════════════════════════════ */
.inst{display:grid;gap:14px;margin-top:6px}
.inst-b{
background:var(--surface);border:1px solid var(--line);
border-radius:20px;padding:18px;
box-shadow:0 2px 0 0 var(--lip);
}
.inst-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.inst-h h2{font-size:16px;font-weight:900;margin:0}
.inst-h p{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.75}
.inst-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none}
.inst-ic.ios{background:linear-gradient(160deg,#3A4048,#1C2026);color:#FFFDF7}
.inst-ic.and{background:linear-gradient(160deg,#3DDC84,#22A85F);color:#0E1611}
.inst-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.inst-steps li{display:flex;gap:12px;align-items:flex-start;
background:var(--surface2);border-radius:15px;padding:13px 14px;position:relative}
.inst-steps .n{
display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;
background:var(--grass);color:#FFFFFF;font-size:13px;font-weight:900;
}
.inst-steps b{display:block;font-size:13.5px;font-weight:800}
.inst-steps p{font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.8}
.inst-steps>li>div{flex:1;min-width:0;padding-inline-end:44px}
.inst-shot{
position:absolute;inset-block-start:12px;inset-inline-end:12px;
display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
background:var(--surface);border:1px solid var(--line);color:var(--grassD);
}
.inst-shot.done{background:var(--grass50);border-color:transparent}
.inst-note{
display:flex;align-items:flex-start;gap:9px;margin-top:14px;
background:var(--sun50);border-radius:13px;padding:11px 13px;
font-size:12px;line-height:1.85;color:var(--ink);
}
.inst-note svg{flex:none;margin-top:3px;color:var(--sunD)}
/* هرچه به دستگاه کاربر میخورد اول و باز، آن یکی جمعتر */
.inst.os-ios .and,
.inst.os-android .ios{opacity:.72}
.inst.os-ios .ios{order:-1}
.inst.os-android .and{order:-1}
.inst.os-ios .and .inst-steps,
.inst.os-android .ios .inst-steps{display:none}
@media(min-width:760px){
.inst{grid-template-columns:1fr 1fr;align-items:start}
.inst-b{padding:20px}
}
/* همان دکمه، این بار در صفحهٔ نصب */
.inst .fbtn{
display:flex;align-items:center;gap:11px;width:100%;
padding:12px 15px;border-radius:15px;
text-decoration:none;border:0;cursor:pointer;font:inherit;
background:#12180F;color:#FFFDF7;
transition:transform .15s ease;
}
.inst .fbtn:active{transform:scale(.975)}
.inst .fbtn .i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
flex:none;background:#3DDC84;color:#0E1611}
.inst .fbtn .t{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.inst .fbtn small{font-size:10.5px;font-weight:700;opacity:.62}
.inst .fbtn b{font-size:15px;font-weight:800}
@media (hover:hover){.inst .fbtn:hover{transform:translateY(-2px)}}
/* ══════════════════════════════════════════════════════════════════
شارژ با ارز دیجیتال
سه مرحله در یک صفحه. هر مرحله شمارهٔ خودش را دارد تا کاربر بداند
کجای کار است و چند قدم مانده.
══════════════════════════════════════════════════════════════════ */
.cxs{display:grid;gap:12px}
.cxs-step{
background:var(--surface);border:1px solid var(--line);border-radius:20px;
padding:16px;box-shadow:0 2px 0 0 var(--lip);
}
/* شمارهٔ مرحله کنارِ عنوان است، نه ستونِ جدا. اینطور بدنهٔ هر
مرحله تمامعرضِ کارت است و هرچه وسطچین شده واقعا وسط میافتد. */
.cxs-n{
display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
background:var(--grass);color:#fff;font-size:12.5px;font-weight:900;
}
.cxs-b{min-width:0}
.cxs-b h2{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:900;margin:0 0 12px}
.cxs-b .hint{font-size:11.5px;color:var(--muted);line-height:1.9;margin-top:8px;text-align:center}
.cxs-b input[type=text]{
width:100%;font-size:22px;font-weight:900;text-align:center;direction:ltr;
font-variant-numeric:tabular-nums;padding:14px 12px;border-radius:15px;
border:1px solid var(--line2);background:var(--surface2);color:var(--ink);
}
.cxs-b input[type=text]:focus{outline:2px solid var(--grass);outline-offset:1px}
.cxs-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;
justify-items:stretch;text-align:center}
.cxs-quick .q{
border:1px solid var(--line2);background:var(--surface2);border-radius:14px;
padding:11px 8px;font:inherit;font-size:14px;font-weight:900;color:var(--ink);cursor:pointer;
font-variant-numeric:tabular-nums;
}
.cxs-quick .q i{display:block;font-style:normal;font-size:10px;font-weight:700;color:var(--muted);margin-top:2px}
.cxs-quick .q:active{transform:scale(.97)}
.cxs-quick .q.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.cxs-coins{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.cxs-coin{display:block;cursor:pointer;min-width:0}
.cxs-coin input{position:absolute;opacity:0;pointer-events:none}
.cxs-coin .in{
display:flex;align-items:center;gap:9px;position:relative;
border:1px solid var(--line2);background:var(--surface2);border-radius:15px;
padding:11px 12px;min-width:0;transition:border-color .14s, box-shadow .14s;
}
.cxs-coin .t{flex:1;min-width:0}
.cxs-coin .t b{display:block;font-size:13px;font-weight:800;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.cxs-coin .t i{display:block;font-style:normal;font-size:10px;color:var(--muted);
direction:ltr;text-align:start}
.cxs-coin .tick{
position:absolute;inset-block-start:-6px;inset-inline-start:-6px;
display:none;place-items:center;width:20px;height:20px;border-radius:50%;
background:var(--ink);color:var(--surface);
}
.cxs-coin input:checked ~ .in{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.cxs-coin input:checked ~ .in .tick{display:grid}
.cxs-coin input:focus-visible ~ .in{outline:2px solid var(--grass);outline-offset:2px}
/* ── مرحلهٔ سوم، صفحهٔ پرداخت ─────────────────────────────────── */
.cxp{display:grid;gap:12px}
.cxp-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.cxp-h b{font-size:16px;font-weight:900}
.cxp-code{font-size:11px;color:var(--muted);margin-inline-start:auto}
.cxp-code i{font-style:normal;font-weight:800;color:var(--ink)}
.cxp-warn{
display:flex;gap:10px;align-items:flex-start;
background:var(--sun50);border:1px solid var(--sun);border-radius:16px;padding:13px 14px;
font-size:12.5px;line-height:1.95;
}
.cxp-warn svg{flex:none;color:var(--sunD);margin-top:2px}
.cxp-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;
overflow:hidden;box-shadow:0 2px 0 0 var(--lip)}
.cxp-row{display:flex;align-items:center;gap:11px;padding:14px;border-block-end:1px solid var(--line)}
.cxp-row .t{flex:1;min-width:0}
.cxp-row .t>span{display:block;font-size:11px;color:var(--muted);margin-block-end:3px}
.cxp-row .t>b{font-size:22px;font-weight:900;direction:ltr;display:inline}
.cxp-row .t>b.addr{font-size:13px;font-weight:700;display:block;word-break:break-all;line-height:1.7}
.cxp-row .t>i{font-style:normal;font-size:12px;font-weight:800;color:var(--muted);margin-inline-start:5px}
.cxp-net{
display:grid;place-items:center;flex:none;font-size:10px;font-weight:900;
background:var(--chip);color:var(--muted);border-radius:9px;padding:7px 9px;
}
.cxp-cp{
display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:13px;
border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;
}
.cxp-cp:active{transform:scale(.94)}
.cxp-cp.done{background:var(--grass);border-color:var(--grass);color:#fff}
.cxp-qr{display:grid;justify-items:center;justify-content:center;gap:6px;
padding:16px 14px;text-align:center}
.cxp-qr #cxQR{border-radius:14px;background:#fff;padding:16px;border:1px solid var(--line);
min-height:44px;line-height:0}
.cxp-qr #cxQR img,.cxp-qr #cxQR canvas{display:block;border-radius:6px}
.cxp-qr #cxQR:empty{display:none}
.cxp-qr span{font-size:12.5px;font-weight:800}
.cxp-qr i{font-style:normal;font-size:11px;color:var(--muted)}
.cxp-wait{
display:flex;align-items:center;gap:9px;
background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px;
}
.cxp-wait .dot{position:static;min-width:0;width:9px;height:9px;padding:0;
border-radius:50%;background:var(--grass);flex:none;inset:auto}
@media (prefers-reduced-motion:no-preference){
.cxp-wait .dot{animation:cxPulse 1.6s ease-in-out infinite}
}
@keyframes cxPulse{0%,100%{opacity:1}50%{opacity:.25}}
.cxp-wait b{flex:1;min-width:0;font-size:13.5px;font-weight:800}
.cxp-wait i{font-style:normal;font-size:15px;font-weight:900;direction:ltr;
font-variant-numeric:tabular-nums;background:var(--chip);border-radius:10px;padding:5px 10px}
.cxp-wait.paid{border-color:var(--grass);background:var(--grass50)}
.cxp-wait.paid .dot{background:var(--grass);animation:none}
.cxp-wait.dead{opacity:.7}
.cxp-wait.dead .dot{background:var(--muted);animation:none}
.cxp-sum{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.cxp-sum b{color:var(--ink);font-weight:900}
.cxp-sum .got{color:var(--grassD)}
.cxp-note{font-size:11.5px;color:var(--muted);line-height:2;margin:0}
/* ── سوالهای پرتکرار ─────────────────────────────────────────── */
.cxf{margin-top:18px;display:grid;gap:8px}
.cxf .t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;margin:0 0 4px}
.cxf .t svg{color:var(--muted)}
.cxf-q{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.cxf-q>summary{
display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
padding:13px 14px;font-size:13px;font-weight:800;
}
.cxf-q>summary::-webkit-details-marker{display:none}
.cxf-q>summary>span{flex:1;min-width:0}
.cxf-q>summary>b{
font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;flex:none;
background:var(--grass50);color:var(--grassD);
}
.cxf-q>summary>i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:var(--surface2);color:var(--muted);flex:none;transition:transform .16s}
.cxf-q[open]>summary>i{transform:rotate(-90deg)}
html[dir="ltr"] .cxf-q[open]>summary>i{transform:rotate(90deg)}
.cxf-q>p{margin:0;padding:0 14px 14px;font-size:12px;line-height:2;color:var(--muted)}
/* ── نرخ تتر با نمودار ────────────────────────────────────────── */
.urate{
display:flex;align-items:center;gap:14px;
background:var(--surface);border:1px solid var(--line);border-radius:18px;
padding:12px 14px;box-shadow:0 2px 0 0 var(--lip);
}
.urate-l{flex:none;min-width:0}
.urate-l .k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--muted)}
.urate-l b{display:block;font-size:20px;font-weight:900;margin-top:3px;line-height:1.1}
.urate-l b i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-inline-start:4px}
.urate-l .src{display:block;font-size:10px;color:var(--faint);margin-top:3px}
.urate-c{flex:1;min-width:0;position:relative;height:38px}
.urate-c svg{width:100%;height:100%;display:block;overflow:visible}
.urate-c .line{stroke:var(--grass);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
vector-effect:non-scaling-stroke}
.urate-c .fill{fill:var(--grass50);stroke:none}
.urate-c .chg{
position:absolute;inset-block-start:-4px;inset-inline-end:0;
font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 7px;
background:var(--grass50);color:var(--grassD);
}
.urate-c .chg.dn{background:var(--red50,#FDECEC);color:var(--red,#C62828)}
.urate.bare .urate-l{flex:1}
/* ══════════════════════════════════════════════════════════════════
دستیارِ آنلاین
══════════════════════════════════════════════════════════════════ */
.kch-fab{
position:fixed;z-index:90;
/* اندازه از پنلِ ادمین میآید؛ اگر نیامد ۵۴ پیکسل */
--fabsz:54px;
inset-block-end:calc(96px + env(safe-area-inset-bottom,0px));
inset-inline-end:16px;
width:var(--fabsz);height:var(--fabsz);
border-radius:50%;border:0;padding:0;cursor:grab;
display:grid;place-items:center;
background:linear-gradient(180deg,var(--grassL) 0%,var(--grass) 55%,var(--grassD) 100%);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 0 var(--grassDD),
0 12px 20px -12px rgba(15,61,25,.9);
touch-action:none;
transition:box-shadow .15s, opacity .6s ease;
}
/* بعد از سه ثانیه بیکاری، کمرنگ میشود تا جلوی چشم نباشد.
با یک لمس یا نزدیک شدنِ موس دوباره پررنگ میشود. */
.kch-fab.idle{opacity:.4}
.kch-fab.idle:hover,.kch-fab.idle:focus-visible,.kch-fab.idle.drag{opacity:1}
@media (prefers-reduced-motion:reduce){.kch-fab{transition:none}}
/* دکمه زیرش یک لبهٔ سه پیکسلی دارد (box-shadow 0 3px 0). یعنی شکلی
که چشم میبیند سه پیکسل بلندتر از جعبهٔ واقعی است و آیکونِ دقیقا
وسط، کمی بالا به نظر میرسد. نصفِ لبه را جبران میکنیم. */
.kch-fab .i{display:grid;place-items:center;line-height:0;transform:translateY(1.5px)}
.kch-fab[data-corner="start"]{inset-inline-end:auto;inset-inline-start:16px}
.kch-fab.drag{cursor:grabbing;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
0 3px 0 0 var(--grassDD), 0 20px 30px -14px rgba(15,61,25,.95)}
/* اسمش عمدا .dot نیست. یک .dot عمومی بالاتر در همین فایل هست که
min-width:17px دارد و روی این میافتاد؛ نتیجهاش دایره نبود، لوزی
بود. حالا کلاسِ جدا دارد و هیچ چیزِ دیگری رویش اثر نمیگذارد. */
.kch-fab .pip{
position:absolute;
inset-block-start:calc(var(--fabsz) * .07);
inset-inline-end:calc(var(--fabsz) * .07);
box-sizing:border-box;
width:11px;min-width:11px;max-width:11px;
height:11px;min-height:11px;max-height:11px;
padding:0;margin:0;flex:none;border-radius:50%;
background:#3DDC84;border:2px solid var(--bg);
aspect-ratio:1/1;
}
@media(min-width:820px){.kch-fab{inset-block-end:24px}}
body.kch-open .kch-fab{opacity:0;pointer-events:none}
.kch{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.kch[hidden]{display:none}
.kch-scrim{position:absolute;inset:0;border:0;padding:0;background:var(--scrim);cursor:pointer}
.kch-panel{
position:relative;width:100%;max-width:520px;
/* قدِ پنجره.
*
* vh روی آیفون دروغ میگوید: عددش برای حالتی است که نوارِ آدرس
* جمع شده، پس ۶۵vh در عمل حدود ۷۷ درصدِ چیزی میشود که کاربر
* میبیند. svh همان «کوچکترین» حالت است و هیچوقت از دیدرس
* بزرگتر نمیشود. --kchH را هم جاوااسکریپت از innerHeight
* حساب میکند که دقیقترین عدد است؛ اگر جاوااسکریپت نبود،
* همان svh میماند. */
height:min(62vh, 620px); /* مرورگرِ قدیمی: همین میماند */
height:var(--kchH, 62svh);
max-height:62svh;
min-height:320px;
display:flex;flex-direction:column;
background:var(--bg);border-radius:22px 22px 0 0;overflow:hidden;
animation:kchUp .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes kchUp{from{transform:translateY(26px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.kch-panel{animation:none}}
@media(min-width:640px){
.kch{align-items:center}
.kch-panel{border-radius:22px;height:min(62vh,640px)}
.kch-panel{height:var(--kchH, 62svh);max-height:min(62svh,640px)}
}
.kch-h{
display:flex;align-items:center;gap:11px;flex:none;
padding:14px 15px;background:var(--surface);border-block-end:1px solid var(--line);
}
.kch-h .av{
display:grid;place-items:center;width:40px;height:40px;border-radius:13px;flex:none;
background:var(--grass50);color:var(--grassD);
}
.kch-h .t{flex:1;min-width:0}
.kch-h .t b{display:block;font-size:14.5px;font-weight:900}
.kch-h .t span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);margin-top:2px}
.kch-h .t .on{width:7px;height:7px;border-radius:50%;background:#3DDC84;flex:none}
.kch-h .x{
display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;
border:0;background:var(--surface2);color:var(--muted);cursor:pointer;
}
.kch-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:14px 15px;display:flex;flex-direction:column;gap:9px;
background:var(--chatbg)}
.kch-m{
max-width:86%;border-radius:16px;padding:11px 13px;
font-size:13.5px;line-height:2;white-space:pre-wrap;word-break:break-word;
-webkit-user-select:text;user-select:text;
}
.kch-m.bot{align-self:flex-start;background:var(--surface);
border:1px solid var(--chatline);border-start-start-radius:5px;
box-shadow:0 1px 2px rgba(60,48,20,.07)}
.kch-m.me{align-self:flex-end;background:var(--grass);color:#fff;border-end-end-radius:5px}
.kch-typing{display:flex;gap:4px;align-items:center;padding:14px 15px}
.kch-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5}
@media (prefers-reduced-motion:no-preference){
.kch-typing i{animation:kchDot 1.1s ease-in-out infinite}
.kch-typing i:nth-child(2){animation-delay:.16s}
.kch-typing i:nth-child(3){animation-delay:.32s}
}
@keyframes kchDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.kch-chips{display:flex;gap:7px;flex-wrap:wrap;padding:10px 15px;flex:none;
background:var(--chatbg);border-block-start:1px solid var(--chatline)}
.kch-chips[hidden]{display:none}
.kch-chips .c{
border:1px solid var(--line2);background:var(--surface);border-radius:999px;
padding:8px 13px;font:inherit;font-size:12px;font-weight:800;color:var(--ink);cursor:pointer;
}
.kch-chips .c:active{transform:scale(.97)}
.kch-f{display:flex;gap:9px;align-items:center;flex:none;
padding:10px 15px;border-block-start:1px solid var(--line);background:var(--surface)}
.kch-f input{
flex:1;min-width:0;
/* شانزده پیکسل، وگرنه سافاری موقع تایپ صفحه را زوم میکند */
font:inherit;font-size:16px;
padding:12px 14px;border-radius:14px;
border:1px solid var(--line2);background:var(--surface2);color:var(--ink);
}
.kch-f input:focus{outline:2px solid var(--grass);outline-offset:1px}
.kch-f button{
display:grid;place-items:center;width:46px;height:46px;flex:none;border:0;border-radius:14px;
background:var(--grass);color:#fff;cursor:pointer;
box-shadow:0 2px 0 0 var(--grassD);
}
.kch-f button:disabled{opacity:.45;cursor:default;box-shadow:none}
.kch-f button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.kch-note{flex:none;margin:0;padding:0 15px calc(12px + env(safe-area-inset-bottom,0px));
font-size:10.5px;line-height:1.9;color:var(--faint);background:var(--surface)}
/* ── جلوگیری از زوم موقعِ تایپ ────────────────────────────────
سافاری روی آیفون هر کادرِ ورودیِ کوچکتر از ۱۶ پیکسل را که لمس
کنی صفحه را زوم میکند و دیگر هم برنمیگرداند. پس همهجا کفِ
اندازه ۱۶ است. روی دسکتاپ کوچکتر میشود چون آنجا این مشکل
وجود ندارد. */
input,textarea,select{font-size:16px}
@media (min-width:820px){
input,textarea,select{font-size:15px}
}
/* ── دو دکمهٔ پایینِ صفحهٔ پرداخت ────────────────────────────────
کنارِ هم، همعرض. زیر ۳۶۰ پیکسل زیرِ هم میروند تا متنشان نشکند. */
.cxp-acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.cxp-acts>*{flex:1 1 140px;min-width:0;display:flex}
.cxp-acts .btn{width:100%}
.cxp-cancel{margin:0}
.cxp-cnote{margin:9px 2px 0;font-size:11px;line-height:1.9;color:var(--faint);text-align:center}
/* ══════════════════════════════════════════════════════════════════
بازار
══════════════════════════════════════════════════════════════════ */
/* ── سوییچِ خرید و فروش ────────────────────────────────────────────
یک قابِ فرورفته با دو نیمه. نیمهٔ فعال یک قرصِ برجسته است، پس
بدونِ خواندنِ متن هم معلوم است کدام روشن است. */
.mk-tabs{
display:flex;gap:5px;margin:12px 0 0;padding:5px;min-width:0;
background:var(--surface2);border:1px solid var(--line);
border-radius:20px;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.3);
}
.mk-tabs .navf{display:contents}
.mk-tab{
flex:1 1 0;min-width:0;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
font:inherit;font-size:14px;font-weight:800;
padding:11px 8px;border:0;border-radius:15px;cursor:pointer;
background:transparent;color:var(--muted);
transition:color .14s, background .14s, box-shadow .14s;
}
.mk-tab svg{flex:none;opacity:.85}
.mk-tab:active:not(.on){background:var(--surface3)}
.mk-tab.on{
background:linear-gradient(180deg,var(--grassL) 0%,var(--grass) 62%,var(--grassD) 100%);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 0 var(--grassDD),
0 6px 12px -8px rgba(15,61,25,.9);
}
.mk-tab.on svg{opacity:1}
/* تبِ فروش وقتی روشن است طلایی میشود، چون کارش پول گرفتن است نه دادن */
.mk-tab.on[data-q="t=sell"]{
background:linear-gradient(180deg,#FFD65C 0%,var(--sun) 62%,#E0A800 100%);
color:#3A2B00;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 0 var(--sunD),
0 6px 12px -8px rgba(120,86,0,.8);
}
/* ── تابلوی بالای تبِ فروش ─────────────────────────────────────── */
.sw-hero{
margin-top:12px;padding:16px 16px 14px;border-radius:24px;min-width:0;
background:linear-gradient(165deg,var(--grass50),var(--surface) 78%);
border:1px solid var(--grass100);
box-shadow:0 2px 0 0 var(--lip);
}
.sw-hero .lbl{display:flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:800;color:var(--grassD)}
.sw-hero .lbl svg{flex:none}
.sw-hero>b{display:block;margin:6px 0 12px;font-size:27px;font-weight:900;
color:var(--ink);line-height:1.2;letter-spacing:-.5px}
.sw-hero>b small{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0}
.sw-hero .split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sw-hero .split>span{display:flex;flex-direction:column;gap:3px;min-width:0;
padding:9px 11px;border-radius:14px;background:var(--surface);
border:1px solid var(--line)}
.sw-hero .split i{display:flex;align-items:center;gap:5px;font-style:normal;
font-size:10.5px;font-weight:700;color:var(--muted)}
.sw-hero .split i svg{flex:none;color:var(--grass)}
.sw-hero .split b{font-size:14.5px;font-weight:900;color:var(--ink)}
/* ── تیترها ────────────────────────────────────────────────────── */
.sw-h{display:flex;align-items:center;gap:7px;margin:20px 0 8px}
.sw-h .n{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
border-radius:99px;background:var(--surface3);color:var(--muted);
font-size:10.5px;font-weight:800}
.sw-lead{margin:0 3px 9px;font-size:11.5px;line-height:1.9;color:var(--muted)}
/* ── ردیفهای محصول ────────────────────────────────────────────── */
.sw-list{background:var(--surface);border:1px solid var(--line);border-radius:22px;
box-shadow:0 2px 0 0 var(--lip);overflow:hidden;min-width:0}
.sw-row{display:flex;align-items:center;gap:11px;padding:11px 13px;min-width:0;
border-block-end:1px solid var(--line)}
.sw-row:last-child{border-block-end:0}
.sw-row .r-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;
border-radius:15px;background:linear-gradient(180deg,#BFE9FF,var(--grass100))}
.sw-row .r-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sw-row .r-tx b{font-size:13.5px;font-weight:800;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* نامِ بستهٔ خوراک بلند است؛ بریدنش با سهنقطه یعنی کاربر نمیفهمد
چند وعده است. اینجا اجازهٔ دو خط میدهیم. */
.mk-feed .sw-row .r-tx b{white-space:normal;overflow:visible;line-height:1.6}
.sw-row .r-tx i{font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.8;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-row .r-tx i em{font-style:normal;opacity:.5;margin:0 3px}
.sw-row .r-gt{display:flex;align-items:center;gap:9px;flex:none}
.sw-row .r-gt>b{font-size:14.5px;font-weight:900;color:var(--grassD);white-space:nowrap}
/* دکمهٔ کوچکِ کنارِ هر ردیف */
.sw-go{
flex:none;font:inherit;font-size:12px;font-weight:800;
padding:8px 14px;border:0;border-radius:99px;cursor:pointer;
background:var(--grass);color:#fff;box-shadow:0 3px 0 0 var(--grassD);
}
.sw-go:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.sw-go:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.sw-all{margin-top:10px;padding:15px}
.sw-all .d{opacity:.55;margin:0 4px}
.sw-note{margin:9px 4px 0;font-size:11px;line-height:2;color:var(--faint);text-align:center}
.sw-link{font:inherit;font-size:11px;font-weight:800;color:var(--grassD);
background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
/* ── کارتِ دام ──────────────────────────────────────────────────
افقی و کوتاه. تصویر و اسم بالا، نرخ و دکمه در یک نوارِ جدا زیرش،
چون همان نوار چیزی است که کاربر برای مقایسه دنبالش میگردد. */
.sw-ans{display:grid;gap:10px;min-width:0}
@media(min-width:700px){.sw-ans{grid-template-columns:1fr 1fr}}
.sw-an{
position:relative;min-width:0;padding:12px 13px;
display:grid;grid-template-columns:52px minmax(0,1fr);
grid-template-areas:"pic hd" "bid bid";
gap:9px 11px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:22px;
box-shadow:0 2px 0 0 var(--lip);
}
.sw-an.off{background:var(--surface2)}
.sw-an .a-pic{grid-area:pic;display:grid;place-items:center;
width:52px;height:52px;border-radius:17px;flex:none;overflow:hidden;
background:linear-gradient(180deg,#BFE9FF,var(--grass100))}
.sw-an .a-pic img,.sw-an .a-pic svg{max-width:100%;height:auto;display:block}
.sw-an.off .a-pic{filter:grayscale(.55);opacity:.75}
.sw-an .a-hd{grid-area:hd;display:flex;align-items:center;gap:8px;min-width:0}
.sw-an .a-hd b{font-size:14.5px;font-weight:900;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-an .hp{display:inline-flex;align-items:center;gap:3px;flex:none;
padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:800;
background:var(--grass50);color:var(--grassD)}
.sw-an .hp svg{flex:none}
.sw-an .hp.mid{background:var(--sun50);color:var(--sunD)}
.sw-an .hp.low{background:var(--red50);color:var(--red)}
.sw-an .a-pend{grid-area:bid;display:flex;align-items:flex-start;gap:6px;
margin-block-end:-3px;padding:8px 10px;border-radius:13px;
background:var(--sun50);border:1px solid var(--sun100);
font-size:10.5px;line-height:1.8;font-weight:700;color:var(--sunD)}
.sw-an .a-pend svg{flex:none;margin-top:2px}
.sw-an .a-pend+.a-bid,.sw-an .a-pend+.a-why{grid-area:auto}
/* نوارِ نرخ: عدد بزرگ سمتی، دکمه سمتِ دیگر */
.sw-an .a-bid{
grid-area:bid;display:flex;align-items:center;gap:10px;min-width:0;
padding:10px 11px;border-radius:16px;
background:linear-gradient(180deg,var(--sun50),var(--surface));
border:1px solid var(--sun100);
}
.sw-an .a-bid .k{display:flex;flex-direction:column;gap:1px;flex:none;
font-size:10px;font-weight:800;color:var(--sunD);line-height:1.4}
.sw-an .a-bid .k i{font-style:normal;font-size:9px;font-weight:600;opacity:.75}
.sw-an .a-bid>b{flex:1 1 auto;min-width:0;text-align:center;
font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-an .a-bid>b small{font-size:10px;font-weight:700;color:var(--muted);margin-inline-start:3px}
.sw-sell{
flex:none;display:inline-flex;align-items:center;gap:5px;
font:inherit;font-size:12.5px;font-weight:900;
padding:9px 15px;border:0;border-radius:99px;cursor:pointer;
background:linear-gradient(180deg,#FFD65C,var(--sun));color:#3A2B00;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 0 var(--sunD);
}
.sw-sell svg{flex:none}
.sw-sell:active{transform:translateY(3px);box-shadow:none}
.sw-an .a-why{grid-area:bid;display:flex;align-items:flex-start;gap:7px;
padding:9px 11px;border-radius:14px;background:var(--surface3);
font-size:10.5px;line-height:1.9;color:var(--muted)}
.sw-an .a-why svg{flex:none;margin-top:3px}
/* روی عرضِ خیلی کم، عدد و دکمه زیرِ هم بروند تا متن نشکند */
/* روی عرضِ کم چیدمان عوض میشود، نه اینکه قیمت با سهنقطه بریده
شود. برچسب میرود بالا مثل یک عنوانِ ریز، و عدد و دکمه زیرش در
یک خط مینشینند:
بازخرید همین حالا
۲,۶۵۳,۱۰۰ ت [ بفروش ] */
@media(max-width:412px){
.sw-an .a-bid{flex-wrap:wrap;row-gap:6px}
.sw-an .a-bid .k{order:-2;flex:1 1 100%;flex-direction:row;gap:4px;align-items:baseline}
.sw-an .a-bid .k i{font-size:9.5px}
.sw-an .a-bid>b{order:-1;flex:1 1 auto;text-align:start;font-size:19px}
.sw-sell{flex:none;order:0}
}
/* ── قاب خالی ──────────────────────────────────────────────────── */
.sw-empty{display:flex;flex-direction:column;align-items:center;gap:4px;
padding:26px 18px;text-align:center;
background:var(--surface);border:1px dashed var(--line2);border-radius:22px}
.sw-empty svg{color:var(--line2)}
.sw-empty b{font-size:14px;font-weight:800;margin-top:5px}
.sw-empty i{font-style:normal;font-size:11.5px;line-height:1.9;color:var(--muted);max-width:32ch}
/* ── کارتِ دام در تبِ خرید ────────────────────────────────────────
همان اسکلتِ کارتِ فروش، تا دو تب یک خانواده به نظر برسند؛ فقط
نوارِ نرخ اینجا سبز است نه طلایی، چون کاربر دارد پول میدهد. */
.mk-ans{display:grid;gap:10px;min-width:0}
@media(min-width:700px){.mk-ans{grid-template-columns:1fr 1fr}}
.mk-an{
min-width:0;padding:12px 13px;
display:grid;grid-template-columns:56px minmax(0,1fr);
grid-template-areas:"pic hd" "roi roi" "facts facts" "bid bid" "stk stk";
gap:9px 11px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:22px;
box-shadow:0 2px 0 0 var(--lip);
}
.mk-an.out{background:var(--surface2)}
.mk-an .a-pic{grid-area:pic;display:grid;place-items:center;
width:56px;height:56px;border-radius:18px;flex:none;overflow:hidden;
background:linear-gradient(180deg,#BFE9FF,var(--grass100))}
.mk-an .a-pic img,.mk-an .a-pic svg{max-width:100%;height:auto;display:block}
.mk-an.out .a-pic{filter:grayscale(.6);opacity:.7}
.mk-an .a-hd{grid-area:hd;display:flex;align-items:center;gap:8px;min-width:0}
.mk-an .a-hd b{font-size:15px;font-weight:900;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* بازگشت سرمایه: یک نوارِ کاملِ خودش. */
.mk-an .a-roi{grid-area:roi;display:flex;align-items:center;gap:7px;min-width:0;
padding:8px 11px;border-radius:14px;
background:var(--grass50);border:1px solid var(--grass100);
font-size:11.5px;font-weight:800;color:var(--grassD);line-height:1.6}
.mk-an .a-roi svg{flex:none}
.mk-an .a-roi b{font-weight:900;font-size:13px}
/* دو حقیقتِ کوتاه، کنارِ هم؛ نه دو خطِ متنِ رها */
.mk-an .a-facts{grid-area:facts;display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:0}
.mk-an .a-facts>span{display:flex;flex-direction:column;gap:2px;min-width:0;
padding:8px 10px;border-radius:13px;background:var(--surface2);
border:1px solid var(--line)}
.mk-an .a-facts i{display:flex;align-items:center;gap:5px;font-style:normal;
font-size:10px;font-weight:700;color:var(--muted)}
.mk-an .a-facts i svg{flex:none;color:var(--grass)}
.mk-an .a-facts b{font-size:11.5px;font-weight:800;color:var(--ink);line-height:1.6;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-an .a-bid{
grid-area:bid;display:flex;align-items:center;gap:10px;min-width:0;
padding:10px 11px;border-radius:16px;
background:linear-gradient(180deg,var(--grass50),var(--surface));
border:1px solid var(--grass100);
}
.mk-an .a-bid .k{display:flex;flex-direction:column;gap:1px;flex:none;
font-size:10px;font-weight:800;color:var(--grassD);line-height:1.4}
.mk-an .a-bid .k i{font-style:normal;font-size:9px;font-weight:600;opacity:.75}
.mk-an .a-bid>b{flex:1 1 auto;min-width:0;text-align:center;
font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-an .a-bid>b small{font-size:10px;font-weight:700;color:var(--muted);margin-inline-start:3px}
.mk-buy{
flex:none;display:inline-flex;align-items:center;gap:5px;
font:inherit;font-size:12.5px;font-weight:900;
padding:9px 15px;border:0;border-radius:99px;cursor:pointer;
background:linear-gradient(180deg,var(--grassL),var(--grass));color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 0 var(--grassD);
}
.mk-buy svg{flex:none}
.mk-buy:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.mk-buy.weak,.mk-buy:disabled{background:var(--surface3);color:var(--muted);
box-shadow:none;cursor:not-allowed}
.mk-an .a-soldout{flex:none;display:inline-flex;align-items:center;gap:5px;
padding:8px 13px;border-radius:99px;background:var(--surface3);
color:var(--muted);font-size:11.5px;font-weight:800}
.mk-an .a-soldout svg{flex:none}
.mk-an .a-stk{grid-area:stk;display:flex;align-items:center;gap:5px;margin:0;
font-size:10.5px;font-weight:600;color:var(--faint)}
.mk-an .a-stk svg{flex:none;color:var(--grass);opacity:.8}
.mk-an .a-stk b{font-weight:800;color:var(--soft)}
@media(max-width:412px){
.mk-an .a-bid{flex-wrap:wrap;row-gap:6px}
.mk-an .a-bid .k{order:-2;flex:1 1 100%;flex-direction:row;gap:4px;align-items:baseline}
.mk-an .a-bid .k i{font-size:9.5px}
.mk-an .a-bid>b{order:-1;flex:1 1 auto;text-align:start;font-size:19px}
.mk-buy,.mk-an .a-soldout{flex:none;order:0}
}
@media(max-width:359px){.mk-an .a-facts{grid-template-columns:1fr}}
/* خوراک: همان ردیفهای محصول، فقط نارنجی */
.sw-row .r-ic.feed{background:linear-gradient(180deg,#FFE2C2,var(--farm50))}
.sw-go.orange{background:var(--farm);box-shadow:0 3px 0 0 var(--farmD)}
.sw-go.weak,.sw-go:disabled{background:var(--surface3);color:var(--muted);
box-shadow:none;cursor:not-allowed}
.mk-feed .sw-row .r-gt>b{color:var(--ink)}
/* ══════════════════════════════════════════════════════════════════
گردونهٔ شانس
══════════════════════════════════════════════════════════════════ */
/* ── زبانهٔ کنارِ صفحه ─────────────────────────────────────────────
عمدا دایره نیست. حبابِ گردِ گوشه را همه دارند و دستیارِ آنلاین هم
همان شکل است؛ دو دایرهٔ شناور کنارِ هم فقط قاطی میشوند. این یک
زبانه است که به لبهٔ صفحه چسبیده، با متنِ عمودی. */
.lw-tab{
position:fixed;z-index:88;
inset-block-start:var(--lw-top,42%);
inset-inline-start:0;
transform:translateY(-50%);
display:flex;flex-direction:column;align-items:center;gap:9px;
padding:15px 9px 16px;border:0;cursor:pointer;
border-start-end-radius:20px;border-end-end-radius:20px;
border-start-start-radius:0;border-end-start-radius:0;
background:linear-gradient(180deg,#E8FF6B 0%,#CBF03A 55%,#A8CC1E 100%);
color:#20300A;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 3px 0 0 0 rgba(120,150,10,.55),
0 10px 22px -10px rgba(60,90,0,.75);
transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
}
.lw-tab[data-side="end"]{
inset-inline-start:auto;inset-inline-end:0;
border-start-end-radius:0;border-end-end-radius:0;
border-start-start-radius:20px;border-end-start-radius:20px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), -3px 0 0 0 rgba(120,150,10,.55),
0 10px 22px -10px rgba(60,90,0,.75);
}
.lw-tab .tx{
/* متنِ عمودی. mixed یعنی حروفِ فارسی سرِ پا میمانند و کج نمیشوند. */
writing-mode:vertical-rl;text-orientation:mixed;
font-size:12px;font-weight:900;letter-spacing:.06em;line-height:1;
}
.lw-tab .ic{display:grid;place-items:center;flex:none}
.lw-tab .pip{
position:absolute;inset-block-start:7px;inset-inline-end:7px;
box-sizing:border-box;width:10px;min-width:10px;max-width:10px;
height:10px;min-height:10px;max-height:10px;padding:0;margin:0;
border-radius:50%;background:#E5322D;border:2px solid #EEFFB0;
}
.lw-tab .pip.off{display:none}
.lw-tab:active{transform:translateY(-50%) scale(.96)}
@media (prefers-reduced-motion:no-preference){
.lw-tab.ready .ic{animation:lwNudge 2.6s ease-in-out infinite}
}
@keyframes lwNudge{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(-22deg)}88%{transform:rotate(14deg)}}
body.kch-open .lw-tab{opacity:0;pointer-events:none}
/* ── قابِ گردونه ──────────────────────────────────────────────── */
.lw{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:14px}
.lw[hidden]{display:none}
.lw-scrim{position:absolute;inset:0;border:0;padding:0;cursor:pointer;
background:radial-gradient(120% 80% at 50% 38%, rgba(24,52,12,.80), rgba(4,8,3,.96))}
.lw-box{
position:relative;width:100%;max-width:420px;
padding:16px 16px 18px;border-radius:30px;
background:
radial-gradient(90% 55% at 50% 0%, rgba(203,240,58,.16), transparent 70%),
linear-gradient(180deg, var(--surface) 0%, var(--bg) 60%);
border:1px solid var(--line);
box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 28px 70px -26px rgba(0,0,0,.8);
animation:lwUp .26s cubic-bezier(.2,.9,.3,1);
}
/* ستارههای ریزِ پسزمینه، تا حسِ شب و جشن بدهد */
.lw-box::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background-image:
radial-gradient(1.6px 1.6px at 18% 12%, rgba(255,255,255,.55), transparent),
radial-gradient(1.4px 1.4px at 74% 9%, rgba(255,255,255,.40), transparent),
radial-gradient(1.8px 1.8px at 88% 30%, rgba(255,199,44,.55), transparent),
radial-gradient(1.3px 1.3px at 8% 34%, rgba(255,199,44,.40), transparent);
}
@keyframes lwUp{from{transform:translateY(26px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lw-box{animation:none}}
.lw-x{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:2;
display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:11px;
background:var(--surface2);color:var(--muted);cursor:pointer}
.lw-hd{text-align:center;margin-block-end:6px}
.lw-hd b{display:block;font-size:18px;font-weight:900}
.lw-hd i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}
.lw-stage{position:relative;display:grid;place-items:center;padding:8px 0 2px}
.lw-glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle, rgba(203,240,58,.30), transparent 68%);
filter:blur(12px);pointer-events:none}
.lw-wrap{position:relative;width:min(76vw,300px);aspect-ratio:1;
display:grid;place-items:center;
border-radius:50%;padding:11px;
background:
conic-gradient(from 210deg, #FFF3C4, #E0A800 18%, #FFE9A8 34%, #B8860B 52%,
#FFF3C4 70%, #E0A800 86%, #FFF3C4 100%);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.45),
inset 0 -4px 8px rgba(120,86,0,.55),
0 5px 0 0 #8A6500,
0 22px 40px -16px rgba(60,45,0,.85);
}
/* حلقهٔ داخلیِ تیره، تا گردونه از قاب جدا شود */
.lw-wrap::after{
content:"";position:absolute;inset:8px;border-radius:50%;pointer-events:none;
box-shadow:inset 0 0 0 2px rgba(80,55,0,.5), inset 0 3px 9px rgba(0,0,0,.35);
}
/* بیکار که باشد، آرام نفس میکشد.
فقط خودِ صفحهٔ گردونه، نه کلِ قاب: دکمهٔ وسط داخلِ همین قاب است
و اگر قاب تکان بخورد، دکمه زیرِ انگشتِ کاربر میلرزد. */
@media (prefers-reduced-motion:no-preference){
.lw-svg{animation:lwBreathe 3.6s ease-in-out infinite}
.lw.spin .lw-svg{animation:none}
}
@keyframes lwBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.lw-svg{width:100%;height:100%;display:block;border-radius:50%;
filter:drop-shadow(0 2px 5px rgba(0,0,0,.30));overflow:visible}
.lw-bulbs circle{fill:#FFF6C8;stroke:rgba(150,110,0,.55);stroke-width:.8}
@media (prefers-reduced-motion:no-preference){
.lw-bulbs circle{animation:lwBulb 1.1s ease-in-out infinite;animation-delay:var(--d,0s)}
.lw.spin .lw-bulbs circle{animation-duration:.42s}
}
@keyframes lwBulb{
0%,100%{fill:#8A7A45;filter:none}
50%{fill:#FFF6C8;filter:drop-shadow(0 0 3px rgba(255,220,120,.95))}
}
#lwSpin{transform-origin:100px 100px}
.lw-lbl{font-family:inherit;font-size:7.6px;font-weight:800;fill:#fff;
paint-order:stroke;stroke:rgba(0,0,0,.28);stroke-width:1.6px;stroke-linejoin:round}
/* سوزنِ بالا */
.lw-pin{position:absolute;inset-block-start:-9px;inset-inline-start:50%;z-index:3;
width:30px;height:38px;pointer-events:none;transform:translateX(-50%);
transform-origin:50% 12%;
background:linear-gradient(180deg,#FF6B57 0%,#E5322D 45%,#A81812 100%);
clip-path:polygon(50% 100%, 0% 34%, 12% 12%, 50% 0%, 88% 12%, 100% 34%);
filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));
}
/* گویِ براقِ روی سوزن */
.lw-pin::after{content:"";position:absolute;inset-block-start:7px;inset-inline-start:50%;
transform:translateX(-50%);width:9px;height:9px;border-radius:50%;
background:radial-gradient(circle at 34% 30%, #fff, #FFD9D4 55%, #E58A80)}
/* موقعِ چرخش با هر قاچ ضربه میخورد */
@media (prefers-reduced-motion:no-preference){
.lw.spin .lw-pin{animation:lwFlick .10s linear infinite}
}
@keyframes lwFlick{0%{transform:translateX(-50%) rotate(0)}
45%{transform:translateX(-50%) rotate(13deg)}
100%{transform:translateX(-50%) rotate(0)}}
/* دکمهٔ وسط */
.lw-hub{
position:absolute;z-index:2;display:grid;place-items:center;
width:31%;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
background:
radial-gradient(circle at 36% 28%, rgba(255,255,255,.55), transparent 46%),
linear-gradient(180deg,var(--grassL) 0%,var(--grass) 58%,var(--grassD) 100%);
color:#fff;font:inherit;font-size:13.5px;font-weight:900;
box-shadow:
0 0 0 4px rgba(255,243,196,.9), 0 0 0 6px #B8860B,
inset 0 2px 0 rgba(255,255,255,.45),
0 5px 0 0 var(--grassDD), 0 12px 22px -8px rgba(15,61,25,.95);
}
@media (prefers-reduced-motion:no-preference){
.lw-hub:not(:disabled){animation:lwPulse 1.9s ease-in-out infinite}
.lw.spin .lw-hub{animation:none}
}
@keyframes lwPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,243,196,.9), 0 0 0 6px #B8860B,
inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 0 var(--grassDD), 0 12px 22px -8px rgba(15,61,25,.95)}
50%{box-shadow:0 0 0 4px rgba(255,243,196,.9), 0 0 0 6px #B8860B,
inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 0 var(--grassDD),
0 12px 22px -8px rgba(15,61,25,.95), 0 0 26px 6px rgba(203,240,58,.45)}}
.lw-hub:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.lw-hub:disabled{background:linear-gradient(180deg,#9AA394,#79806F);
box-shadow:0 4px 0 0 #565C4E;cursor:not-allowed}
.lw-hub .t{pointer-events:none}
.lw-note{margin:12px 4px 0;text-align:center;font-size:12px;line-height:1.9;color:var(--muted)}
/* نوارِ جکپات. یک خطِ براق با نورِ رونده روی خودش. */
.lw-jack{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
margin-top:14px;padding:11px 14px;border-radius:16px;overflow:hidden;
background:linear-gradient(100deg,#2A1A00,#4A2E00 45%,#2A1A00);
border:1px solid rgba(255,199,44,.45);
box-shadow:inset 0 1px 0 rgba(255,220,140,.28)}
.lw-jack .k{display:inline-flex;align-items:center;gap:6px;flex:none;
font-size:11px;font-weight:800;color:#FFD65C}
.lw-jack .k svg{flex:none}
.lw-jack b{font-size:17px;font-weight:900;color:#FFF3C4;letter-spacing:-.3px;
text-shadow:0 0 14px rgba(255,199,44,.55)}
.lw-jack b i{font-style:normal;font-size:10px;font-weight:700;color:#C9A44C;margin-inline-start:4px}
.lw-jack .s{position:absolute;inset-block:0;inset-inline-start:-40%;width:40%;
background:linear-gradient(100deg,transparent,rgba(255,240,190,.22),transparent);
pointer-events:none}
@media (prefers-reduced-motion:no-preference){
.lw-jack .s{animation:lwSheen 3.2s linear infinite}
}
@keyframes lwSheen{to{inset-inline-start:120%}}
/* ── کارتِ برد ───────────────────────────────────────────────── */
.lw-win{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px}
.lw-win[hidden]{display:none}
.lw-card{position:relative;width:100%;max-width:320px;text-align:center;
padding:26px 20px 20px;border-radius:26px;
background:var(--surface);border:1px solid var(--line);
box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
animation:lwPop .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes lwPop{from{transform:scale(.72);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lw-card{animation:none}}
.lw-burst{position:absolute;inset:-20%;border-radius:50%;pointer-events:none;
background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,199,44,.30) 8deg 12deg,
transparent 12deg 30deg,rgba(46,160,67,.26) 30deg 34deg,transparent 34deg 60deg);
animation:lwRay 7s linear infinite}
@keyframes lwRay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lw-burst{animation:none}}
.lw-art{position:relative;display:block;font-size:52px;line-height:1}
.lw-card b{position:relative;display:block;font-size:20px;font-weight:900;margin-top:8px}
.lw-card p{position:relative;margin:7px 0 16px;font-size:12.5px;line-height:2;color:var(--muted)}
.lw-conf{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
/* لرزشِ کوتاهِ کلِ قاب وقتی جایزهٔ بزرگ میآید */
@media (prefers-reduced-motion:no-preference){
.lw.hit .lw-box{animation:lwShake .5s cubic-bezier(.36,.07,.19,.97)}
}
@keyframes lwShake{
0%,100%{transform:translate3d(0,0,0)}
12%{transform:translate3d(-7px,2px,0) rotate(-.7deg)}
26%{transform:translate3d(6px,-3px,0) rotate(.6deg)}
42%{transform:translate3d(-5px,3px,0) rotate(-.5deg)}
58%{transform:translate3d(4px,-2px,0) rotate(.4deg)}
76%{transform:translate3d(-2px,1px,0) rotate(-.2deg)}
}
/* نورِ چرخانِ پشتِ گردونه موقعِ چرخش */
.lw-glow{transition:opacity .4s, transform .4s}
.lw.spin .lw-glow{opacity:1;transform:scale(1.25)}
@media (prefers-reduced-motion:no-preference){
.lw.spin .lw-glow{animation:lwGlow 1.1s ease-in-out infinite}
}
@keyframes lwGlow{0%,100%{opacity:.65}50%{opacity:1}}