:root{ --lilac:#055f69;--lilac2:#ffaba8;--pink:#cc8542;--hotpink:#E8834A; --red:#FFD700;--burg:#5C2A12;--rose:#FFCBA3;--yellow:#FFC94A; --sky:#FF9459;--sky2:#1ab348;--cream:#E8834A;--ink:#F5EDFF;--muted:#C4A896; --white:#e61f82; } *{box-sizing:border-box} body{margin:0;color:var(--ink);font-family:Vazirmatn,sans-serif;display:flex;flex-direction:column; background: radial-gradient(circle at 10% 15%,#f8df5020 0 6%,transparent 22%), radial-gradient(circle at 85% 20%,#ce510d3d 0 10%,transparent 30%), radial-gradient(circle at 60% 92%,#5c2a1266 0 12%,transparent 35%), linear-gradient(160deg,#e9a526 7%,#592D11 30%,#93b178 65%,#773110 111%); min-height:100vh;overflow-x:hidden} .noise{position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")} .blob{position:fixed;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:0} .blob-red{width:250px;height:250px;;top:22%;right:-100px} .blob-orange{width:220px;height:220px;;bottom:5%;left:-80px} .blob-sky{width:180px;height:180px;top:55%;left:45%} .top{height:82px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #ffd7002a;background:rgba(89,45,17,.88);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);position:relative;z-index:4} .brand{display:flex;align-items:center;gap:11px} .brand-symbol{width:58px;height:58px;object-fit:contain;border-radius:12px;display:block;filter:drop-shadow(0 8px 18px #ffd70025)} .brand b,.brand small{display:block} .brand small{font-size:9px;color:var(--yellow)} .top-pill{font-size:10px;color:var(--yellow);border:1px solid #15aa4740;padding:7px 12px;border-radius:99px} main{width:min(1160px,90%);margin:auto;position:relative;z-index:1;flex:1} .hero{min-height:690px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .eyebrow{font:800 10px Vazirmatn;letter-spacing:.13em;color:var(--yellow)} h1,h2,h3{font-family:Estedad,Vazirmatn,Tahoma,sans-serif;margin:12px 0} h1{font-size:clamp(48px,7vw,86px);line-height:1.18;letter-spacing:-.055em} h1 strong{background:linear-gradient(100deg,#FFD700 0%,#FFEBA0 20%,#D4AF37 40%,#FFCBA3 60%,#FFD700 80%,#FFEBA0 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px #ffd70055);animation:shine 6s linear infinite} .hero-copy p,.section-title p,.visual-copy p{max-width:650px;color:var(--muted);font-size:16px} .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} button{font-family:Vazirmatn,Tahoma,sans-serif;cursor:pointer} .primary{border:1px solid #d4b60d4d;border-radius:16px;padding:14px 21px;background:linear-gradient(100deg,#7A3210 0%,#E8834A 30%,#FFCBA3 50%,#D4AF37 75%,#E8834A 100%);background-size:250% auto;color:#fff;box-shadow:0 16px 40px #ffd70033,0 10px 30px #ff945940;transition:transform .25s ease,box-shadow .25s ease,background-position .6s ease;animation:shine 7s linear infinite} .primary:hover{transform:translateY(-3px);box-shadow:0 22px 55px #ffd70050,0 14px 40px #ff945955;background-position:right center} .primary span{margin-right:10px} .secondary{border:2px solid var(--yellow);border-radius:16px;padding:12px 19px;background:#2b160a8a;color:var(--yellow);transition:transform .25s ease,box-shadow .25s ease,background .25s ease} .secondary:hover{transform:translateY(-3px);background:#5c2a12b0;box-shadow:0 14px 35px #ffd70030} .hero-art{height:520px;position:relative;display:grid;place-items:center} .sun{position:absolute;width:330px;height:330px;border-radius:50%;background:#2b160a;box-shadow:0 0 0 40px #ff945926,0 0 130px #ffd7004d;animation:breathe 4.5s ease-in-out infinite} .arc{position:absolute;border:2px solid var(--yellow);border-radius:50%} .arc-a{width:410px;height:270px;transform:rotate(-25deg)} .arc-b{width:300px;height:460px;transform:rotate(34deg);border-color:#ff945999} .arc-c{width:470px;height:420px;transform:rotate(65deg);border-color:#d4af3799} .hero-core{width:190px;height:190px;border-radius:50%;background:linear-gradient(145deg,var(--burg),var(--hotpink) 60%,var(--rose));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 35px 100px #ff94594d,0 0 70px #ffd70033,0 0 0 1px #ffd70033 inset;position:relative;z-index:2} .hero-core:before{content:"";position:absolute;inset:-22px;border-radius:50%;background:conic-gradient(from 0deg,#ffd70000,#ffd700aa,#ff945900 35%,#ffcba3aa 55%,#ffd70000 70%,#ffd700aa 100%);filter:blur(3px);z-index:-1;animation:spin 9s linear infinite} .hero-core span{font-size:12px;color:#ffc94a} .hero-core strong{font:800 42px Estedad,Vazirmatn,Tahoma,sans-serif} .hero-core i{font-style:normal;color:var(--yellow);font-size:24px;text-shadow:0 0 14px #ffd700} .mini-card{position:absolute;z-index:3;background:#0d0416ea;border:2px solid #ffd7002e;border-radius:17px;padding:10px 14px;box-shadow:0 18px 45px #000a,0 0 30px #ff945930;display:flex;gap:8px;align-items:center;transition:transform .3s ease} .mini-card:hover{transform:translateY(-4px) scale(1.03)} .mini-card b{font:800 19px Estedad,Vazirmatn,Tahoma,sans-serif;color:var(--yellow)} .mini-card small{font-size:9px;color:var(--muted)} .c1{top:17%;right:4%} .c2{bottom:18%;right:10%;background:linear-gradient(135deg,#7A3210,#E8834A);color:#fff} .c2 small{color:#ffe0c4} .c3{top:31%;left:0;background:var(--yellow);color:#5C2A12} .c3 small{color:#7A3210} .marquee{margin:0 -5vw;padding:15px 5vw;background:var(--burg);color:var(--lilac2);display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font:700 12px Vazirmatn;letter-spacing:.08em} .section{padding:100px 0} .section-title{margin-bottom:30px} .section-title h2,.visual-copy h2{font-size:45px} .color-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .color-card{min-height:180px;border-radius:25px;padding:22px;display:flex;flex-direction:column;justify-content:end;box-shadow:0 20px 60px #0008;border:2px solid #ffd7001f;transition:transform .3s ease,box-shadow .3s ease} .color-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 28px 75px #ffd7002e,0 20px 60px #000a} .color-card b{font-size:10px;letter-spacing:.13em} .color-card strong{font:800 22px Estedad,Vazirmatn,Tahoma,sans-serif;margin-top:5px} .color-card small{font-size:11px;opacity:.8} .red{background:var(--red);color:#5C2A12} .burg{background:var(--burg);color:var(--yellow)} .gold{background:var(--yellow);color:#5C2A12} .orange{background:#0D0416;color:var(--yellow);border-color:#ffd7002e} .coral{background:#FF9459;color:#fff} .sky{background:var(--sky);color:#fff} .visual{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center} .poster{height:500px;background:linear-gradient(160deg,#2B160A 0%,#7A3210 55%,#0D0416 100%);color:#fff;border-radius:30px;padding:34px;position:relative;overflow:hidden;box-shadow:0 30px 90px #000a;transition:transform .3s ease,box-shadow .3s ease} .poster:hover{transform:translateY(-5px);box-shadow:0 38px 110px #ffd7002e,0 30px 90px rgba(209, 28, 28, 0.8)} .poster:before,.poster:after{content:"";position:absolute;border:2px solid #ffd70055;border-radius:50%} .poster:before{width:480px;height:480px;top:-150px;right:-190px} .poster:after{width:320px;height:320px;bottom:-150px;left:-110px} .poster-small{font-size:10px;letter-spacing:.15em;color:var(--yellow)} .poster h2{position:absolute;bottom:85px;font-size:65px;line-height:1.1} .poster h2 em{font-style:normal;background:linear-gradient(100deg,#FFD700,#FFEBA0,#FFCBA3,#FFD700);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px #ffd70055);animation:shine 6s linear infinite} .poster p{position:absolute;bottom:40px;font-size:12px;color:#ffe0c4} .poster-star{position:absolute;left:45px;top:55px;font-size:50px;color:var(--yellow);transform:rotate(12deg);text-shadow:0 0 20px #ffd7004d} .poster-line{position:absolute;width:180px;height:7px;background:var(--yellow);right:35px;bottom:45px;border-radius:99px} .warm-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px} .warm-tags span{background:#2b160a90;border:1px solid #0288d63d;border-radius:99px;padding:7px 12px;font-size:11px;color:var(--yellow);font-weight:700} .demo-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px} .demo{min-height:260px;border-radius:25px;padding:25px;box-shadow:0 20px 60px #0008;border:2px solid #dfc11a1f;transition:transform .3s ease,box-shadow .3s ease} .demo:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 28px 75px #ffd7002e,0 20px 60px rgba(216, 21, 21, 0.667)} .demo small{font-size:10px} .demo h3{font-size:27px;margin-top:35px} .demo button{border:0;border-radius:13px;padding:10px 16px;background:var(--burg);color:var(--yellow);box-shadow:0 10px 25px #0007} .yellow{background:linear-gradient(160deg,#E9C46A,#B8860B);color:#c9520d} .yellow small{color:#7A3210} .dark{background:linear-gradient(160deg,#5C2A12,#5cbb0f);color:#fff} .dark small{color:var(--yellow)} .dark p{color:#ffe0c4} .sky-demo{background:var(--sky);color:#fff} .sky-demo .date b{color:var(--yellow)} .date{display:flex;gap:10px;align-items:center;margin-top:30px} .date b{font:800 52px Estedad,Vazirmatn,Tahoma,sans-serif} .date span{font-size:12px} footer{text-align:center;padding:50px;color:var(--muted);font-size:10px;letter-spacing:.1em} .modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;padding:20px} .modal.show{display:flex} .back{position:absolute;inset:0;background:#6e07d4de;-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)} .modal-box{position:relative;width:min(560px,100%);padding:45px;border-radius:32px;background:linear-gradient(160deg,#FFE9A8,#D4AF37);color:#5C2A12;box-shadow:0 45px 140px #000c,0 0 0 1px #ffffff40 inset;overflow:hidden;animation:rise .35s ease} .modal-box:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:#ffffff33;top:-100px;left:-100px} .modal-box>*{position:relative} .modal-sun{font-size:42px;color:#7A3210;margin-bottom:20px} .modal-box h2{font-size:40px;line-height:1.35;color:#bbafaa} .modal-box h2 em{font-style:normal;color:#E8834A} .modal-box p{color:#5a3a1f} .close{position:absolute!important;left:18px;top:18px;width:38px;height:38px;border:0;border-radius:12px;background:#5C2A12;color:var(--yellow);font-size:23px;z-index:2} @keyframes rise{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:none}} @keyframes breathe{0%,100%{opacity:.65;filter:brightness(1)}50%{opacity:1;filter:brightness(1.25)}} @keyframes shine{to{background-position:300% center}} @keyframes spin{to{transform:rotate(360deg)}} @media(max-width:850px){.hero,.visual{grid-template-columns:1fr}.hero{padding:65px 0}.hero-art{height:420px}.color-stage{grid-template-columns:repeat(2,1fr)}.demo-grid{grid-template-columns:1fr}.poster{height:420px}} @media(max-width:520px){.top{padding:0 5%}.top-pill{display:none}.hero-art{transform:scale(.82);margin:-35px 0}.color-stage{grid-template-columns:1fr}h1{font-size:47px}.section{padding:70px 0}.section-title h2,.visual-copy h2{font-size:35px}.modal-box{padding:35px 25px}} /* Couplina — Midnight Royal: Black / Deep Purple / Gold signature */ .color-card.lilac{background:linear-gradient(160deg,#7A3210,#e28752);color:var(--yellow)} .color-card.pink{background:#a370d6;color:var(--yellow)} .color-card.softblue{background:#B8860B;color:#2B160A} .color-card.sun{background:#FFE9A8;color:#5C2A12} /* ========================= COUPLINA — ENTRY POPUP v4 Clean Emerald + Orange signature ========================= */ .modal{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease} .modal.show{display:flex;opacity:1;visibility:visible} .modal .back{background:rgba(2,24,17,.74);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)} .welcome-popup{ width:min(620px,calc(100vw - 28px)); min-height:560px; padding:0!important; border-radius:30px!important; background:linear-gradient(145deg,#ffffff 0%,#f0fdf4 55%,#dcfce7 100%)!important; color:#064e3b; overflow:hidden; isolation:isolate; border:1px solid rgba(5,150,105,.18); animation:popupEnter .55s cubic-bezier(.2,.9,.25,1) both!important; box-shadow:0 45px 120px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.75) inset,0 0 70px rgba(5,150,105,.16)!important; } .welcome-popup:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);transform:translateX(-130%);animation:popupSweep 4.8s ease-in-out .4s infinite;pointer-events:none} .welcome-popup:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-150px;top:-130px;background:rgba(52,211,153,.18);filter:blur(12px);pointer-events:none} .popup-content{position:relative;z-index:4;min-height:560px;padding:26px 44px 30px;display:flex;align-items:center;flex-direction:column;text-align:center} .popup-topline{width:100%;display:flex;align-items:center;justify-content:space-between;color:#047857;font-size:9px;font-weight:800} .popup-status{display:flex;align-items:center;gap:7px}.popup-status i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.10)} .popup-brand-mini{letter-spacing:.18em;color:#9ca3af;font-size:8px} .popup-logo-wrap{position:relative;width:126px;height:126px;margin:25px auto 17px;display:grid;place-items:center} .popup-logo-ring{width:105px;height:105px;border-radius:28px;padding:7px;background:linear-gradient(145deg,#ffffff,#d1fae5,#34d399);box-shadow:0 20px 42px rgba(5,150,105,.18),0 0 0 7px rgba(255,255,255,.72);animation:logoFloat 4s ease-in-out infinite} .popup-logo-ring img{width:100%;height:100%;object-fit:contain;border-radius:21px;background:#fff} .welcome-popup .eyebrow{color:#7A3210;font-size:9px;letter-spacing:.18em;font-weight:800} .welcome-popup h2{font-size:38px;line-height:1.38;margin:9px 0 8px;color:#064e3b;letter-spacing:-.04em} .welcome-popup h2 em{font-style:normal;color:#f97316} .welcome-popup p{max-width:450px;margin:0;color:#527166;font-size:12px;line-height:2.05} .popup-features{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px 0 5px} .popup-features span{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(5,150,105,.12);color:#27614f;font-size:9px;box-shadow:0 8px 22px rgba(5,150,105,.06)} .popup-features b{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:#FFE0B2;color:#7A3210;font-size:10px} .popup-progress{width:min(350px,82%);height:4px;background:#7A321018;border-radius:99px;overflow:hidden;margin:24px 0 10px} .popup-progress span{display:block;width:100%;height:100%;transform-origin:right center;background:linear-gradient(90deg,#7A3210,#E8834A,#FFD700);border-radius:inherit;animation:popupProgress 4s linear forwards} .popup-hint{font-size:9px;color:#6b7f77;display:flex;align-items:center;gap:9px}.popup-hint b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#064e3b;color:#fff;font-size:10px;box-shadow:0 7px 18px rgba(6,78,59,.2)} .welcome-popup .close{background:#064e3b;color:#fff;box-shadow:0 8px 20px rgba(6,78,59,.22);transition:transform .2s ease,background .2s ease;z-index:8} .welcome-popup .close:hover{transform:rotate(90deg) scale(1.06);background:#f97316} @keyframes popupEnter{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}} @keyframes popupSweep{0%,38%{transform:translateX(-130%)}65%,100%{transform:translateX(130%)}} @keyframes popupProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}} @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @media(max-width:520px){.welcome-popup{min-height:520px;border-radius:26px!important}.popup-content{min-height:520px;padding:23px 20px 25px}.popup-logo-wrap{width:105px;height:105px;margin-top:22px}.popup-logo-ring{width:88px;height:88px;border-radius:23px}.welcome-popup h2{font-size:30px}.welcome-popup p{font-size:11px}.popup-features{gap:6px}.popup-features span{font-size:8px;padding:7px 8px}} /* ========================================================= COUPLINA — SIGNATURE HEADER / WORLD CONTROL CENTER ========================================================= */ .couplina-header{position:sticky!important;top:0;height:auto!important;padding:0!important;background:rgba(18,8,12,.86)!important;border-bottom:1px solid rgba(255,215,0,.16)!important;-webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%);z-index:50;box-shadow:0 18px 55px rgba(0,0,0,.22)} .couplina-header:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,215,0,.035),transparent 30%,rgba(232,131,74,.05) 70%,rgba(255,215,0,.03));pointer-events:none} .header-shell{width:min(1440px,94%);height:88px;margin:auto;display:flex;align-items:center;gap:22px;position:relative;z-index:2} .header-brand-area{display:flex;align-items:center;flex:0 0 auto} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-width:190px} .brand-logo-orbit{position:relative;width:53px;height:53px;display:grid;place-items:center} .brand-symbol{width:48px!important;height:48px!important;border-radius:15px!important;position:relative;z-index:2;filter:drop-shadow(0 8px 20px rgba(255,215,0,.2))!important} .brand-logo-orbit:before{content:"";position:absolute;inset:-5px;border:1px solid rgba(255,215,0,.35);border-radius:18px;transform:rotate(9deg);animation:headerOrbit 8s linear infinite} .brand-logo-orbit:after{content:"";position:absolute;inset:-10px;border:1px dashed rgba(232,131,74,.28);border-radius:21px;transform:rotate(-16deg);animation:headerOrbit 11s linear infinite reverse} .brand-logo-orbit i{position:absolute;right:-5px;top:-6px;color:#ffd700;font-style:normal;font-size:13px;text-shadow:0 0 14px #ffd700;z-index:3} .brand-copy b{font:800 19px Estedad,Vazirmatn,Tahoma,sans-serif;display:block;letter-spacing:-.02em;color:#fff} .brand-copy small{font-size:8px;color:#d7b9aa;display:block;margin-top:-1px;white-space:nowrap} .main-nav{height:100%;display:flex;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0} .nav-link{position:relative;height:50px;padding:0 11px;display:flex;align-items:center;gap:7px;text-decoration:none;color:#cbb7ad;border-radius:15px;font-size:11px;font-weight:700;transition:.25s ease;white-space:nowrap} .nav-link:hover{color:#fff;background:rgba(255,255,255,.055);transform:translateY(-1px)} .nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(232,131,74,.2),rgba(255,215,0,.08));box-shadow:inset 0 0 0 1px rgba(255,215,0,.13),0 8px 25px rgba(0,0,0,.13)} .nav-link.active:after{content:"";position:absolute;bottom:5px;right:17px;left:17px;height:2px;border-radius:10px;background:linear-gradient(90deg,#e8834a,#ffd700)} .nav-icon{font-size:17px;line-height:1;color:#f2c18e;filter:drop-shadow(0 0 6px rgba(255,215,0,.15))} .nav-link em{font-style:normal;font-size:8px;min-width:17px;height:17px;display:grid;place-items:center;border-radius:99px;background:#e8834a;color:#fff;box-shadow:0 4px 12px rgba(232,131,74,.3)} .nav-link em.live-dot{width:6px;min-width:6px;height:6px;padding:0;background:#41d889;box-shadow:0 0 0 4px rgba(65,216,137,.09),0 0 13px #41d889} .header-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto} .couple-presence{height:49px;padding:5px 10px 5px 6px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,215,0,.13);border-radius:16px;background:rgba(255,255,255,.035);margin-left:4px} .presence-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#5c2a12,#e8834a);color:#ffd700;font-size:18px;box-shadow:inset 0 0 0 1px #ffd70022} .presence-copy{display:flex;flex-direction:column;line-height:1.1;gap:4px;white-space:nowrap}.presence-copy b{font-size:9px;color:#fff}.presence-copy small{font-size:7px;color:#bdaaa1}.presence-copy i,.mobile-world-card i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#41d889;box-shadow:0 0 7px #41d889;margin-left:3px}.couple-presence.partner-hidden .presence-copy small{display:none}.couple-presence.partner-offline .presence-copy i{background:#a58f87;box-shadow:none}.couple-presence.partner-offline .presence-copy small{color:#a9958d}.couple-presence.partner-online .presence-copy small{color:#bde8cf} .header-icon-btn{position:relative;width:43px;height:43px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035);color:#e9c9bb;font-size:21px;display:grid;place-items:center;transition:.25s ease;cursor:pointer} .header-icon-btn:hover{transform:translateY(-2px);color:#fff;border-color:rgba(255,215,0,.25);background:rgba(232,131,74,.12);box-shadow:0 10px 28px rgba(0,0,0,.2)} .header-icon-btn[data-tip]:hover:after{content:attr(data-tip);position:absolute;top:52px;right:50%;transform:translateX(50%);white-space:nowrap;background:#25130e;color:#f9e5d9;border:1px solid rgba(255,215,0,.12);padding:6px 9px;border-radius:8px;font-size:8px;z-index:100;box-shadow:0 10px 30px #0007} .notification-btn b{position:absolute;top:-3px;left:-3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#e61f82;color:#fff;font-size:8px;border:2px solid #18080c} .profile-btn{height:49px;border:1px solid rgba(255,215,0,.14);border-radius:16px;background:rgba(255,255,255,.045);padding:4px 7px 4px 10px;color:#fff;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.25s ease} .profile-btn:hover,.profile-btn.open{background:rgba(232,131,74,.13);border-color:rgba(255,215,0,.28);transform:translateY(-1px)} .profile-avatar{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#e8834a,#5c2a12);color:#fff;font:800 14px Estedad,Vazirmatn,Tahoma,sans-serif;box-shadow:inset 0 0 0 1px #ffd70040} .profile-avatar.large{width:55px;height:55px;border-radius:17px;font-size:20px} .profile-copy{text-align:right;display:flex;flex-direction:column;line-height:1.15;gap:4px;min-width:76px}.profile-copy b{font-size:9px}.profile-copy small{font-size:7px;color:#bfa9a0}.profile-chevron{color:#a88f84;font-size:14px;margin-right:2px} .header-progress-bar{height:2px;width:100%;background:rgba(255,255,255,.035);position:relative;z-index:3}.header-progress-bar span{display:block;width:42%;height:100%;background:linear-gradient(90deg,transparent,#e8834a,#ffd700);box-shadow:0 0 13px #ffd70066;animation:headerProgress 7s ease-in-out infinite} .header-panel{position:absolute;z-index:60;top:96px;left:50%;width:min(520px,92vw);transform:translate(-50%,-10px) scale(.98);opacity:0;visibility:hidden;pointer-events:none;padding:20px;border:1px solid rgba(255,215,0,.15);border-radius:24px;background:linear-gradient(145deg,rgba(35,16,13,.98),rgba(18,8,12,.97));box-shadow:0 35px 90px #000b,0 0 0 1px #fff1 inset;transition:.25s ease;color:#fff} .header-panel.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)} .panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.panel-kicker{font-size:8px;letter-spacing:.13em;color:#e8ad74;font-weight:800}.panel-heading h3{font-size:21px;color:#fff;margin:5px 0 0}.panel-close{width:31px;height:31px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);color:#d9c0b5;border-radius:10px;cursor:pointer;font-size:20px;display:grid;place-items:center}.panel-close:hover{background:#e8834a;color:#fff} .search-box{height:54px;margin-top:18px;display:flex;align-items:center;gap:10px;padding:0 13px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,215,0,.12)}.search-box>span{font-size:23px;color:#e8834a}.search-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-family:Vazirmatn,Tahoma,sans-serif;font-size:12px}.search-box input::placeholder{color:#8f7b73}.search-box kbd{font-size:8px;color:#bfa89f;border:1px solid #fff1;padding:4px 6px;border-radius:6px;background:#fff1} .search-suggestions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.search-suggestions button{border:1px solid #fff1;background:#fff1;color:#d6c1b7;border-radius:99px;padding:7px 10px;font-size:8px}.search-suggestions button:hover{border-color:#e8834a66;color:#fff}.search-suggestions b{color:#ffd700;margin-right:3px} .notification-panel{width:min(430px,92vw);right:4%;left:auto;transform:translateY(-10px) scale(.98)}.notification-panel.show{transform:translateY(0) scale(1)}.notification-item{display:flex;align-items:flex-start;gap:11px;padding:13px 0;border-bottom:1px solid #fff1;position:relative}.notif-symbol{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#e8834a1c;color:#ffd18e;font-size:16px}.notification-item div{display:flex;flex-direction:column;gap:4px}.notification-item b{font-size:9px;color:#f4e7e0}.notification-item small{font-size:7px;color:#9f8980}.notification-item>i{position:absolute;left:3px;top:18px;width:5px;height:5px;background:#e61f82;border-radius:50%;box-shadow:0 0 10px #e61f82}.panel-footer-btn{margin-top:14px;width:100%;padding:10px;border:1px solid #ffd70020;border-radius:12px;background:#ffd7000a;color:#f5c894;font-size:9px} .quick-panel{width:min(590px,94vw);right:10%;left:auto;transform:translateY(-10px) scale(.98)}.quick-panel.show{transform:translateY(0) scale(1)}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.quick-grid button{min-height:105px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);border-radius:15px;padding:13px;text-align:right;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:.22s}.quick-grid button:hover{transform:translateY(-3px);background:rgba(232,131,74,.12);border-color:#e8834a44}.quick-grid span{font-size:20px;color:#e8834a}.quick-grid b{font-size:9px}.quick-grid small{font-size:7px;color:#9e8980} .profile-panel{width:min(330px,92vw);right:3%;left:auto;transform:translateY(-10px) scale(.98)}.profile-panel.show{transform:translateY(0) scale(1)}.profile-hero{display:flex;align-items:center;gap:11px;padding-bottom:15px;border-bottom:1px solid #fff1}.profile-hero h3{font-size:18px;margin:3px 0}.profile-hero small{font-size:7px;color:#9e8980}.profile-level{margin-right:auto;font-size:8px;color:#ffd700;border:1px solid #ffd70030;padding:5px 7px;border-radius:8px}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}.profile-stats span{padding:10px 5px;border-radius:12px;background:#fff1;text-align:center;display:flex;flex-direction:column;gap:3px}.profile-stats b{font:800 17px Estedad,Vazirmatn,Tahoma,sans-serif;color:#ffd28f}.profile-stats small{font-size:7px;color:#a48e86}.profile-links{display:grid;gap:6px}.profile-links button{padding:9px 10px;border:0;border-radius:10px;background:#fff1;color:#d6c0b5;text-align:right;font:inherit;font-size:8px}.profile-links button:hover{background:#e8834a1c;color:#fff} .mobile-menu-btn{display:none} .mobile-nav-drawer{display:none} @keyframes headerOrbit{to{transform:rotate(369deg)}} @keyframes headerProgress{0%,100%{transform:translateX(0);opacity:.65}50%{transform:translateX(80%);opacity:1}} @media(max-width:1180px){.main-nav{gap:0}.nav-link{padding:0 7px}.nav-link span:not(.nav-icon){font-size:10px}.couple-presence{display:none}.brand{min-width:165px}.profile-copy{display:none}.profile-btn{padding:5px}} @media(max-width:900px){.header-shell{height:78px}.main-nav{display:none}.mobile-menu-btn{display:grid!important;margin-left:8px}.header-brand-area{flex:1}.brand{min-width:auto}.header-actions{gap:5px}.header-icon-btn{width:40px;height:40px}.profile-btn{width:43px;height:43px;padding:3px;border-radius:13px}.profile-chevron{display:none}.profile-btn .profile-avatar{width:35px;height:35px}.header-panel{top:86px}.mobile-nav-drawer{position:fixed;display:block;top:0;right:0;width:min(370px,88vw);height:100vh;background:linear-gradient(165deg,#25120d,#12080c 75%);border-left:1px solid #ffd7001c;box-shadow:-30px 0 90px #000b;padding:25px 20px;transform:translateX(110%);transition:.35s cubic-bezier(.2,.9,.25,1);z-index:100}.mobile-nav-drawer.show{transform:translateX(0)}.mobile-drawer-top{display:flex;align-items:center;justify-content:space-between}.mobile-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:28px}.mobile-nav-grid a{height:75px;border:1px solid #fff1;border-radius:15px;background:#fff1;color:#f4dcd0;text-decoration:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;font-size:21px}.mobile-nav-grid a span{font-size:9px}.mobile-nav-grid a:hover{background:#e8834a15;border-color:#e8834a44}.mobile-world-card{position:absolute;bottom:30px;left:20px;right:20px;border:1px solid #ffd7001c;border-radius:17px;padding:12px;display:flex;align-items:center;gap:9px;background:#fff1}.mobile-world-card>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#e8834a;color:#ffd700}.mobile-world-card div{display:flex;flex-direction:column;gap:4px}.mobile-world-card b{font-size:9px}.mobile-world-card small{font-size:7px;color:#9e8980}.mobile-world-card strong{margin-right:auto;color:#ffd28f;font-size:9px}} @media(max-width:560px){.header-shell{width:94%;gap:7px}.brand-copy small{display:none}.brand-copy b{font-size:17px}.brand-logo-orbit{width:45px;height:45px}.brand-symbol{width:41px!important;height:41px!important}.brand-logo-orbit:before{inset:-3px}.header-actions{margin-right:auto}.header-icon-btn{width:38px;height:38px;font-size:18px}.header-icon-btn:first-of-type{display:none}.profile-btn{width:40px;height:40px}.profile-btn .profile-avatar{width:34px;height:34px}.notification-panel,.quick-panel,.profile-panel{right:3%;left:3%;width:auto;transform:translateY(-10px) scale(.98)}.notification-panel.show,.quick-panel.show,.profile-panel.show{transform:translateY(0) scale(1)}.quick-grid{grid-template-columns:repeat(2,1fr)}} /* === Couplina Header v2: richer icon system + protected text === */ .icon-sprite{position:absolute;width:0;height:0;overflow:hidden} .nav-icon,.header-icon-btn>svg,.quick-grid button>span>svg,.mobile-nav-grid a>svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block} .nav-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(232,131,74,.08));border:1px solid rgba(255,215,0,.08);color:#f5b66e;transition:.25s ease;flex:0 0 auto} .nav-link:hover .nav-icon,.nav-link.active .nav-icon{color:#fff;background:linear-gradient(145deg,rgba(232,131,74,.34),rgba(255,215,0,.13));border-color:rgba(255,215,0,.2);box-shadow:0 8px 24px rgba(232,131,74,.15),inset 0 0 12px rgba(255,215,0,.06)} .nav-link{gap:6px} .main-nav{overflow-x:auto;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none} .nav-link span:not(.nav-icon){position:relative;z-index:2} .chat-badge{background:#41d889!important;box-shadow:0 4px 12px rgba(65,216,137,.25)!important} .header-icon-btn>svg{width:20px;height:20px;pointer-events:none}.header-icon-btn .mini-badge{position:absolute;top:-3px;left:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#41d889;color:#082b18;font-size:7px;border:2px solid #18080c} .quick-grid{grid-template-columns:repeat(3,1fr);max-height:390px;overflow:auto;padding:2px 3px 3px;scrollbar-width:thin} .quick-grid button>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,rgba(232,131,74,.16),rgba(255,215,0,.07));border:1px solid rgba(255,215,0,.13);color:#ffb45e;box-shadow:inset 0 0 16px rgba(255,255,255,.025)} .quick-grid button>span>svg{width:21px;height:21px}.quick-grid button:hover>span{transform:rotate(-4deg) scale(1.06);color:#fff;box-shadow:0 8px 24px rgba(232,131,74,.18)} .quick-grid button{min-height:118px} .chat-panel{width:min(430px,92vw);right:16%;left:auto;transform:translateY(-10px) scale(.98)}.chat-panel.show{transform:translateY(0) scale(1)} .chat-preview{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #fff1}.chat-avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#e8834a,#5c2a12);color:#fff;font-weight:800}.chat-avatar.alt{background:linear-gradient(145deg,#41d889,#075f4c)}.chat-preview>div:nth-child(2){display:flex;flex-direction:column;gap:4px;flex:1}.chat-preview b{font-size:9px}.chat-preview small{font-size:8px;color:#9f8980}.chat-preview time{font-size:7px;color:#e8ad74} /* The decorative sweep is now confined to the bottom rule; it never crosses header text/icons. */ .header-progress-bar{height:3px;overflow:hidden}.header-progress-bar span{width:30%;background:linear-gradient(90deg,transparent,#e8834a,#ffd700,#e8834a,transparent);animation:headerProgressSafe 9s ease-in-out infinite;transform:translateX(0)} @keyframes headerProgressSafe{0%,100%{transform:translateX(-120%);opacity:.35}50%{transform:translateX(420%);opacity:.8}} /* Disable shine/sweep effects on header typography itself. */ .couplina-header .brand b,.couplina-header .brand small,.couplina-header .nav-link,.couplina-header .nav-link span,.couplina-header .panel-heading h3,.couplina-header .profile-copy,.couplina-header .presence-copy{animation:none!important;background-image:none!important;text-shadow:none} .mobile-nav-grid{max-height:calc(100vh - 220px);overflow:auto;scrollbar-width:none}.mobile-nav-grid::-webkit-scrollbar{display:none} .mobile-nav-grid a>svg{width:25px;height:25px;color:#f5b66e}.mobile-nav-grid a:hover>svg{color:#fff;filter:drop-shadow(0 0 8px rgba(255,215,0,.3))} @media(max-width:1180px){.nav-link{padding:0 6px}.nav-link span:not(.nav-icon){font-size:9px}.nav-icon{width:29px;height:29px}.main-nav{gap:1px}.chat-panel{right:7%}} @media(max-width:900px){.chat-panel{right:3%;left:3%;width:auto}.quick-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.quick-grid{grid-template-columns:repeat(2,1fr);max-height:none}.quick-grid button{min-height:105px}.quick-grid button>span{width:38px;height:38px}.header-icon-btn#chatBtn{display:grid}.header-icon-btn{width:38px;height:38px}.mobile-nav-grid{grid-template-columns:repeat(3,1fr)}.mobile-nav-grid a{height:76px}.mobile-nav-grid a>svg{width:23px;height:23px}} /* === Couplina image assets in header === */ .couplina-header .nav-icon.nav-photo{ width:32px; height:32px; padding:4px; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(232,131,74,.11)); border:1px solid rgba(255,215,0,.10); box-shadow:inset 0 0 12px rgba(255,255,255,.025); } .couplina-header .nav-icon.nav-photo img{ width:100%; height:100%; display:block; object-fit:contain; object-position:center; filter:drop-shadow(0 4px 8px rgba(0,0,0,.28)); transition:transform .25s ease,filter .25s ease; } .couplina-header .nav-link:hover .nav-photo img, .couplina-header .nav-link.active .nav-photo img{ transform:scale(1.10); filter:drop-shadow(0 5px 10px rgba(232,131,74,.35)); } .mobile-nav-photo{ width:30px!important; height:30px!important; object-fit:contain; object-position:center; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.28)); transition:transform .2s ease,filter .2s ease; } .mobile-nav-grid a:hover .mobile-nav-photo{ transform:scale(1.08); filter:drop-shadow(0 5px 10px rgba(232,131,74,.35)); } @media(max-width:1180px){ .couplina-header .nav-icon.nav-photo{width:29px;height:29px;padding:3px} } @media(max-width:560px){ .couplina-header .nav-icon.nav-photo{width:29px;height:29px} .mobile-nav-photo{width:28px!important;height:28px!important} } /* Header: PNG icons only — reference layout */ .main-nav .nav-png-only{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; padding:5px; margin:0 1px; border-radius:14px; flex:0 0 46px; } .main-nav .nav-png-only > img{ display:block; width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,0,0,.28)); transition:transform .2s ease,filter .2s ease; } .main-nav .nav-png-only:hover{ background:rgba(255,255,255,.045); transform:none; } .main-nav .nav-png-only:hover > img{ transform:scale(1.08); filter:drop-shadow(0 4px 9px rgba(232,131,74,.28)); } .main-nav .nav-png-only.active{background:rgba(232,131,74,.08);box-shadow:none} .main-nav .nav-png-only.active:after{display:none} .main-nav .nav-png-only > em{ position:absolute; font-style:normal; display:grid; place-items:center; z-index:2; } .main-nav .nav-png-only > em:not(.live-dot){ min-width:15px; height:15px; padding:0 3px; right:1px; top:2px; border-radius:99px; background:#e8834a; color:#fff; font-size:7px; line-height:1; box-shadow:0 3px 9px rgba(232,131,74,.3); } .main-nav .nav-png-only .live-dot{ width:7px; min-width:7px; height:7px; right:2px; top:3px; padding:0; border-radius:50%; background:#41d889; box-shadow:0 0 0 3px rgba(65,216,137,.09),0 0 10px #41d889; } @media(max-width:1180px){ .main-nav{gap:0} .main-nav .nav-png-only{width:41px;height:41px;flex-basis:41px;padding:4px} .main-nav .nav-png-only > img{width:27px;height:27px} } /* === Desktop header: labels restored beside the PNG icons === */ .couplina-header .main-nav{gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none} .couplina-header .main-nav::-webkit-scrollbar{display:none} .couplina-header .nav-png-only, .couplina-header .nav-extra-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;flex:0 0 auto} .couplina-header .nav-png-only{width:auto;min-width:58px;height:42px;padding:4px 7px;border-radius:12px} .couplina-header .nav-png-only>img{width:27px;height:27px;object-fit:contain;display:block;flex:0 0 auto} .couplina-header .nav-png-only>span:not(.nav-icon), .couplina-header .nav-extra-link>span:last-child{font-size:8px;font-weight:600;color:#e8d2c7;line-height:1} .couplina-header .nav-png-only:hover>span:not(.nav-icon), .couplina-header .nav-extra-link:hover>span:last-child{color:#fff} .couplina-header .nav-extra-link{padding:3px 5px;height:42px} .couplina-header .nav-extra-link .nav-icon{width:28px;height:28px;border-radius:9px} .couplina-header .nav-extra-link .nav-icon svg{width:16px;height:16px} /* Remove the small status/count badges from Music and Games. */ .couplina-header .nav-png-only .live-dot, .couplina-header .nav-png-only>em{display:none!important} @media(max-width:1180px){ .couplina-header .nav-png-only{min-width:52px;padding:4px 5px} .couplina-header .nav-png-only>img{width:25px;height:25px} .couplina-header .nav-png-only>span:not(.nav-icon), .couplina-header .nav-extra-link>span:last-child{font-size:7px} .couplina-header .nav-extra-link{padding:3px 4px} } /* Final header refinements */ .couplina-header .brand{ transform:translateX(-25px); } .couplina-header .main-nav .nav-png-only{ position:relative; } .couplina-header .main-nav .nav-png-only.active::after{ content:""; position:absolute; bottom:-2px; left:50%; width:24px; height:2px; transform:translateX(-50%); border-radius:99px; background:#ffd36a; box-shadow:0 0 8px rgba(255,211,106,.45); display:block; } @media(max-width:560px){ .couplina-header .brand{transform:translateX(-8px);} } /* ===== Clean white header navigation ===== */ .couplina-header .main-nav .nav-png-only{ background:transparent; background-image:none; box-shadow:none; animation:none; transform:none; border:1px solid transparent; transition:background .22s ease, box-shadow .22s ease, border-color .22s ease, transform .22s ease; } .couplina-header .main-nav .nav-png-only>img{ filter:brightness(0) invert(1); transition:transform .22s ease, filter .22s ease; } .couplina-header .main-nav .nav-png-only>span:not(.nav-icon){ color:#fff; text-shadow:none; font-weight:600; } /* Hover stays clean: no shadow. */ .couplina-header .main-nav .nav-png-only:hover{ background:rgba(255,255,255,.045); box-shadow:none; border-color:rgba(255,255,255,.08); transform:none; } .couplina-header .main-nav .nav-png-only:hover>img{ filter:brightness(0) invert(1); transform:scale(1.06); } /* Only the clicked/selected item gets the glow/shadow. */ .couplina-header .main-nav .nav-png-only.active{ background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.13); box-shadow:0 8px 26px rgba(0,0,0,.34), 0 0 18px rgba(255,255,255,.12); transform:translateY(-1px); } .couplina-header .main-nav .nav-png-only.active>img{ filter:brightness(0) invert(1) drop-shadow(0 0 9px rgba(255,255,255,.65)); transform:scale(1.08); } .couplina-header .main-nav .nav-png-only.active>span:not(.nav-icon){ color:#fff; } .couplina-header .main-nav .nav-png-only.active::after{ content:""; position:absolute; bottom:-2px; left:50%; width:24px; height:2px; transform:translateX(-50%); border-radius:99px; background:#fff; box-shadow:0 0 9px rgba(255,255,255,.7); } /* Header navigation: seven Jupiter-inspired mini worlds */ .main-nav{gap:clamp(5px,.8vw,12px);overflow:visible} .main-nav .nav-link.nav-png-only{ height:66px; min-width:48px; padding:4px 3px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:14px; background:transparent; color:#f4d9bd; font-size:9px; line-height:1.1; } .main-nav .nav-link.nav-png-only img{ display:block; width:34px; height:34px; flex:0 0 34px; object-fit:cover; border-radius:50%; background: radial-gradient(ellipse at 28% 25%,#fff3d1 0 3%,transparent 25%), repeating-linear-gradient(0deg,#8b492b 0 4px,#d9a06a 4px 8px,#f1d0a0 8px 11px,#a85d38 11px 15px); box-shadow:inset -7px -4px 10px #30140c99,inset 3px 2px 7px #fff6,0 0 0 1px #f3c58a88,0 5px 13px #0008; animation:jupiter-turn 13s linear infinite; filter:saturate(.95); } .main-nav .nav-link:nth-child(2) img{animation-delay:-2s;filter:hue-rotate(-8deg)} .main-nav .nav-link:nth-child(3) img{animation-delay:-4s} .main-nav .nav-link:nth-child(4) img{animation-delay:-6s} .main-nav .nav-link:nth-child(5) img{animation-delay:-8s} .main-nav .nav-link:nth-child(6) img{animation-delay:-10s} .main-nav .nav-link:nth-child(7) img{animation-delay:-12s} .main-nav .nav-link.nav-png-only:hover{ transform:translateY(-3px); background:rgba(255,190,125,.08); box-shadow:0 8px 20px #0003; } .main-nav .nav-link.nav-png-only.active{ background:linear-gradient(180deg,#f4b77b16,transparent); box-shadow:inset 0 0 0 1px #e9b77a44,0 7px 20px #0003; } .main-nav .nav-link.nav-png-only.active:after{ bottom:1px;right:30%;left:30%;height:2px; background:linear-gradient(90deg,#a85d38,#f5d4a2,#a85d38); } @keyframes jupiter-turn{ 0%{transform:rotate(0deg); background-position:0 0} 100%{transform:rotate(360deg); background-position:0 68px} } @media(max-width:1050px){ .main-nav{gap:2px} .main-nav .nav-link.nav-png-only{min-width:39px;font-size:8px} .main-nav .nav-link.nav-png-only img{width:29px;height:29px;flex-basis:29px} } @media(max-width:850px){ .main-nav .nav-link.nav-png-only{height:50px} } /* Targeted icon visibility fix only: preserve Jupiter planets, layout, and interactions. */ .nav-link.nav-png-only{isolation:isolate} .nav-link.nav-png-only img{ position:relative; z-index:2; display:block; flex:0 0 25px; width:25px; height:25px; min-width:25px; object-fit:contain; object-position:center; opacity:1!important; visibility:visible!important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 3px rgba(255,255,255,.75))!important; mix-blend-mode:normal!important; } .nav-link.nav-png-only span{position:relative;z-index:2} /* ===== Header navigation — Mars worlds (icons preserved exactly) ===== */ .couplina-header .main-nav{ gap:clamp(6px,.8vw,11px); overflow:visible; } .couplina-header .main-nav .nav-link.nav-png-only{ position:relative; width:64px; min-width:64px; height:70px; padding:4px 2px 3px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:4px; border:0; border-radius:18px; background:transparent; box-shadow:none; color:#f7ddd2; overflow:visible; } /* The Mars sphere sits behind the original icon. */ .couplina-header .main-nav .nav-link.nav-png-only::before{ content:""; position:absolute; z-index:0; top:1px; left:50%; width:48px; height:48px; transform:translateX(-50%); border-radius:50%; background: radial-gradient(circle at 30% 27%,rgba(255,211,178,.72) 0 2px,transparent 3px), radial-gradient(circle at 68% 23%,rgba(92,28,20,.72) 0 3px,transparent 4px), radial-gradient(circle at 73% 62%,rgba(103,31,22,.68) 0 5px,transparent 6px), radial-gradient(circle at 34% 73%,rgba(103,31,22,.58) 0 3px,transparent 5px), radial-gradient(circle at 48% 43%,rgba(248,143,106,.72) 0 7px,transparent 8px), radial-gradient(circle at 35% 35%,#f09a78 0 9%,transparent 32%), linear-gradient(145deg,#f2a083 0%,#c95b42 34%,#8e332a 70%,#531d1b 100%); box-shadow: inset -8px -7px 12px rgba(45,8,8,.52), inset 5px 4px 9px rgba(255,231,216,.28), 0 0 0 1px rgba(255,174,143,.55), 0 7px 15px rgba(31,7,8,.5), 0 0 18px rgba(218,91,65,.18); transition:transform .25s ease,filter .25s ease,box-shadow .25s ease; } /* A subtle orbital glow makes the seven worlds feel like one Mars section. */ .couplina-header .main-nav .nav-link.nav-png-only::after{ content:""; position:absolute; z-index:3; top:0; left:50%; width:58px; height:58px; transform:translateX(-50%); border:1px solid rgba(245,155,126,.14); border-radius:50%; pointer-events:none; box-shadow:inset 0 0 13px rgba(255,182,153,.06); } /* Keep the uploaded icons unchanged: no recoloring, inversion, cropping, or blending. */ /* Very faint romantic heart halo: decorative only, never overlaps or alters the original icon. */ .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit{ position:absolute; z-index:3; top:-2px; left:50%; width:57px; height:57px; transform:translateX(-50%); border:1px solid rgba(255,154,174,.11); border-radius:50%; pointer-events:none; animation:heart-orbit-spin 15s linear infinite; opacity:.72; } .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit::before, .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit::after{ content:'♡'; position:absolute; color:rgba(255,150,174,.22); font-family:Arial,sans-serif; font-size:9px; line-height:1; text-shadow:0 0 7px rgba(255,104,139,.16); } .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit::before{ top:-5px; left:23px; } .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit::after{ right:-4px; bottom:10px; font-size:7px; } .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit{ box-shadow:inset 0 0 9px rgba(255,130,155,.035); } .couplina-header .main-nav .nav-link.nav-png-only:nth-child(2) .heart-orbit{animation-delay:-2.2s} .couplina-header .main-nav .nav-link.nav-png-only:nth-child(3) .heart-orbit{animation-delay:-4.4s} .couplina-header .main-nav .nav-link.nav-png-only:nth-child(4) .heart-orbit{animation-delay:-6.6s} .couplina-header .main-nav .nav-link.nav-png-only:nth-child(5) .heart-orbit{animation-delay:-8.8s} .couplina-header .main-nav .nav-link.nav-png-only:nth-child(6) .heart-orbit{animation-delay:-11s} .couplina-header .main-nav .nav-link.nav-png-only:nth-child(7) .heart-orbit{animation-delay:-13.2s} @keyframes heart-orbit-spin{ to{transform:translateX(-50%) rotate(360deg)} } .couplina-header .main-nav .nav-link.nav-png-only > img{ position:relative; z-index:4; width:27px; height:27px; min-width:27px; flex:0 0 27px; margin-top:11px; object-fit:contain; object-position:center; border-radius:0; background:transparent; box-shadow:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 3px rgba(255,245,238,.7)) !important; mix-blend-mode:normal !important; opacity:1 !important; visibility:visible !important; animation:none !important; transform:none; } /* Labels remain crisp and outside the planet. */ .couplina-header .main-nav .nav-link.nav-png-only > span:not(.nav-icon){ position:relative; z-index:5; margin-top:0; color:#f6ddd5; font-size:8px; line-height:1; font-weight:700; text-shadow:0 1px 5px rgba(0,0,0,.75); } /* Hover / active state changes the planet, not the icon. */ .couplina-header .main-nav .nav-link.nav-png-only:hover{ background:transparent; border:0; box-shadow:none; transform:translateY(-2px); } .couplina-header .main-nav .nav-link.nav-png-only:hover::before{ transform:translateX(-50%) scale(1.06); filter:saturate(1.08) brightness(1.08); box-shadow: inset -8px -7px 12px rgba(45,8,8,.5), inset 5px 4px 9px rgba(255,231,216,.32), 0 0 0 1px rgba(255,174,143,.75), 0 9px 20px rgba(31,7,8,.55), 0 0 25px rgba(218,91,65,.28); } .couplina-header .main-nav .nav-link.nav-png-only:hover::after{ border-color:rgba(255,187,159,.28); } .couplina-header .main-nav .nav-link.nav-png-only.active{ background:transparent; border:0; box-shadow:none; transform:translateY(-2px); } .couplina-header .main-nav .nav-link.nav-png-only.active::before{ box-shadow: inset -8px -7px 12px rgba(45,8,8,.48), inset 5px 4px 9px rgba(255,231,216,.35), 0 0 0 2px rgba(255,196,164,.72), 0 9px 24px rgba(31,7,8,.58), 0 0 28px rgba(235,104,72,.3); } .couplina-header .main-nav .nav-link.nav-png-only.active::after{ width:58px; height:58px; top:0; bottom:auto; left:50%; right:auto; transform:translateX(-50%); border-color:rgba(255,213,190,.38); background:transparent; box-shadow:0 0 16px rgba(244,133,98,.22); } /* The seven planets share one Mars-like palette while retaining distinct depth. */ .couplina-header .main-nav .nav-link:nth-child(2)::before{filter:hue-rotate(-5deg) saturate(1.05)} .couplina-header .main-nav .nav-link:nth-child(3)::before{filter:hue-rotate(4deg) saturate(1.08)} .couplina-header .main-nav .nav-link:nth-child(4)::before{filter:hue-rotate(-9deg) brightness(.96)} .couplina-header .main-nav .nav-link:nth-child(5)::before{filter:hue-rotate(7deg) brightness(1.03)} .couplina-header .main-nav .nav-link:nth-child(6)::before{filter:hue-rotate(-3deg) brightness(.98)} .couplina-header .main-nav .nav-link:nth-child(7)::before{filter:hue-rotate(5deg) saturate(1.1)} @media(max-width:1050px){ .couplina-header .main-nav{gap:3px} .couplina-header .main-nav .nav-link.nav-png-only{ width:56px; min-width:56px; height:62px; } .couplina-header .main-nav .nav-link.nav-png-only::before{ width:43px;height:43px; } .couplina-header .main-nav .nav-link.nav-png-only::after{ width:51px;height:51px; } .couplina-header .main-nav .nav-link.nav-png-only > img{ width:24px;height:24px;min-width:24px;flex-basis:24px;margin-top:10px; } .couplina-header .main-nav .nav-link.nav-png-only > span:not(.nav-icon){ font-size:7px; } } /* === Final color match: warm glowing Mars reference === */ .couplina-header{ background:rgba(7,3,2,.90)!important; border-bottom-color:rgba(255,106,68,.18)!important; box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 45px rgba(255,74,40,.06); } .couplina-header:before{ background:linear-gradient(90deg,rgba(255,83,47,.025),transparent 28%,rgba(255,82,46,.065) 70%,rgba(255,124,76,.025)); } .couplina-header .main-nav .nav-link.nav-png-only::before{ background: radial-gradient(circle at 29% 25%,rgba(255,224,199,.82) 0 2px,transparent 3px), radial-gradient(circle at 67% 22%,rgba(91,20,13,.78) 0 3px,transparent 4px), radial-gradient(circle at 74% 62%,rgba(102,24,15,.74) 0 5px,transparent 6px), radial-gradient(circle at 34% 74%,rgba(91,22,15,.68) 0 3px,transparent 5px), radial-gradient(circle at 49% 42%,rgba(255,155,116,.82) 0 7px,transparent 8px), radial-gradient(circle at 35% 34%,#ffab82 0 9%,transparent 32%), linear-gradient(145deg,#ffb08a 0%,#f26a43 30%,#c73b24 58%,#7e1e17 80%,#43100f 100%); box-shadow: inset -9px -8px 13px rgba(38,5,4,.62), inset 5px 4px 10px rgba(255,235,220,.32), 0 0 0 1px rgba(255,130,94,.70), 0 7px 16px rgba(0,0,0,.62), 0 0 22px rgba(255,72,39,.28); } .couplina-header .main-nav .nav-link.nav-png-only::after{ border-color:rgba(255,120,91,.20); box-shadow:inset 0 0 13px rgba(255,116,88,.08),0 0 12px rgba(255,75,43,.08); } .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit{ border-color:rgba(255,118,142,.16); box-shadow:inset 0 0 10px rgba(255,87,118,.05),0 0 10px rgba(255,74,100,.05); } .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit::before, .couplina-header .main-nav .nav-link.nav-png-only .heart-orbit::after{ color:rgba(255,128,151,.27); text-shadow:0 0 8px rgba(255,72,105,.22); } .couplina-header .main-nav .nav-link.nav-png-only:hover::before{ filter:saturate(1.10) brightness(1.08); box-shadow: inset -9px -8px 13px rgba(38,5,4,.58), inset 5px 4px 10px rgba(255,235,220,.36), 0 0 0 1px rgba(255,145,112,.86), 0 9px 20px rgba(0,0,0,.66), 0 0 28px rgba(255,72,39,.38); } .couplina-header .main-nav .nav-link.nav-png-only.active::before{ box-shadow: inset -9px -8px 13px rgba(38,5,4,.56), inset 5px 4px 10px rgba(255,235,220,.38), 0 0 0 2px rgba(255,159,128,.82), 0 9px 24px rgba(0,0,0,.68), 0 0 30px rgba(255,76,42,.40); } .couplina-header .main-nav .nav-link.nav-png-only.active::after{ border-color:rgba(255,164,136,.42); box-shadow:0 0 18px rgba(255,80,46,.28); } .couplina-header .main-nav .nav-link:nth-child(2)::before{filter:hue-rotate(-3deg) saturate(1.08)} .couplina-header .main-nav .nav-link:nth-child(3)::before{filter:hue-rotate(3deg) saturate(1.10)} .couplina-header .main-nav .nav-link:nth-child(4)::before{filter:hue-rotate(-6deg) brightness(.98) saturate(1.06)} .couplina-header .main-nav .nav-link:nth-child(5)::before{filter:hue-rotate(5deg) brightness(1.03) saturate(1.08)} .couplina-header .main-nav .nav-link:nth-child(6)::before{filter:hue-rotate(-2deg) brightness(1.0) saturate(1.08)} .couplina-header .main-nav .nav-link:nth-child(7)::before{filter:hue-rotate(4deg) saturate(1.12)} /* Endless autumn leaf overlay */ #autumnLeaves{ position:fixed;inset:0;width:100%;height:100%; pointer-events:none;z-index:8;display:block; } @media (prefers-reduced-motion: reduce){ #autumnLeaves{display:none} } /* ========================================================= COUPLINA — Compact Signature Footer ========================================================= */ .couplina-footer{position:relative;margin-top:0;min-height:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 14% 18%,rgba(255,99,61,.13),transparent 25%),radial-gradient(circle at 84% 12%,rgba(166,93,255,.10),transparent 23%),linear-gradient(160deg,#080303 0%,#12060b 48%,#090307 100%);border-top:1px solid rgba(255,151,119,.16);box-shadow:0 -25px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,215,150,.04)} .couplina-footer:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.32;background:linear-gradient(115deg,transparent 0 34%,rgba(255,102,71,.05) 35%,transparent 36% 67%,rgba(191,119,255,.04) 68%,transparent 69%),radial-gradient(circle at 50% -30%,rgba(255,183,105,.13),transparent 42%)} .couplina-footer:after{content:"";position:absolute;left:7%;right:7%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,186,123,.42),rgba(255,102,73,.62),rgba(255,186,123,.42),transparent);box-shadow:0 0 20px rgba(255,111,72,.25)} .footer-inner{width:min(1180px,90%);margin:auto;position:relative;z-index:2;padding:42px 0 17px} .footer-top{display:grid;grid-template-columns:1.05fr 1.15fr .95fr;gap:34px;align-items:center} .footer-brand,.footer-message,.footer-connect{position:relative} .footer-logo{display:inline-flex;align-items:center;gap:10px;color:#fff2e8;text-decoration:none} .footer-logo-ring{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;position:relative;background:linear-gradient(145deg,#2a0d09,#0c0304);border:1px solid rgba(255,168,127,.38);box-shadow:0 9px 24px rgba(0,0,0,.38),0 0 20px rgba(255,81,48,.10),inset 0 0 15px rgba(255,182,133,.07)} .footer-logo-ring:before{content:"";position:absolute;inset:-5px;border:1px solid rgba(255,155,123,.11);border-radius:20px;transform:rotate(7deg)} .footer-logo-ring img{width:37px;height:37px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(255,106,67,.20))} .footer-logo strong{display:block;font:800 22px Estedad,Vazirmatn,Tahoma,sans-serif;letter-spacing:-.03em}.footer-logo small{display:block;color:#c99f8e;font-size:8px;margin-top:1px} .footer-brand>p{color:#9f8177;font-size:10px;line-height:1.9;max-width:285px;margin:13px 0 10px}.footer-love-line{display:flex;align-items:center;gap:8px;color:#b97d67;font-size:7px;letter-spacing:.18em}.footer-love-line span{width:25px;height:1px;background:linear-gradient(90deg,transparent,#a85b44)}.footer-love-line span:last-child{background:linear-gradient(90deg,#a85b44,transparent)} .footer-kicker{color:#d77b61;font-size:7px;letter-spacing:.2em;font-weight:800}.footer-message{padding:18px 22px;border:1px solid rgba(255,173,129,.11);border-radius:22px;background:linear-gradient(135deg,rgba(255,129,88,.05),rgba(121,64,156,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 14px 38px rgba(0,0,0,.18)} .footer-message:before{content:"✦";position:absolute;right:18px;top:11px;color:#e7a45f;font-size:12px;opacity:.75;text-shadow:0 0 14px rgba(255,180,89,.45)}.footer-message h2{color:#f7e7df;font-size:25px;line-height:1.5;margin:7px 0 2px}.footer-message h2 em{font-style:normal;background:linear-gradient(100deg,#f4c477,#ff8766,#d9a4ff,#f4c477);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}.footer-message p{color:#9f8177;font-size:9px;margin:0} .footer-connect h3{font:800 17px Estedad,Vazirmatn,Tahoma,sans-serif;color:#f5e5dc;margin:7px 0 3px}.footer-connect p{font-size:8px;color:#92766e;line-height:1.8;margin:0 0 11px}.footer-socials{display:flex;gap:7px;direction:ltr}.footer-social{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#e9c6b7;text-decoration:none;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,170,135,.14);box-shadow:0 7px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease}.footer-social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.footer-social svg .fill{fill:currentColor;stroke:none}.footer-social:hover{transform:translateY(-3px) scale(1.04);color:#fff2e9;border-color:rgba(255,172,132,.48);background:linear-gradient(145deg,rgba(190,72,50,.30),rgba(113,59,139,.16));box-shadow:0 10px 25px rgba(0,0,0,.35),0 0 20px rgba(255,93,59,.10)} .footer-orbit{position:absolute;pointer-events:none;border:1px solid rgba(255,134,100,.07);border-radius:50%;z-index:-1}.footer-orbit-one{width:430px;height:140px;left:-170px;top:80px;transform:rotate(-19deg)}.footer-orbit-two{width:350px;height:120px;right:-125px;top:18px;transform:rotate(27deg);border-color:rgba(199,126,255,.07)}.footer-glow{position:absolute;border-radius:50%;filter:blur(45px);pointer-events:none;z-index:-1}.footer-glow-one{width:140px;height:140px;left:-45px;bottom:-55px;background:rgba(255,81,48,.07)}.footer-glow-two{width:150px;height:150px;right:5%;top:-70px;background:rgba(146,82,219,.07)} .footer-divider{height:1px;position:relative;margin:28px 0 12px;background:linear-gradient(90deg,transparent,rgba(255,168,126,.18),transparent)}.footer-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#e39b73;font-size:11px;background:#100509;border:1px solid rgba(255,170,127,.14);box-shadow:0 0 16px rgba(255,102,70,.08)} .footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;color:#6f5a54;font-size:7.5px}.footer-bottom-links{display:flex;gap:8px;align-items:center}.footer-bottom a{color:#80665e;text-decoration:none;transition:color .2s ease}.footer-bottom a:hover{color:#e0aa91}.footer-bottom i{font-style:normal;color:#4f3d39}.footer-signature{text-align:left;color:#7e5d51;letter-spacing:.16em}.footer-signature span{color:#d99664;margin-right:5px} @media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:22px}.footer-message{grid-column:1/-1;grid-row:1}.footer-brand{grid-column:1}.footer-connect{grid-column:2}.footer-bottom{grid-template-columns:1fr auto;gap:9px}.footer-signature{display:none}} @media(max-width:560px){.footer-inner{width:88%;padding:32px 0 16px}.footer-top{display:flex;flex-direction:column;align-items:stretch;gap:19px}.footer-message{order:-1;padding:17px 18px}.footer-message h2{font-size:22px}.footer-connect,.footer-brand{text-align:center}.footer-logo{justify-content:center}.footer-brand>p{margin-left:auto;margin-right:auto}.footer-love-line{justify-content:center}.footer-socials{justify-content:center}.footer-bottom{display:flex;flex-direction:column;text-align:center;gap:8px}.footer-bottom-links{order:-1}.footer-orbit-one{left:-230px}.footer-orbit-two{right:-250px}} /* ========================================================= COUPLINA — Policy dialogs ========================================================= */ body.policy-open{overflow:hidden}.policy-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}.policy-modal.show{opacity:1;visibility:visible;pointer-events:auto}.policy-back{position:absolute;inset:0;background:rgba(10,3,8,.78);-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%)}.policy-box{position:relative;width:min(760px,100%);max-height:min(82vh,780px);overflow:hidden;border:1px solid rgba(255,177,137,.17);border-radius:28px;background:linear-gradient(145deg,rgba(29,9,18,.98),rgba(10,4,9,.99));box-shadow:0 35px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025) inset,0 0 55px rgba(204,91,123,.08);transform:translateY(18px) scale(.985);transition:transform .3s ease}.policy-modal.show .policy-box{transform:translateY(0) scale(1)}.policy-box:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 0%,rgba(217,130,177,.10),transparent 32%),radial-gradient(circle at 5% 100%,rgba(255,117,77,.07),transparent 28%)}.policy-head{position:relative;display:flex;gap:15px;align-items:flex-start;padding:25px 28px 17px;border-bottom:1px solid rgba(255,177,137,.10)}.policy-icon{flex:0 0 45px;width:45px;height:45px;display:grid;place-items:center;border-radius:15px;color:#f1bb9e;font-size:18px;background:linear-gradient(145deg,rgba(255,128,94,.15),rgba(166,93,255,.11));border:1px solid rgba(255,177,137,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.22)}.policy-eyebrow{font-size:7px;letter-spacing:.2em;color:#d77b61;font-weight:800}.policy-head h2{margin:5px 0 2px;color:#fae9e2;font-size:25px}.policy-head p{margin:0;color:#9f8177;font-size:9px;line-height:1.8}.policy-close{position:absolute;left:19px;top:18px;width:33px;height:33px;border:1px solid rgba(255,177,137,.12);border-radius:10px;background:rgba(255,255,255,.035);color:#dcb8aa;font-size:23px;line-height:1;cursor:pointer;transition:.2s;z-index:2}.policy-close:hover{color:#fff;background:rgba(255,105,72,.12);border-color:rgba(255,150,120,.35);transform:rotate(5deg)}.policy-scroll{position:relative;max-height:calc(min(82vh,780px) - 105px);overflow:auto;padding:7px 28px 24px;scrollbar-width:thin;scrollbar-color:rgba(210,124,113,.35) transparent}.policy-scroll section{padding:17px 0;border-bottom:1px solid rgba(255,177,137,.07)}.policy-scroll h3{color:#f2d6ca;font-size:13px;margin:0 0 7px}.policy-scroll p{color:#a88b82;font-size:10px;line-height:2.05;margin:0;text-align:justify}.policy-note{color:#8d7068;font-size:9px;line-height:1.9;background:rgba(255,128,94,.035);border:1px solid rgba(255,177,137,.08);padding:12px 14px!important;border-radius:14px;margin-top:15px}.policy-note strong{color:#c79d8c}@media(max-width:560px){.policy-modal{padding:10px}.policy-box{border-radius:22px;max-height:88vh}.policy-head{padding:20px 18px 14px;gap:11px}.policy-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px}.policy-head h2{font-size:21px}.policy-head p{font-size:8px}.policy-close{left:12px;top:12px;width:30px;height:30px}.policy-scroll{max-height:calc(88vh - 95px);padding:4px 18px 18px}.policy-scroll section{padding:14px 0}.policy-scroll h3{font-size:12px}.policy-scroll p{font-size:9px;line-height:2.1}} /* ========================================================= COUPLINA PRO FOOTER — premium compact system ========================================================= */ .couplina-footer-pro{overflow:hidden;background:linear-gradient(135deg,#0b0507 0%,#12070a 45%,#090407 100%);border-top:1px solid rgba(255,151,119,.16)} .couplina-footer-pro .footer-inner{width:min(1180px,92%);padding:34px 0 14px} .footer-noise{position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:radial-gradient(rgba(255,255,255,.7) .45px,transparent .55px);background-size:5px 5px;mix-blend-mode:screen} .footer-hero{display:grid;grid-template-columns:.82fr 1.55fr;gap:18px;align-items:stretch;margin-bottom:14px} .footer-brand-pro,.footer-cta-pro{position:relative;border:1px solid rgba(255,178,139,.10);border-radius:22px;background:linear-gradient(145deg,rgba(255,123,88,.045),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 42px rgba(0,0,0,.18)} .footer-brand-pro{padding:20px 21px;display:flex;flex-direction:column;justify-content:center} .footer-brand-pro .footer-logo{margin-bottom:9px}.footer-brand-pro>p{max-width:390px;margin:9px 0 12px;font-size:9px;line-height:1.9;color:#9c7d75} .footer-status,.footer-response{display:inline-flex;align-items:center;gap:7px;color:#92746d;font-size:7.5px;width:max-content}.status-dot{width:6px;height:6px;border-radius:50%;background:#77c89b;box-shadow:0 0 0 4px rgba(119,200,155,.08),0 0 12px rgba(119,200,155,.42);animation:couplinaPulse 2.4s ease-in-out infinite} @keyframes couplinaPulse{50%{opacity:.55;transform:scale(.82)}} .footer-cta-pro{padding:21px 24px;overflow:hidden}.footer-cta-pro:after{content:"";position:absolute;width:190px;height:190px;right:-75px;top:-105px;border-radius:50%;background:radial-gradient(circle,rgba(255,125,92,.13),transparent 68%);pointer-events:none}.footer-cta-pro h2{margin:5px 0 3px;color:#f9e7df;font-size:23px;line-height:1.55;letter-spacing:-.02em}.footer-cta-pro h2 em{font-style:normal;background:linear-gradient(90deg,#f6c47d,#ff8b6d,#d8a5ff,#f6c47d);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}.footer-cta-pro p{margin:0;color:#92766e;font-size:8.5px;line-height:1.9}.footer-cta-actions{display:flex;gap:7px;margin-top:12px}.footer-primary-cta,.footer-secondary-cta{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:8px 12px;text-decoration:none;font-size:8px;font-weight:800;transition:.25s ease}.footer-primary-cta{color:#2b0c0a;background:linear-gradient(135deg,#f6c078,#ff876b);box-shadow:0 8px 20px rgba(255,111,72,.13)}.footer-secondary-cta{color:#e6c7bc;border:1px solid rgba(255,178,139,.13);background:rgba(255,255,255,.025)}.footer-primary-cta:hover,.footer-secondary-cta:hover{transform:translateY(-2px);filter:brightness(1.06)} .footer-grid-pro{display:grid;grid-template-columns:1.15fr 1fr .95fr;gap:10px}.footer-panel{min-height:172px;padding:17px;border:1px solid rgba(255,178,139,.08);border-radius:18px;background:rgba(255,255,255,.018);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .25s ease,transform .25s ease,background .25s ease}.footer-panel:hover{border-color:rgba(255,170,130,.16);background:rgba(255,255,255,.026);transform:translateY(-2px)}.footer-panel-head{display:flex;gap:10px;align-items:center}.panel-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#efb294;background:linear-gradient(145deg,rgba(255,128,94,.12),rgba(164,91,225,.08));border:1px solid rgba(255,178,139,.10);font-size:12px}.footer-panel h3{font-size:12px;color:#f0dcd4;margin:2px 0 0}.footer-panel>p{font-size:8.5px;color:#90736b;line-height:1.95;margin:12px 0}.footer-mini-pills{display:flex;gap:5px;flex-wrap:wrap}.footer-mini-pills span{font-size:7px;color:#b28c7f;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,178,139,.08);background:rgba(255,255,255,.02)} .footer-contact-list{display:grid;gap:6px;margin-top:11px}.contact-card{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:7px 8px;border:1px solid rgba(255,178,139,.07);border-radius:10px;background:rgba(0,0,0,.13);color:#d9bbb0;text-decoration:none;text-align:right;cursor:pointer;transition:.2s ease}.contact-card:hover{border-color:rgba(255,178,139,.20);background:rgba(255,110,78,.045);transform:translateX(-2px)}.contact-icon{width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border-radius:8px;color:#efb18f;background:rgba(255,128,94,.08);font-size:11px}.contact-card span:nth-child(2){min-width:0;flex:1}.contact-card small{display:block;color:#80665f;font-size:6.5px;margin-bottom:2px}.contact-card b{display:block;color:#d9bbb0;font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.contact-card i{font-style:normal;color:#755a53;font-size:9px}.footer-socials-pro{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.footer-socials-pro .footer-social{width:auto;height:39px;display:flex;justify-content:center;gap:7px;border-radius:10px}.footer-socials-pro .footer-social span{font-size:7px}.footer-response{margin-top:10px}.footer-divider-pro{margin:14px 0 10px}.footer-bottom-pro{font-size:7px}.footer-copyright{color:#68534d}.footer-copyright span{color:#4d3c38;margin:0 4px}.footer-bottom-pro .footer-bottom-links{gap:7px}.footer-bottom-pro .footer-bottom-links a{color:#81675f}.footer-bottom-pro .footer-bottom-links a:hover{color:#e4b19b} @media(max-width:900px){.footer-hero{grid-template-columns:1fr}.footer-grid-pro{grid-template-columns:1fr 1fr}.footer-about-panel{grid-column:1/-1;min-height:auto}.footer-panel{min-height:160px}.footer-bottom-pro{grid-template-columns:1fr auto}.footer-signature{display:none}} @media(max-width:560px){.couplina-footer-pro .footer-inner{width:89%;padding:27px 0 13px}.footer-brand-pro,.footer-cta-pro{padding:17px}.footer-cta-pro h2{font-size:20px}.footer-cta-actions{flex-wrap:wrap}.footer-primary-cta,.footer-secondary-cta{flex:1;justify-content:center}.footer-grid-pro{display:flex;flex-direction:column;gap:8px}.footer-panel{min-height:auto;padding:15px}.footer-about-panel{display:none}.footer-contact-list{grid-template-columns:1fr}.footer-socials-pro{grid-template-columns:1fr 1fr}.footer-bottom-pro{display:flex;flex-direction:column;gap:8px;text-align:center}.footer-bottom-pro .footer-bottom-links{justify-content:center;order:-1}.footer-copyright{line-height:1.8}} @media(prefers-reduced-motion:reduce){.couplina-footer-pro *, .couplina-footer-pro *::before,.couplina-footer-pro *::after{animation:none!important;transition:none!important}} /* ========================================================= COUPLINA — HOME MINI DASHBOARD کاملاً فشرده و هم‌خانواده با طراحی فعلی؛ بدون دست زدن به هدر/فوتر ========================================================= */ .couplina-mini-dashboard{ width:min(1160px,90%); margin:12px auto 0; display:grid; grid-template-columns:1.05fr 1.75fr .95fr; gap:9px; position:relative; z-index:3; direction:rtl; } .mini-date-card,.mini-week-card,.mini-together-card{ min-height:112px; border:1px solid rgba(255,215,0,.18); background:linear-gradient(145deg,rgba(13,4,22,.90),rgba(92,42,18,.72)); border-radius:17px; box-shadow:0 12px 32px rgba(0,0,0,.20),0 0 24px rgba(255,148,89,.06); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); overflow:hidden; position:relative; } .mini-date-card:before,.mini-week-card:before,.mini-together-card:before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 85% 0%,rgba(255,215,0,.11),transparent 38%); } .mini-card-top{ height:27px;padding:8px 11px 0; display:flex;align-items:center;justify-content:space-between; position:relative;z-index:1; } .mini-kicker{ color:var(--yellow);font-size:8px;font-weight:900; letter-spacing:.10em;white-space:nowrap; } .mini-spark{color:var(--lilac2);font-size:12px} .mini-today-shell{display:flex;align-items:center;gap:10px;padding:3px 11px 0;position:relative;z-index:1} .mini-today-icon{width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;border-radius:11px;color:#fff;font-size:12px;background:linear-gradient(145deg,#e8834a,#9b4b31);box-shadow:0 8px 18px rgba(232,131,74,.20),inset 0 1px 0 rgba(255,255,255,.18);transform:rotate(-7deg)} .mini-today{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;white-space:nowrap} .mini-today strong{font:800 16px Estedad,Vazirmatn,Tahoma,sans-serif;color:#fff;letter-spacing:-.03em} .mini-today span{font:700 8px Vazirmatn;color:#f2c8b1} .mini-sync-status{display:flex;align-items:center;gap:5px;margin:6px 11px 0;color:#9e8177;font-size:6.5px;position:relative;z-index:1} .mini-sync-status i{width:5px;height:5px;border-radius:50%;background:#8bd6a4;box-shadow:0 0 8px rgba(139,214,164,.55)} .mini-sync-status.loading i{background:#f0c36d;box-shadow:0 0 8px rgba(240,195,109,.55);animation:miniPulse 1s infinite} .mini-sync-status.online i{background:#77e0a2} @keyframes miniPulse{50%{opacity:.35;transform:scale(.7)}} .mini-occasion{ margin:6px 11px 0;padding:5px 8px;border-radius:9px; background:linear-gradient(135deg,rgba(255,201,74,.10),rgba(232,131,74,.07));border:1px solid rgba(255,201,74,.13); display:flex;align-items:center;gap:6px;position:relative;z-index:1; color:#ffe0c4;font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } .mini-occasion span{color:var(--yellow);font-size:11px;flex:0 0 auto}.mini-occasion.has-event{background:linear-gradient(135deg,rgba(255,176,84,.14),rgba(204,91,123,.09));border-color:rgba(255,201,74,.22);box-shadow:0 0 20px rgba(255,163,84,.06)} .mini-week-head{ min-height:43px;padding:8px 13px 5px; display:flex;align-items:center;justify-content:space-between; position:relative;z-index:1; border-bottom:1px solid rgba(255,215,0,.08); } .mini-week-head .mini-kicker{ font-size:9px;letter-spacing:.14em; } .mini-gregorian-title{ display:flex;flex-direction:column;align-items:flex-start;gap:1px; direction:ltr;line-height:1;text-align:left; } .mini-gregorian-title b{ font:800 13px Estedad,Vazirmatn,Tahoma,sans-serif;color:#fff;letter-spacing:.01em; } .mini-gregorian-title span{ font:800 8px Vazirmatn;color:var(--yellow);letter-spacing:.16em; } .mini-week{ display:grid;grid-template-columns:repeat(7,1fr);gap:7px; padding:10px 12px 12px;position:relative;z-index:1; align-items:center; } .mini-day{ min-width:0;height:59px;border-radius:15px; border:1px solid rgba(255,215,0,.10); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;position:relative; transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease; } .mini-day small{font-family:Vazirmatn,sans-serif;font-size:7px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.48);line-height:1} .mini-day b{font:800 17px Estedad,Vazirmatn,Tahoma,sans-serif;color:#fff;line-height:1;direction:ltr} .mini-day.today{ background:linear-gradient(145deg,#E8834A,#7A3210); border:2px solid var(--yellow); border-radius:50%; width:59px;height:59px; justify-self:center; box-shadow:0 0 0 5px rgba(255,215,0,.075),0 0 28px rgba(232,131,74,.22),inset 0 0 18px rgba(255,255,255,.08); transform:scale(1.04); } .mini-day.today:before{ content:"";position:absolute;inset:-7px;border-radius:50%; border:1px solid rgba(255,215,0,.18); pointer-events:none; } .mini-day.today small,.mini-day.today b{color:#fff} .mini-day:not(.today):hover{ transform:translateY(-3px); border-color:rgba(255,215,0,.30); background:rgba(255,255,255,.075); box-shadow:0 8px 18px rgba(0,0,0,.16); } .mini-day.has-occasion:after{ content:"";width:4px;height:4px;border-radius:50%; background:var(--yellow);position:absolute;top:6px;left:6px; box-shadow:0 0 9px rgba(255,215,0,.7); } .mini-together-card{background:linear-gradient(145deg,rgba(122,50,16,.88),rgba(13,4,22,.90))} .mini-date-edit{ border:0;background:transparent;color:rgba(255,215,0,.75); font-size:12px;padding:0;line-height:1;cursor:pointer; } .mini-together-number{ display:flex;align-items:baseline;gap:5px;padding:1px 11px 0; position:relative;z-index:1; } .mini-together-number strong{font:800 30px Estedad,Vazirmatn,Tahoma,sans-serif;color:var(--yellow);line-height:1} .mini-together-number span{font-size:8px;color:#ffe0c4} .mini-together-label{ padding:4px 11px;color:var(--muted);font-size:7px; position:relative;z-index:1;white-space:nowrap; } .mini-hidden-date{ position:absolute;opacity:0;width:1px;height:1px;pointer-events:none; } @media(max-width:760px){ .couplina-mini-dashboard{grid-template-columns:1fr 1.35fr;gap:7px;margin-top:9px} .mini-together-card{grid-column:1/-1;min-height:83px} .mini-together-number{display:inline-flex} .mini-together-label{display:inline-block} } @media(max-width:480px){ .couplina-mini-dashboard{width:92%;grid-template-columns:1fr;gap:7px} .mini-date-card,.mini-week-card,.mini-together-card{min-height:95px} .mini-week-card{min-height:108px} .mini-week-head{height:32px;padding-top:6px} .mini-week{gap:3px;padding:5px 7px 8px} .mini-day{height:47px} .mini-day.today{width:47px;height:47px} .mini-day b{font-size:14px} .mini-today strong{font-size:16px} .mini-together-card{grid-column:auto} } /* v10 — polished Persian Today card */ .mini-today-shell{gap:12px;padding:4px 12px 0;align-items:center} .mini-today{gap:4px;white-space:normal;min-width:0;flex:1} .mini-today-line{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap} .mini-today-line strong{font:900 14px Estedad,Vazirmatn,Tahoma,sans-serif;color:#fff;line-height:1.35;white-space:nowrap} .mini-today-line b{font:800 13px Estedad,Vazirmatn,Tahoma,sans-serif;color:#ffd76a;line-height:1.35;white-space:nowrap} .mini-date-separator{font:900 12px Vazirmatn;color:#e8834a} .mini-today-caption{font:700 7.5px Vazirmatn;color:#d9aaa0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-occasion{min-height:28px;box-sizing:border-box;align-items:flex-start;line-height:1.8;white-space:normal;overflow:hidden;text-overflow:clip} .mini-occasion b{display:block;min-width:0;overflow-wrap:anywhere;word-break:normal;font-weight:800} .mini-sync-status{font-family:Vazirmatn,sans-serif} @media(max-width:480px){ .mini-today-line strong{font-size:13px} .mini-today-line b{font-size:12px} .mini-today-caption{font-size:7px} .mini-occasion{font-size:7px;line-height:1.75} } /* v11 — Today card: weekday only */ .mini-today-line{display:flex;align-items:center;justify-content:flex-start;min-width:0;white-space:nowrap} .mini-today-line strong{font:900 16px Estedad,Vazirmatn,Tahoma,sans-serif;color:#fff;line-height:1.45;white-space:nowrap} .mini-today-caption,.mini-date-separator,#miniJalaliDate{display:none!important} /* ========================================================= COUPLINA — RELATIONSHIP CALENDAR MODAL Visual refresh — warm glass / orange relationship calendar ========================================================= */ .relationship-calendar-modal{ position:fixed;inset:0;z-index:100; display:flex;align-items:center;justify-content:center; padding:14px;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility .28s ease; } .relationship-calendar-modal.show{opacity:1;visibility:visible;pointer-events:auto} .relationship-calendar-backdrop{ position:absolute;inset:0; background:rgba(20,7,4,.72); -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%); } .relationship-calendar-box{ --cal-gold:#ffd38a;--cal-orange:#ff6f18;--cal-deep:#210b08; width:min(620px,100%);max-height:min(900px,96vh);overflow:auto; position:relative;padding:30px 42px 25px; border:1px solid rgba(255,128,39,.62); border-radius:34px; color:#fff; background: repeating-linear-gradient(112deg,rgba(255,255,255,.025) 0 2px,transparent 2px 15px), radial-gradient(circle at 50% 8%,rgba(255,126,27,.30),transparent 34%), radial-gradient(circle at 100% 45%,rgba(255,70,8,.22),transparent 42%), linear-gradient(150deg,rgba(22,7,5,.99),rgba(82,20,7,.98) 54%,rgba(35,9,5,.99)); box-shadow:0 40px 110px rgba(0,0,0,.72),0 0 50px rgba(255,91,20,.13),0 0 0 1px rgba(255,255,255,.035) inset; transform:translateY(18px) scale(.97); transition:transform .32s cubic-bezier(.2,.8,.2,1); scrollbar-width:thin; scrollbar-color:rgba(255,143,51,.45) transparent; } .relationship-calendar-modal.show .relationship-calendar-box{transform:none} .relationship-calendar-box:before{ content:"";position:absolute;width:360px;height:360px;border-radius:50%; top:-210px;left:50%;transform:translateX(-50%); background:rgba(255,115,25,.10);filter:blur(20px);pointer-events:none; } .relationship-calendar-close{ position:absolute;top:17px;left:18px;z-index:4; width:36px;height:36px;border-radius:12px; border:1px solid rgba(255,170,91,.22); background:rgba(0,0,0,.18);color:#ffd59d; font-size:22px;line-height:1;cursor:pointer;opacity:.7; transition:.2s ease; } .relationship-calendar-close:hover{transform:rotate(8deg);background:rgba(255,102,24,.18);border-color:rgba(255,185,105,.45);opacity:1} .relationship-calendar-orbit{position:absolute;border:1px solid rgba(255,153,69,.09);border-radius:50%;pointer-events:none} .relationship-calendar-orbit.orbit-a{width:320px;height:130px;right:-170px;top:60px;transform:rotate(-25deg)} .relationship-calendar-orbit.orbit-b{width:210px;height:210px;left:-125px;bottom:-105px;border-color:rgba(255,102,30,.12)} /* Month symbol + title area */ .relationship-calendar-head{ position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center; gap:5px;padding:5px 0 18px;text-align:right; } .relationship-month-symbol{ width:auto;height:auto;min-width:0;flex:0 0 auto; display:block;border:0;background:none;box-shadow:none; font-size:43px;line-height:1; filter:drop-shadow(0 8px 14px rgba(255,103,23,.32)); } .relationship-calendar-kicker,.relationship-calendar-head p{display:none} .relationship-calendar-head h2{ font-size:0;line-height:1;margin:0;color:#fff;font-weight:900; } .relationship-calendar-head h2:after{content:"انتخاب تاریخ شروع";font-size:11px;color:rgba(255,226,194,.65);font-weight:700} /* Month and year controls */ .relationship-selectors{ position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:4px; margin:0 0 22px; } .relationship-selector{ padding:0;background:transparent;border:0;border-radius:0; } .relationship-selector>span{display:none} .relationship-control{display:flex;align-items:center;justify-content:center;gap:16px} .relationship-control strong{ font:900 28px Estedad,Vazirmatn,Tahoma,sans-serif;color:#fff;min-width:130px;flex:0 0 auto;text-align:center; text-shadow:0 4px 16px rgba(0,0,0,.25); } .relationship-control button{ width:64px;height:64px;border-radius:19px; border:1px solid rgba(255,135,48,.50); background:linear-gradient(145deg,rgba(255,122,27,.12),rgba(255,255,255,.025)); color:#ffd08e; font:800 39px Vazirmatn;display:grid;place-items:center;padding:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 9px 24px rgba(0,0,0,.12); transition:.2s ease; } .relationship-control button:hover{background:rgba(255,102,24,.22);border-color:rgba(255,177,93,.75);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,82,16,.16)} .relationship-year-control{margin-top:-1px;gap:11px} .relationship-year-control strong{font-size:17px;min-width:76px;color:#f7e7d3} .relationship-year-control button{width:48px;height:48px;border-radius:15px;font-size:25px} /* Divider and Persian weekdays */ .relationship-calendar-weekdays{ display:grid;grid-template-columns:repeat(7,1fr);gap:5px; padding:31px 2px 9px;position:relative;z-index:1; border-top:2px solid rgba(255,113,28,.55); } .relationship-calendar-weekdays:before{ content:"✦";position:absolute;top:-17px;left:50%;transform:translateX(-50%); width:31px;height:31px;border-radius:50%;display:grid;place-items:center; background:#210a06;border:1px solid rgba(255,118,31,.75); color:#ff9a43;font-size:11px;box-shadow:0 0 0 5px rgba(40,10,5,.65); } .relationship-calendar-weekdays span{ text-align:center;color:#e7b18a;font-size:10px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.28) } /* Days */ .relationship-calendar-grid{ position:relative;z-index:1; display:grid;grid-template-columns:repeat(7,1fr);gap:8px; padding:3px 0 22px; } .relationship-day{ min-height:64px;border-radius:17px; border:1px solid rgba(255,124,40,.20); background:rgba(55,16,8,.28);color:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;cursor:pointer;transition:.2s ease;font-family:Vazirmatn,Tahoma,sans-serif; box-shadow:inset 0 0 0 1px rgba(255,255,255,.018); } .relationship-day .day-main{display:flex;align-items:center;justify-content:center;gap:3px;min-height:24px} .relationship-day .day-number{font:900 17px Estedad,Vazirmatn,Tahoma,sans-serif;color:#f7eee7} .relationship-day i{font-style:normal;font-size:7px;color:#ffc778} .relationship-day.monthly-anniversary{ border-color:rgba(255,145,61,.48); background:linear-gradient(145deg,rgba(120,35,12,.48),rgba(255,103,28,.10)); } .relationship-day.monthly-anniversary .day-number{ display:inline-flex;align-items:center;justify-content:center; } .relationship-day .anniversary-heart{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-inline-start:4px; font-family:Arial,sans-serif; font-size:15px; line-height:1; color:#ff7a45; text-shadow:0 0 10px rgba(255,93,42,.65); transform-origin:center; animation:monthlyHeartPulse 1.15s ease-in-out infinite; } .relationship-day.monthly-anniversary .day-main{ min-height:28px; } .relationship-day.monthly-anniversary .anniversary-heart{ animation:monthlyHeartPulse 1.05s ease-in-out infinite; } .relationship-day.selected .anniversary-heart{ color:#fff1dc; text-shadow:0 0 12px rgba(255,210,160,.8); } @keyframes monthlyHeartPulse{ 0%,100%{transform:scale(1);opacity:.78} 50%{transform:scale(1.22);opacity:1} } @media (prefers-reduced-motion:reduce){ .relationship-day .anniversary-heart{animation:none} } .relationship-day:hover{ transform:translateY(-2px);border-color:rgba(255,145,61,.55); background:rgba(255,108,25,.12);box-shadow:0 10px 22px rgba(0,0,0,.18) } .relationship-day.empty{background:transparent;border-color:transparent;cursor:default;box-shadow:none} .relationship-day.today{ border-color:rgba(255,151,67,.42);box-shadow:inset 0 0 0 1px rgba(255,151,67,.09) } .relationship-day.selected{ min-height:70px; background:linear-gradient(145deg,#ff7d24,#f04c0e); border:2px solid #ffd39a;color:#fff; box-shadow:0 0 0 4px rgba(255,108,24,.16),0 8px 25px rgba(255,77,9,.36),0 0 32px rgba(255,107,20,.38); transform:translateY(-1px); } .relationship-day.selected .day-number{font-size:20px;text-shadow:0 2px 7px rgba(0,0,0,.25)} /* Bottom actions */ .relationship-selected-row{ position:relative;z-index:1;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px; padding-top:18px;border-top:1px solid rgba(255,126,46,.34); } .relationship-selected-date{min-width:0} .relationship-selected-date span{display:none} .relationship-selected-date strong{display:block;font:800 11px Estedad,Vazirmatn,Tahoma,sans-serif;color:#ffe2c1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .relationship-today-btn,.relationship-clear-btn{ height:38px;padding:0 14px;border-radius:12px;font-size:10px;font-weight:900;cursor:pointer;transition:.2s ease; } .relationship-today-btn{border:0;background:transparent;color:#ffe4c7;order:3} .relationship-clear-btn{border:0;background:transparent;color:#ffe4c7;order:1} .relationship-today-btn:hover,.relationship-clear-btn:hover{transform:translateY(-2px);color:#fff;background:rgba(255,119,32,.10)} body.relationship-calendar-open{overflow:hidden} @media(max-width:520px){ .relationship-calendar-modal{padding:8px} .relationship-calendar-box{padding:25px 12px 18px;border-radius:28px;max-height:97vh} .relationship-calendar-close{top:12px;left:12px;width:32px;height:32px} .relationship-month-symbol{font-size:38px} .relationship-selectors{margin-bottom:18px} .relationship-control{gap:8px} .relationship-control strong{font-size:23px;min-width:110px} .relationship-control button{width:55px;height:55px;border-radius:17px} .relationship-year-control strong{font-size:16px;min-width:68px} .relationship-year-control button{width:44px;height:44px;border-radius:14px} .relationship-calendar-weekdays{gap:2px;padding-top:28px} .relationship-calendar-weekdays span{font-size:8px} .relationship-calendar-grid{gap:5px} .relationship-day{min-height:55px;border-radius:14px} .relationship-day span{font-size:15px} .relationship-day.selected{min-height:61px} .relationship-day.selected span{font-size:18px} .relationship-selected-row{grid-template-columns:1fr auto auto;gap:3px} .relationship-today-btn,.relationship-clear-btn{padding:0 9px} } /* v14 — inline relationship calendar: opens directly under the "با هم از" card */ .mini-together-card{overflow:visible;z-index:20} .relationship-calendar-modal{ position:absolute;inset:auto 0 auto 0;top:calc(100% + 10px); width:100%;padding:0;display:block;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px);transition:opacity .22s ease,visibility .22s ease,transform .22s ease; z-index:50; } .relationship-calendar-modal.show{opacity:1;visibility:visible;pointer-events:auto;transform:none} .relationship-calendar-box{ width:100%;max-height:none;overflow:visible;box-sizing:border-box; padding:25px 26px 20px;border-radius:24px; transform:none!important; box-shadow:0 22px 55px rgba(0,0,0,.38),0 0 32px rgba(255,91,20,.12); } .relationship-calendar-close{display:none} .relationship-calendar-head{padding:2px 0 12px;gap:4px} .relationship-month-symbol{height:48px;display:grid;place-items:center} .relationship-month-symbol svg{width:48px;height:48px;overflow:visible;filter:drop-shadow(0 7px 10px rgba(255,103,23,.28))} .relationship-month-symbol svg .stem,.relationship-month-symbol svg .vein,.relationship-month-symbol svg .ray,.relationship-month-symbol svg .snow{fill:none;stroke:#f5b16b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .relationship-month-symbol svg .leaf,.relationship-month-symbol svg .bud{fill:#b96a3b;stroke:#f2ad6b;stroke-width:1.1} .relationship-month-symbol svg .petal{fill:#d97b4e;stroke:#ffd39a;stroke-width:1} .relationship-month-symbol svg .core{fill:#f7c56f} .relationship-month-symbol svg .sun{fill:#f7a947;stroke:#ffd795;stroke-width:1.5} .relationship-month-symbol svg .grain{fill:#d9a052} .relationship-month-symbol svg .drop{fill:#77a8bd;stroke:#c3e4ef;stroke-width:1} .relationship-month-symbol svg .fruit{fill:#b84d32;stroke:#f2a15d;stroke-width:1.3} .relationship-month-symbol svg .seed{fill:#ffd39a} .relationship-month-symbol svg .snow-dot{fill:#e7f6ff} .relationship-calendar-head h2:after{font-size:10px} .relationship-selectors{grid-template-columns:1fr;gap:1px;margin-bottom:16px} .relationship-control{gap:10px} .relationship-control strong{font-size:24px;min-width:120px} .relationship-control button{width:50px;height:50px;border-radius:16px} .relationship-year-control{gap:8px} .relationship-year-control strong{font-size:16px;min-width:65px} .relationship-year-control button{width:42px;height:42px;border-radius:13px} .relationship-calendar-weekdays{padding-top:26px} .relationship-calendar-grid{gap:6px;padding-bottom:17px} .relationship-day{min-height:54px;border-radius:15px} .relationship-day.selected{min-height:60px} .relationship-selected-row{padding-top:14px} body.relationship-calendar-open{overflow:visible} @media(max-width:760px){ .mini-together-card{position:relative} .relationship-calendar-box{padding:22px 15px 17px;border-radius:22px} } @media(max-width:480px){ .relationship-calendar-modal{top:calc(100% + 8px)} .relationship-calendar-box{padding:20px 10px 15px} .relationship-month-symbol{height:43px} .relationship-month-symbol svg{width:43px;height:43px} .relationship-control{gap:5px} .relationship-control strong{font-size:20px;min-width:100px} .relationship-control button{width:45px;height:45px;border-radius:14px} .relationship-year-control strong{font-size:15px;min-width:60px} .relationship-year-control button{width:39px;height:39px} .relationship-calendar-weekdays{padding-top:24px} .relationship-calendar-weekdays span{font-size:8px} .relationship-calendar-grid{gap:4px} .relationship-day{min-height:48px;border-radius:12px} .relationship-day.selected{min-height:54px} .relationship-day span{font-size:14px} .relationship-day.selected span{font-size:17px} } /* v15 — wider + shorter relationship calendar, ungrouped Persian year */ @media(min-width:521px){ .relationship-calendar-modal{ width:min(760px,calc(100vw - 28px)); left:50%;right:auto; transform:translate(-50%,-8px); } .relationship-calendar-modal.show{transform:translate(-50%,0)} .relationship-calendar-box{padding:18px 30px 14px;border-radius:25px} .relationship-calendar-head{padding:0 0 7px;gap:2px} .relationship-month-symbol{height:40px} .relationship-month-symbol svg{width:40px;height:40px} .relationship-selectors{margin-bottom:10px;gap:0} .relationship-control{gap:12px} .relationship-control strong{font-size:22px;min-width:125px} .relationship-control button{width:48px;height:48px;border-radius:15px} .relationship-year-control{margin-top:-2px;gap:7px} .relationship-year-control strong{font-size:15px;min-width:62px} .relationship-year-control button{width:39px;height:39px;border-radius:12px} .relationship-calendar-weekdays{padding-top:20px;padding-bottom:6px} .relationship-calendar-grid{gap:5px;padding:2px 0 11px} .relationship-day{min-height:43px;border-radius:13px} .relationship-day.selected{min-height:48px} .relationship-day span{font-size:15px} .relationship-day.selected span{font-size:18px} .relationship-day i{font-size:6px} .relationship-selected-row{padding-top:10px;gap:7px} .relationship-today-btn,.relationship-clear-btn{height:32px;padding:0 12px} } @media(max-width:520px){ .relationship-calendar-box{padding:17px 9px 12px} .relationship-calendar-head{padding-bottom:5px} .relationship-month-symbol{height:38px} .relationship-month-symbol svg{width:38px;height:38px} .relationship-selectors{margin-bottom:9px} .relationship-control{gap:4px} .relationship-control strong{font-size:19px;min-width:94px} .relationship-control button{width:43px;height:43px;border-radius:13px} .relationship-year-control strong{font-size:14px;min-width:56px} .relationship-year-control button{width:37px;height:37px} .relationship-calendar-weekdays{padding-top:19px;padding-bottom:5px} .relationship-calendar-grid{gap:3px;padding-bottom:10px} .relationship-day{min-height:43px;border-radius:11px} .relationship-day.selected{min-height:48px} .relationship-day span{font-size:13px} .relationship-day.selected span{font-size:16px} .relationship-selected-row{padding-top:9px} } /* v16 — compact inline calendar + centered controls + close-on-selection/outside */ .relationship-calendar-modal{ width:min(500px,calc(100vw - 24px)); left:50%;right:auto; transform:translate(-50%,-8px); } .relationship-calendar-modal.show{transform:translate(-50%,0)} .relationship-calendar-box{ padding:15px 16px 12px; border-radius:20px; } .relationship-calendar-head{padding:0 0 5px;gap:1px} .relationship-month-symbol{height:34px} .relationship-month-symbol svg{width:34px;height:34px} .relationship-control{gap:7px} .relationship-control button{ width:42px;height:42px;border-radius:12px; display:grid;place-items:center; line-height:1; padding:0; font-family:Vazirmatn,sans-serif; font-size:28px; } .relationship-control button:first-child{padding-bottom:2px} .relationship-year-control button{width:35px;height:35px;border-radius:10px;font-size:21px} .relationship-control strong{font-size:19px;min-width:92px} .relationship-year-control strong{font-size:14px;min-width:55px} .relationship-selectors{margin-bottom:7px} .relationship-calendar-weekdays{padding-top:16px;padding-bottom:4px} .relationship-calendar-weekdays span{font-size:8px} .relationship-calendar-grid{gap:3px;padding:2px 0 8px} .relationship-day{min-height:40px;border-radius:10px} .relationship-day.selected{min-height:45px} .relationship-day span{font-size:13px} .relationship-day.selected span{font-size:15px} .relationship-day i{font-size:5px} .relationship-selected-row{padding-top:7px;gap:4px} .relationship-today-btn,.relationship-clear-btn{height:29px;padding:0 9px;font-size:9px} @media(max-width:520px){ .relationship-calendar-modal{width:min(500px,calc(100vw - 20px))} .relationship-calendar-box{padding:13px 8px 10px;border-radius:18px} .relationship-month-symbol{height:32px} .relationship-month-symbol svg{width:32px;height:32px} .relationship-control{gap:4px} .relationship-control strong{font-size:18px;min-width:88px} .relationship-control button{width:39px;height:39px;border-radius:11px;font-size:25px} .relationship-year-control strong{font-size:13px;min-width:52px} .relationship-year-control button{width:33px;height:33px;border-radius:9px;font-size:20px} .relationship-calendar-weekdays{padding-top:15px} .relationship-calendar-grid{gap:3px} .relationship-day{min-height:38px;border-radius:9px} .relationship-day.selected{min-height:42px} .relationship-day span{font-size:12px} .relationship-day.selected span{font-size:14px} } /* v17 — refined monthly symbols + Couplina mark + fiery selected date */ .relationship-calendar-weekdays:before{ content:""; background:url('couplina-logo.png') center/contain no-repeat; background-color:#210a06; padding:0; } .relationship-month-symbol svg .tulip, .relationship-month-symbol svg .butterfly, .relationship-month-symbol svg .cloud, .relationship-month-symbol svg .holly, .relationship-month-symbol svg .fish, .relationship-month-symbol svg .berry, .relationship-month-symbol svg .antenna{ stroke:#f5b16b;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round; } .relationship-month-symbol svg .tulip{fill:#c96849} .relationship-month-symbol svg .butterfly{fill:#c87950} .relationship-month-symbol svg .antenna{fill:none} .relationship-month-symbol svg .cloud{fill:#7f695d} .relationship-month-symbol svg .holly{fill:#6f5a45} .relationship-month-symbol svg .berry{fill:#d76a43;stroke:#ffd39a;stroke-width:1} .relationship-month-symbol svg .fish{fill:#b96f55} .relationship-day.selected{ position:relative; isolation:isolate; overflow:visible; background:linear-gradient(145deg,#ff8a2d 0%,#ff5b16 48%,#d92f08 100%); border-color:#ffe0ac; box-shadow: 0 0 0 3px rgba(255,155,55,.20), 0 0 12px rgba(255,96,20,.72), 0 0 28px rgba(255,67,10,.58), 0 10px 22px rgba(180,35,4,.30), inset 0 0 16px rgba(255,223,150,.20); animation:relationshipFlamePulse 1.35s ease-in-out infinite; } .relationship-day.selected:before, .relationship-day.selected:after{ content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:46% 54% 52% 48%; filter:blur(5px); opacity:.78; animation:relationshipFlame 1.05s ease-in-out infinite alternate; } .relationship-day.selected:before{ inset:-7px -4px -9px; background: radial-gradient(ellipse at 50% 100%,rgba(255,52,4,.82) 0 25%,transparent 57%), radial-gradient(ellipse at 20% 55%,rgba(255,143,31,.65) 0 15%,transparent 42%), radial-gradient(ellipse at 82% 50%,rgba(255,93,13,.60) 0 14%,transparent 40%); transform:scaleY(1.06) rotate(-2deg); } .relationship-day.selected:after{ inset:-10px -8px -12px; background: radial-gradient(ellipse at 50% 12%,rgba(255,213,116,.72) 0 8%,transparent 25%), radial-gradient(ellipse at 38% 0%,rgba(255,115,18,.55) 0 11%,transparent 31%), radial-gradient(ellipse at 68% 6%,rgba(255,78,7,.48) 0 10%,transparent 29%); transform:scale(.92) rotate(2deg); filter:blur(6px); opacity:.7; animation-duration:.8s; } .relationship-day.selected span, .relationship-day.selected i{position:relative;z-index:2} @keyframes relationshipFlamePulse{ 0%,100%{box-shadow:0 0 0 3px rgba(255,155,55,.18),0 0 12px rgba(255,96,20,.66),0 0 25px rgba(255,67,10,.48),0 10px 22px rgba(180,35,4,.28),inset 0 0 14px rgba(255,223,150,.16)} 50%{box-shadow:0 0 0 4px rgba(255,177,74,.24),0 0 18px rgba(255,110,25,.86),0 0 36px rgba(255,67,10,.68),0 12px 26px rgba(180,35,4,.34),inset 0 0 19px rgba(255,236,172,.24)} } @keyframes relationshipFlame{ from{transform:translateY(2px) scale(.94) rotate(-2deg);opacity:.55} to{transform:translateY(-2px) scale(1.04) rotate(2deg);opacity:.9} } /* Azar — subtle fire symbol */ .relationship-month-symbol .fire { fill:#d97b4e; stroke:#ffd39a; stroke-width:1.1; stroke-linejoin:round; } .relationship-month-symbol .fire-inner { fill:#f7c56f; opacity:1; } /* v19: clean directional month arrows + refined Azar fire icon */ .relationship-control button{font-family:Vazirmatn, sans-serif;font-size:31px;font-weight:800;line-height:1;direction:ltr;unicode-bidi:isolate;} .relationship-control button#relationshipNextMonth,.relationship-control button#relationshipPrevMonth{display:grid;place-items:center;} .relationship-month-symbol svg{width:46px;height:46px;display:block;overflow:visible;} .relationship-month-symbol .fire{fill:#d97b4e;stroke:#ffd39a;stroke-width:1.1;filter:drop-shadow(0 4px 7px rgba(255,103,23,.20));} .relationship-month-symbol .fire-inner{fill:#f7c56f;} .relationship-month-symbol .fire-highlight{fill:#fff0c7;opacity:.85;} /* Final positioning: start-date label left, monthly symbol stays centered */ .relationship-calendar-head{ position:relative; align-items:stretch; text-align:left; } .relationship-calendar-head h2{ align-self:flex-start; text-align:left; direction:rtl; } .relationship-month-symbol{ position:absolute; left:50%; top:2px; transform:translateX(-50%); margin:0; } /* Enhanced monthly-anniversary effect */ .relationship-day.monthly-anniversary{ position:relative; overflow:hidden; border-color:rgba(255,139,72,.72); background: radial-gradient(circle at 50% 42%,rgba(255,105,55,.20),transparent 52%), linear-gradient(145deg,rgba(120,35,12,.52),rgba(255,103,28,.13)); box-shadow: inset 0 0 0 1px rgba(255,188,130,.08), 0 0 18px rgba(255,93,42,.13); } .relationship-day.monthly-anniversary::before{ content:""; position:absolute; width:42px;height:42px; left:50%;top:50%; border:1px solid rgba(255,151,92,.22); border-radius:50%; transform:translate(-50%,-50%) scale(.72); animation:anniversaryRing 2.2s ease-out infinite; pointer-events:none; } .relationship-day.monthly-anniversary::after{ content:"✦ · ✦"; position:absolute; top:6px;right:8px; color:rgba(255,190,130,.72); font-size:7px; letter-spacing:2px; animation:anniversarySparkle 1.8s ease-in-out infinite; pointer-events:none; } .relationship-day.monthly-anniversary .anniversary-heart{ position:relative; width:20px;height:20px; margin-inline-start:5px; font-size:16px; color:#ff7450; filter:drop-shadow(0 0 4px rgba(255,84,42,.75)); text-shadow:0 0 7px rgba(255,93,42,.75),0 0 16px rgba(255,70,30,.45); animation:anniversaryHeart 1.35s cubic-bezier(.34,1.56,.64,1) infinite; z-index:2; } .relationship-day.monthly-anniversary .anniversary-heart::before, .relationship-day.monthly-anniversary .anniversary-heart::after{ content:"✦"; position:absolute; font-size:6px; color:#ffd0ad; opacity:0; animation:anniversaryTinySpark 1.35s ease-in-out infinite; } .relationship-day.monthly-anniversary .anniversary-heart::before{left:-6px;top:1px} .relationship-day.monthly-anniversary .anniversary-heart::after{right:-5px;bottom:0;animation-delay:.25s} .relationship-day.monthly-anniversary:hover{ border-color:rgba(255,174,116,.9); box-shadow: inset 0 0 0 1px rgba(255,220,190,.12), 0 0 24px rgba(255,93,42,.25), 0 8px 22px rgba(0,0,0,.22); } .relationship-day.selected.monthly-anniversary{ border-color:rgba(255,201,157,.88); background: radial-gradient(circle at 50% 40%,rgba(255,165,105,.28),transparent 55%), linear-gradient(145deg,rgba(142,43,14,.62),rgba(255,103,28,.16)); } @keyframes anniversaryHeart{ 0%,100%{transform:scale(1) rotate(0deg);opacity:.86} 18%{transform:scale(1.16) rotate(-3deg);opacity:1} 34%{transform:scale(.98) rotate(2deg)} 50%{transform:scale(1.22) rotate(-2deg);opacity:1} 68%{transform:scale(1.03) rotate(1deg)} } @keyframes anniversaryRing{ 0%{transform:translate(-50%,-50%) scale(.55);opacity:.7} 65%{transform:translate(-50%,-50%) scale(1.25);opacity:.08} 100%{transform:translate(-50%,-50%) scale(1.4);opacity:0} } @keyframes anniversarySparkle{ 0%,100%{opacity:.28;transform:translateY(0) scale(.9)} 50%{opacity:.95;transform:translateY(-2px) scale(1.08)} } @keyframes anniversaryTinySpark{ 0%,100%{opacity:0;transform:scale(.5) rotate(0)} 45%{opacity:1;transform:scale(1.15) rotate(35deg)} 75%{opacity:0;transform:scale(.7) rotate(70deg)} } @media (prefers-reduced-motion:reduce){ .relationship-day.monthly-anniversary::before, .relationship-day.monthly-anniversary::after, .relationship-day.monthly-anniversary .anniversary-heart, .relationship-day.monthly-anniversary .anniversary-heart::before, .relationship-day.monthly-anniversary .anniversary-heart::after{animation:none} } /* Luxury anniversary animation — premium app style */ .relationship-day.monthly-anniversary{ isolation:isolate; border:1px solid rgba(255,183,128,.72); background: radial-gradient(circle at 50% 35%,rgba(255,205,165,.22),transparent 30%), radial-gradient(circle at 50% 70%,rgba(255,73,35,.18),transparent 58%), linear-gradient(145deg,rgba(92,24,10,.66),rgba(255,104,45,.11)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), inset 0 -12px 25px rgba(255,70,30,.07), 0 0 0 1px rgba(255,130,76,.08), 0 0 22px rgba(255,85,42,.16); animation:luxuryAnniversaryGlow 3.8s ease-in-out infinite; } .relationship-day.monthly-anniversary::before{ width:52px;height:52px; border:1px solid rgba(255,193,151,.34); box-shadow:0 0 14px rgba(255,110,62,.12),inset 0 0 10px rgba(255,183,128,.06); animation:luxuryRing 2.8s cubic-bezier(.22,.61,.36,1) infinite; } .relationship-day.monthly-anniversary::after{ content:"✦ · ✧ · ✦"; top:5px;right:7px; color:rgba(255,211,180,.78); font-size:7px; letter-spacing:2px; text-shadow:0 0 7px rgba(255,154,105,.6); animation:luxurySparkle 2.25s ease-in-out infinite; } .relationship-day.monthly-anniversary .day-main{ position:relative; z-index:3; } .relationship-day.monthly-anniversary .day-number{ text-shadow:0 1px 0 rgba(0,0,0,.28),0 0 10px rgba(255,190,145,.14); } .relationship-day.monthly-anniversary .anniversary-heart{ width:22px;height:22px; margin-inline-start:5px; font-size:17px; color:#ff8a63; filter:drop-shadow(0 2px 3px rgba(0,0,0,.24)); text-shadow: 0 0 5px rgba(255,132,91,.95), 0 0 12px rgba(255,76,38,.78), 0 0 24px rgba(255,60,28,.38); animation:luxuryHeart 1.65s cubic-bezier(.34,1.56,.64,1) infinite; } .relationship-day.monthly-anniversary .anniversary-heart::before, .relationship-day.monthly-anniversary .anniversary-heart::after{ content:"✦"; font-size:6px; color:#ffe6d4; text-shadow:0 0 7px rgba(255,190,150,.9); animation:luxuryTinySpark 1.7s ease-in-out infinite; } .relationship-day.monthly-anniversary .anniversary-heart::before{left:-8px;top:-1px} .relationship-day.monthly-anniversary .anniversary-heart::after{right:-7px;bottom:-2px;animation-delay:.52s} .relationship-day.monthly-anniversary:hover{ transform:translateY(-3px) scale(1.018); border-color:rgba(255,216,187,.94); box-shadow: inset 0 0 0 1px rgba(255,240,226,.12), 0 0 28px rgba(255,91,44,.28), 0 10px 28px rgba(0,0,0,.25); } .relationship-day.selected.monthly-anniversary{ border-color:rgba(255,222,198,.96); box-shadow: inset 0 0 0 1px rgba(255,245,235,.13), inset 0 0 22px rgba(255,122,75,.10), 0 0 30px rgba(255,91,44,.28); } @keyframes luxuryAnniversaryGlow{ 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),inset 0 -12px 25px rgba(255,70,30,.07),0 0 0 1px rgba(255,130,76,.08),0 0 18px rgba(255,85,42,.13)} 50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 -12px 25px rgba(255,70,30,.11),0 0 0 1px rgba(255,155,108,.12),0 0 28px rgba(255,85,42,.23)} } @keyframes luxuryHeart{ 0%,100%{transform:translateY(0) scale(.94) rotate(0);opacity:.88} 18%{transform:translateY(-1px) scale(1.08) rotate(-4deg);opacity:1} 34%{transform:translateY(0) scale(.98) rotate(2deg)} 52%{transform:translateY(-2px) scale(1.25) rotate(-2deg);opacity:1} 66%{transform:translateY(0) scale(1.03) rotate(1deg)} 82%{transform:translateY(-1px) scale(1.10) rotate(-1deg)} } @keyframes luxuryRing{ 0%{transform:translate(-50%,-50%) scale(.48);opacity:.62} 55%{transform:translate(-50%,-50%) scale(1.06);opacity:.22} 100%{transform:translate(-50%,-50%) scale(1.48);opacity:0} } @keyframes luxurySparkle{ 0%,100%{opacity:.22;transform:translateY(1px) scale(.82) rotate(0)} 35%{opacity:.72;transform:translateY(-1px) scale(1) rotate(8deg)} 52%{opacity:1;transform:translateY(-2px) scale(1.14) rotate(-5deg)} 70%{opacity:.45;transform:translateY(0) scale(.92) rotate(3deg)} } @keyframes luxuryTinySpark{ 0%,100%{opacity:0;transform:scale(.35) rotate(0)} 30%{opacity:.15;transform:scale(.6) rotate(18deg)} 52%{opacity:1;transform:scale(1.3) rotate(50deg)} 76%{opacity:0;transform:scale(.55) rotate(95deg)} } @media (prefers-reduced-motion:reduce){ .relationship-day.monthly-anniversary, .relationship-day.monthly-anniversary::before, .relationship-day.monthly-anniversary::after, .relationship-day.monthly-anniversary .anniversary-heart, .relationship-day.monthly-anniversary .anniversary-heart::before, .relationship-day.monthly-anniversary .anniversary-heart::after{animation:none} } /* Compact calendar panel — tighter professional layout */ .relationship-calendar-box{ padding:18px 20px 15px; border-radius:21px; } .relationship-calendar-head{padding:0 0 8px} .relationship-month-symbol{height:42px} .relationship-month-symbol svg{width:42px;height:42px} .relationship-selectors{margin-bottom:11px} .relationship-control{gap:8px} .relationship-control strong{font-size:21px;min-width:108px} .relationship-control button{width:44px;height:44px;border-radius:14px} .relationship-year-control{gap:7px} .relationship-year-control strong{font-size:15px;min-width:60px} .relationship-year-control button{width:38px;height:38px;border-radius:12px} .relationship-calendar-weekdays{padding-top:19px} .relationship-calendar-grid{gap:5px;padding-bottom:12px} .relationship-day{min-height:48px;border-radius:13px} .relationship-day.selected{min-height:53px} .relationship-selected-row{padding-top:10px} @media(max-width:760px){ .relationship-calendar-box{padding:17px 13px 14px;border-radius:20px} .relationship-month-symbol{height:40px} .relationship-month-symbol svg{width:40px;height:40px} } @media(max-width:480px){ .relationship-calendar-box{padding:16px 8px 13px} .relationship-month-symbol{height:38px} .relationship-month-symbol svg{width:38px;height:38px} .relationship-control{gap:4px} .relationship-control strong{font-size:19px;min-width:92px} .relationship-control button{width:42px;height:42px;border-radius:13px} .relationship-year-control strong{font-size:14px;min-width:56px} .relationship-year-control button{width:37px;height:37px;border-radius:11px} .relationship-calendar-weekdays{padding-top:19px} .relationship-calendar-grid{gap:3px} .relationship-day{min-height:45px;border-radius:11px} .relationship-day.selected{min-height:50px} .relationship-day span{font-size:14px} .relationship-day.selected span{font-size:16px} } /* COUPLINA FEATURE SLIDER v1 — added without changing existing components */ .cp-feature-slider{width:min(1160px,90%);margin:18px auto 22px;position:relative;z-index:3;direction:rtl} .cp-feature-slider:before{content:"";position:absolute;inset:8% 7%;border-radius:40px;background:radial-gradient(circle,rgba(255,215,0,.09),transparent 65%);filter:blur(24px);pointer-events:none} .cp-slider-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 5px 12px;position:relative} .cp-slider-kicker{display:block;color:rgba(255,215,125,.72);font-size:8px;font-weight:800;letter-spacing:.08em;margin-bottom:4px} .cp-slider-head h2{margin:0;color:#fff7ef;font:700 clamp(17px,2vw,24px) Estedad,Vazirmatn,Tahoma,sans-serif;letter-spacing:-.025em} .cp-slider-count{direction:rtl;color:rgba(255,255,255,.38);font:600 10px Estedad,Vazirmatn,Tahoma,sans-serif;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035)}.cp-slider-count span:first-child{color:#ffd56b;font-size:15px}.cp-slider-count i{font-style:normal;margin:0 4px;color:rgba(255,255,255,.28)} .cp-slider-window{position:relative;overflow:hidden;border-radius:26px;outline:none;background:rgba(20,12,10,.28);border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 45px rgba(0,0,0,.2);touch-action:pan-y} .cp-slider-track{display:flex;direction:ltr;transition:transform .55s cubic-bezier(.22,.8,.24,1);will-change:transform} .cp-feature-slide{flex:0 0 100%;min-height:164px;display:grid;grid-template-columns:76px minmax(0,1fr) 80px;align-items:center;gap:17px;padding:18px 24px 18px 30px;position:relative;overflow:hidden;border:1px solid rgba(255,215,0,.12);border-radius:26px;background:radial-gradient(circle at 85% 15%,rgba(255,210,100,.08),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025) 55%,rgba(92,42,18,.13));backdrop-filter:blur(16px) saturate(110%);-webkit-backdrop-filter:blur(16px) saturate(110%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 35px rgba(255,215,0,.025)} .cp-feature-slide:before{content:"";position:absolute;width:260px;height:260px;left:-110px;top:-110px;border-radius:50%;border:1px solid rgba(255,215,0,.08);box-shadow:0 0 0 24px rgba(255,215,0,.016),0 0 0 48px rgba(255,215,0,.01);pointer-events:none} .cp-feature-icon{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;position:relative;z-index:1;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));border:1px solid rgba(255,215,0,.22);box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);transform:rotate(-4deg)} .cp-feature-icon img{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 7px 13px rgba(0,0,0,.22))} .cp-feature-text-icon{color:#ffd95d;font:800 31px Estedad,Vazirmatn,Tahoma,sans-serif;text-shadow:0 0 20px rgba(255,215,0,.25)} .cp-feature-copy{position:relative;z-index:1;min-width:0}.cp-feature-copy>span{color:#ffc94a;font-size:8px;font-weight:900;letter-spacing:.1em} .cp-feature-copy h3{margin:5px 0 5px;color:#fff9f2;font:700 clamp(16px,2vw,22px) Estedad,Vazirmatn,Tahoma,sans-serif;line-height:1.55;letter-spacing:-.035em} .cp-feature-copy p{margin:0;max-width:720px;color:rgba(255,237,222,.66);font-size:9.5px;line-height:1.9} .cp-feature-copy small{display:inline-block;margin-top:7px;color:rgba(255,201,74,.72);font-size:7.5px;font-weight:700} .cp-feature-mark{justify-self:end;position:relative;z-index:1;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:rgba(255,215,0,.75);font:800 27px Estedad,Vazirmatn,Tahoma,sans-serif;border:1px solid rgba(255,215,0,.14);background:rgba(0,0,0,.08);box-shadow:inset 0 0 20px rgba(255,215,0,.035)} .cp-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(20,12,10,.58);color:#ffe2a0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:400 25px Arial,sans-serif;display:grid;place-items:center;cursor:pointer;transition:.25s ease;box-shadow:0 8px 20px rgba(0,0,0,.18)} .cp-slider-arrow:hover{transform:translateY(-50%) scale(1.06);background:rgba(92,42,18,.72);border-color:rgba(255,215,0,.38)} .cp-slider-prev{right:10px}.cp-slider-next{left:10px} .cp-slider-bottom{display:flex;align-items:center;justify-content:center;margin-top:10px;position:relative} .cp-slider-dots{display:flex;direction:rtl;align-items:center;justify-content:center;gap:5px} .cp-slider-dot{width:6px;height:6px;border:0;padding:0;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;transition:.3s ease} .cp-slider-dot.active{width:18px;background:var(--yellow);box-shadow:0 0 10px rgba(255,215,0,.28)} @media(max-width:760px){.cp-feature-slider{width:92%;margin-top:14px}.cp-slider-head h2{font-size:16px}.cp-feature-slide{min-height:180px;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:16px 18px}.cp-feature-icon{width:54px;height:54px;border-radius:17px}.cp-feature-icon img{width:40px;height:40px}.cp-feature-text-icon{font-size:24px}.cp-feature-mark{display:none}.cp-feature-copy h3{font-size:15px}.cp-feature-copy p{font-size:8.5px;line-height:1.8}.cp-feature-copy small{font-size:7px}.cp-slider-arrow{width:31px;height:31px;font-size:21px}.cp-slider-prev{right:7px}.cp-slider-next{left:7px}} @media(prefers-reduced-motion:reduce){.cp-slider-track{transition:none}} /* Couplina slider refinement v2 */ .cp-slider-window{overflow:hidden;} .cp-slider-track{direction:rtl;} .cp-feature-slide{direction:rtl;} .cp-slider-arrow{z-index:30;pointer-events:auto;} .cp-slider-prev{right:-54px;left:auto;} .cp-slider-next{left:-54px;right:auto;} .cp-slider-bottom{margin-top:14px;} @media(max-width:760px){ .cp-slider-window{overflow:hidden;} .cp-slider-prev{right:8px;left:auto;} .cp-slider-next{left:8px;right:auto;} .cp-slider-arrow{background:rgba(20,12,10,.9);box-shadow:0 6px 18px rgba(0,0,0,.3);} } /* Final slider fixes */ .cp-slider-window{position:relative;overflow:hidden;} .cp-slider-track{direction:rtl;} .cp-feature-slide{direction:rtl;padding-left:78px;padding-right:78px;} .cp-slider-arrow{display:grid!important;position:absolute!important;top:50%!important;z-index:100!important;pointer-events:auto!important;opacity:1!important;visibility:visible!important;} .cp-slider-prev{right:12px!important;left:auto!important;} .cp-slider-next{left:12px!important;right:auto!important;} @media(max-width:760px){ .cp-feature-slide{padding-left:54px;padding-right:54px;} .cp-slider-prev{right:8px!important;left:auto!important;} .cp-slider-next{left:8px!important;right:auto!important;} } /* Dot indicator direction fix: active dot follows the slide's rightward movement. */ .cp-slider-dots{direction:rtl!important;flex-direction:row!important;unicode-bidi:isolate;} .cp-slider-dot{direction:rtl!important;} /* Calendar popup must sit above the feature slider (dashboard and slider were both z-index:3, slider came later in the DOM). Stays below the sticky header (z-index:50). */ .couplina-mini-dashboard{z-index:10;} /* Keep the calendar popup inside the viewport: JS sets --cal-shift when the card is too close to a screen edge. */ .relationship-calendar-modal{transform:translate(calc(-50% + var(--cal-shift,0px)),-8px)} .relationship-calendar-modal.show{transform:translate(calc(-50% + var(--cal-shift,0px)),0)} /* ===== Snake mini-game (top-left) + login modal ===== */ #snakeGame{position:absolute;top:104px;left:12px;z-index:8;width:168px;padding:8px;border-radius:18px;background:linear-gradient(145deg,rgba(122,50,16,.93),rgba(20,8,14,.95));border:1px solid rgba(255,215,0,.28);box-shadow:0 14px 34px rgba(0,0,0,.35);direction:rtl;color:#ffe2a0;font-family:Vazirmatn,sans-serif} .sg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font:800 10px Vazirmatn,sans-serif} .sg-min{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(20,12,10,.5);color:#ffe2a0;font:700 13px/1 Arial,sans-serif;cursor:pointer;padding:0} .sg-screen{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 0 0 3px #7f8f55} .sg-screen canvas{display:block;width:150px;height:150px;image-rendering:pixelated} .sg-msg{position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;background:rgba(169,185,122,.84);color:#2d3517;font:800 10px/1.8 Vazirmatn,sans-serif} .sg-msg[hidden]{display:none} .sg-start{width:100%;margin-top:7px;padding:6px;border:0;border-radius:10px;background:linear-gradient(135deg,#ffd76a,#e8834a);color:#3a1a08;font:800 10px Vazirmatn,sans-serif;cursor:pointer} .sg-hint{display:block;margin-top:5px;text-align:center;font-size:8px;color:#d9b9a2} #snakeGame.min{width:auto;padding:6px 10px} #snakeGame.min .sg-head{margin-bottom:0;gap:10px} #snakeGame.min .sg-screen,#snakeGame.min .sg-start,#snakeGame.min .sg-hint{display:none} .lg-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(10,4,6,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .lg-modal.show{opacity:1;visibility:visible} .lg-card{position:relative;width:min(390px,100%);padding:28px 26px 22px;border-radius:26px;direction:rtl;text-align:center;color:#ffe9cf;font-family:Vazirmatn,sans-serif;background:linear-gradient(150deg,#7a3210 0%,#3b160c 55%,#150818 100%);border:1px solid rgba(255,215,0,.28);box-shadow:0 30px 80px rgba(0,0,0,.55);transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.22,.8,.24,1)} .lg-modal.show .lg-card{transform:none} .lg-close{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(20,12,10,.5);color:#ffe2a0;font-size:20px;line-height:1;cursor:pointer} .lg-apple{font-size:34px;line-height:1} .lg-card h2{margin:8px 0 4px;font:800 20px Estedad,Vazirmatn,sans-serif} .lg-card p{margin:0 0 18px;font-size:12px;color:#d9b9a2} .lg-field{display:block;margin-bottom:12px;text-align:right} .lg-field>span{display:block;margin-bottom:5px;font-size:11px;font-weight:700;color:#ffc94a} .lg-input{position:relative} .lg-input input{width:100%;padding:11px 13px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:rgba(10,4,6,.42);color:#fff;font:500 13px Vazirmatn,sans-serif;outline:none;transition:.2s} .lg-input input::placeholder{color:rgba(255,233,207,.4)} .lg-input input:focus{border-color:#ffc94a;box-shadow:0 0 0 3px rgba(255,201,74,.18)} .lg-input input[type=password],.lg-input input.lg-pass{padding-left:48px} .lg-eye{position:absolute;top:50%;left:8px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:none;color:#ffc94a;cursor:pointer;transition:background-color .15s} .lg-eye:hover{background:rgba(255,201,74,.12)} .lg-eye svg{display:block} .lg-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 16px;font-size:11px;color:#d9b9a2} .lg-row label{display:flex;align-items:center;gap:6px;cursor:pointer} .lg-row input{accent-color:#e8834a} .lg-row a,.lg-foot a{color:#ffc94a;text-decoration:none} .lg-submit{width:100%;padding:12px;border:0;border-radius:14px;background:linear-gradient(135deg,#ffd76a,#e8834a);color:#3a1a08;font:800 14px Vazirmatn,sans-serif;cursor:pointer;box-shadow:0 10px 24px rgba(232,131,74,.3)} .lg-note{min-height:18px;margin-top:10px;font-size:11px;color:#ffc94a} .lg-foot{margin-top:4px;font-size:11px;color:#d9b9a2} /* Snake on touch devices: swipe on the screen or use the on-screen arrows */ .sg-screen canvas{touch-action:none} .sg-pad{display:none;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,34px);gap:5px;justify-content:center;margin-top:8px;touch-action:manipulation;-webkit-user-select:none;user-select:none} .sg-pad button{border:1px solid rgba(255,215,0,.28);border-radius:11px;background:rgba(20,12,10,.55);color:#ffe2a0;font:700 13px Arial,sans-serif;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .sg-pad button:active{background:rgba(232,131,74,.55)} .sg-pad [data-d="0,-1"]{grid-column:2;grid-row:1} .sg-pad [data-d="-1,0"]{grid-column:1;grid-row:2} .sg-pad [data-d="0,1"]{grid-column:2;grid-row:2} .sg-pad [data-d="1,0"]{grid-column:3;grid-row:2} @media(pointer:coarse){.sg-pad{display:grid}.sg-hint{display:none}} #snakeGame.min .sg-pad{display:none} @media(max-width:760px){#snakeGame{left:8px;top:92px}.lg-input input{font-size:16px}} /* Snake widget must sit above the dashboard cards (z-index:10) but below the header (50); hide it behind the date-picker popup while that is open */ #snakeGame{z-index:20} body.relationship-calendar-open #snakeGame{z-index:5} /* Snake widget never overlaps content: in-flow under the header by default, floating in the empty left margin only on very wide screens */ #snakeGame{position:static;margin:10px auto 0 12px;top:auto;left:auto;z-index:auto} @media(min-width:1540px){#snakeGame{position:absolute;top:104px;left:12px;margin:0;z-index:5}} /* D-pad: page is RTL, so force LTR inside the pad or left/right buttons swap sides */ .sg-pad{direction:ltr} .sg-title{display:inline-flex;align-items:center;gap:5px} .sg-logo{width:20px;height:20px;object-fit:contain;flex:none} .lg-logo{width:62px;height:62px;object-fit:contain;display:block;margin:0 auto} .lg-card h2{font-size:18px;line-height:1.7} /* ===== Phone performance: drop the expensive decorative effects (desktop is unchanged) ===== */ @media(max-width:900px),(pointer:coarse){ *,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .blob,.noise{display:none!important} .cp-feature-slider:before,.footer-glow,.hero-core:before,.popup-glow{display:none!important} .brand-logo-orbit:after,.brand-logo-orbit:before,.header-progress-bar span,.popup-logo-ring,.popup-spark,.welcome-popup:after,.sun,h1 strong,.footer-cta-pro h2 em,.footer-message h2 em,.poster h2 em,.primary{animation:none!important} .lg-modal{background:rgba(10,4,6,.8)} } /* ===== Popup v6 polish: Couplina green/orange palette + safe close button ===== */ .welcome-popup{ background:linear-gradient(145deg,#ffffff 0%,#f0fdf4 56%,#dcfce7 100%)!important; border-color:rgba(5,150,105,.20)!important; box-shadow:0 45px 120px rgba(2,24,17,.38),0 0 0 1px rgba(255,255,255,.82) inset,0 0 70px rgba(5,150,105,.14)!important; } .welcome-popup:before{background:rgba(52,211,153,.16)!important} .welcome-popup:after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.62) 48%,transparent 60%)!important} .popup-topline{padding-left:54px;justify-content:flex-start;gap:18px} .popup-status{color:#047857!important} .popup-brand-mini{color:#7A3210!important;letter-spacing:.22em;font-weight:900} .popup-logo-ring{background:linear-gradient(145deg,#ffffff,#d1fae5,#34d399)!important;box-shadow:0 20px 42px rgba(5,150,105,.18),0 0 0 7px rgba(255,255,255,.78)!important} .welcome-popup .eyebrow{color:#7A3210!important} .welcome-popup h2{color:#064e3b!important} .welcome-popup h2 em{color:#f97316!important} .welcome-popup p{color:#527166!important} .popup-features span{background:rgba(255,255,255,.82)!important;border-color:rgba(5,150,105,.13)!important;color:#27614f!important} .popup-features b{background:#FFE0B2!important;color:#7A3210!important} .popup-progress{background:rgba(5,150,105,.10)!important} .popup-progress span{background:linear-gradient(90deg,#7A3210,#E8834A,#FFD700)!important} .popup-hint{color:#58766b!important} .popup-hint b{background:#064e3b!important;color:#fff!important} .welcome-popup .close{ left:auto!important; right:18px!important; top:18px!important; width:38px!important; height:38px!important; display:grid!important; place-items:center!important; border:1px solid rgba(5,150,105,.18)!important; background:#ffffff!important; color:#047857!important; box-shadow:0 8px 22px rgba(5,150,105,.14)!important; font-size:23px!important; line-height:1!important; } .welcome-popup .close:hover{background:#f97316!important;color:#fff!important;border-color:#f97316!important} @media(max-width:520px){ .popup-topline{padding-left:46px} .welcome-popup .close{right:14px!important;top:14px!important;width:34px!important;height:34px!important} } /* ========================================================= COUPLINA — AUTUMN POPUP FINAL Popup palette is aligned with the site's autumn identity. Emerald/green popup styling is intentionally overridden here. ========================================================= */ .welcome-popup{ background: radial-gradient(circle at 12% 8%, rgba(255,215,0,.16) 0 8%, transparent 30%), radial-gradient(circle at 92% 12%, rgba(232,131,74,.18) 0 10%, transparent 32%), linear-gradient(145deg,#FFF1D6 0%,#F6D5B5 34%,#E8834A 72%,#7A3210 100%) !important; color:#3A1B0D !important; border:1px solid rgba(255,215,0,.38) !important; box-shadow: 0 45px 120px rgba(0,0,0,.48), 0 0 0 1px rgba(255,244,220,.45) inset, 0 0 80px rgba(232,131,74,.24) !important; } .welcome-popup:after{ background:linear-gradient( 115deg, transparent 34%, rgba(255,244,220,.40) 48%, transparent 61% ); } .welcome-popup:before{ background:rgba(255,215,0,.16); } .popup-content{color:#3A1B0D} .popup-topline{color:#7A3210} .popup-status i{ background:#E8834A; box-shadow:0 0 0 5px rgba(232,131,74,.18),0 0 14px rgba(232,131,74,.38); } .popup-brand-mini{color:#7A3210} .popup-logo-wrap{filter:drop-shadow(0 12px 24px rgba(92,42,18,.22))} .popup-logo-ring{ background:linear-gradient(145deg,#FFF8EA,#FFE1B5,#E8834A) !important; box-shadow: 0 20px 42px rgba(122,50,16,.24), 0 0 0 7px rgba(255,241,214,.72) !important; } .popup-logo-ring img{background:#FFF8EA} .welcome-popup .eyebrow{color:#7A3210} .welcome-popup h2{ color:#5C2A12 !important; text-shadow:0 2px 18px rgba(92,42,18,.10); } .welcome-popup h2 em{ color:#B84D1C !important; background:linear-gradient(90deg,#7A3210,#E8834A,#B84D1C,#7A3210); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:popupAutumnText 5s ease-in-out infinite; } .welcome-popup p{color:#684433} .popup-features span{ background:rgba(255,248,234,.68); border:1px solid rgba(122,50,16,.14); color:#5C2A12; box-shadow:0 8px 22px rgba(92,42,18,.09); } .popup-features b{ background:linear-gradient(145deg,#7A3210,#E8834A); color:#FFD700; box-shadow:0 5px 14px rgba(122,50,16,.20); } .popup-progress{ background:rgba(92,42,18,.16); } .popup-progress span{ background:linear-gradient(90deg,#7A3210,#E8834A,#FFD700) !important; } .popup-hint{color:#684433} .popup-hint b{ background:linear-gradient(145deg,#5C2A12,#7A3210); color:#FFD700; box-shadow:0 7px 18px rgba(92,42,18,.28); } .welcome-popup .close{ background:#5C2A12 !important; color:#FFD700 !important; box-shadow:0 8px 20px rgba(92,42,18,.28); } .welcome-popup .close:hover{ background:#E8834A !important; color:#fff !important; } @keyframes popupAutumnText{ 0%,100%{background-position:0% center} 50%{background-position:100% center} } /* COUPLINA POPUP — ZERO GREEN FINAL OVERRIDE */ .welcome-popup .popup-status i{background:#E8834A!important;box-shadow:0 0 0 5px rgba(232,131,74,.18),0 0 14px rgba(232,131,74,.38)!important} .welcome-popup .popup-status{color:#7A3210!important} .welcome-popup .popup-logo-ring{background:linear-gradient(145deg,#FFF8EA,#FFD38A,#E8834A)!important} .welcome-popup .popup-features span{border-color:rgba(122,50,16,.14)!important;color:#5C2A12!important} .welcome-popup .popup-hint{color:#684433!important} /* COUPLINA POPUP — ZERO GREEN, TRUE FINAL PASS A few older declarations further up used !important and were never actually beaten by the "final" brown rules above (equal specificity, no !important on the newer rule loses to an older !important one). These four were still rendering green; re-declared here with higher specificity + !important so they win for good. */ .welcome-popup.welcome-popup:before{background:rgba(232,131,74,.16)!important} .welcome-popup.welcome-popup p{color:#684433!important} .welcome-popup .popup-hint b{background:linear-gradient(145deg,#5C2A12,#7A3210)!important;color:#FFD700!important;box-shadow:0 7px 18px rgba(92,42,18,.28)!important} .welcome-popup .popup-progress{background:rgba(92,42,18,.16)!important} /* ========================================================= COUPLINA TIME CAPSULE — NEW HOME SECTION Isolated styles: does not modify existing components. ========================================================= */ .cp-timecapsule{width:min(1180px,92%);margin:34px auto 58px;position:relative;z-index:3;overflow:hidden;border-radius:36px;border:1px solid rgba(255,226,164,.17);background:radial-gradient(circle at 9% 16%,rgba(255,204,115,.13),transparent 23%),radial-gradient(circle at 91% 84%,rgba(221,104,82,.13),transparent 27%),radial-gradient(circle at 53% 48%,rgba(255,255,255,.035),transparent 44%),linear-gradient(135deg,rgba(18,10,9,.93),rgba(45,20,16,.72) 52%,rgba(13,9,10,.94));box-shadow:0 35px 100px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.025) inset,0 1px 0 rgba(255,255,255,.10) inset;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} .cp-timecapsule:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.055) 34%,transparent 47%);transform:translateX(-120%);animation:cpCapsuleSheen 9s ease-in-out infinite} .cp-timecapsule-glow{position:absolute;width:440px;height:440px;left:-230px;top:-260px;border-radius:50%;border:1px solid rgba(255,220,150,.10);box-shadow:0 0 0 34px rgba(255,215,0,.022),0 0 0 72px rgba(255,215,0,.012),0 0 120px rgba(255,176,94,.10);pointer-events:none} .cp-timecapsule-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}.cp-timecapsule-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe7b0;box-shadow:0 0 12px rgba(255,215,130,.9);opacity:.5;animation:cpCapsuleFloat 5s ease-in-out infinite}.cp-timecapsule-stars i:nth-child(1){right:11%;top:18%;animation-delay:-1s}.cp-timecapsule-stars i:nth-child(2){right:24%;top:72%;width:2px;height:2px;animation-delay:-3s}.cp-timecapsule-stars i:nth-child(3){left:45%;top:12%;width:2px;height:2px;animation-delay:-2s}.cp-timecapsule-stars i:nth-child(4){left:7%;top:68%;animation-delay:-4s}.cp-timecapsule-stars i:nth-child(5){left:31%;top:83%;width:2px;height:2px;animation-delay:-1.5s}.cp-timecapsule-stars i:nth-child(6){right:5%;top:48%;width:2px;height:2px;animation-delay:-2.5s} .cp-timecapsule-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,.86fr);gap:58px;align-items:center;padding:55px 58px;position:relative} .cp-timecapsule-intro{position:relative;padding:7px 0}.cp-timecapsule-kicker{display:inline-flex;align-items:center;gap:8px;color:#e9bd79;font-size:10px;font-weight:800;letter-spacing:.06em;margin-bottom:12px;padding:7px 11px;border-radius:999px;background:rgba(255,215,135,.055);border:1px solid rgba(255,215,135,.10);box-shadow:0 8px 24px rgba(0,0,0,.12)}.cp-timecapsule-kicker i{font-style:normal;color:#ffd875;font-size:10px;animation:cpCapsuleTwinkle 2.4s ease-in-out infinite} .cp-timecapsule-intro h2{margin:0;color:#fff9f2;font:800 clamp(31px,4vw,51px) Estedad,Vazirmatn,Tahoma,sans-serif;letter-spacing:-.055em;line-height:1.25;text-shadow:0 10px 30px rgba(0,0,0,.28)} .cp-timecapsule-intro h2 em{font-style:normal;background:linear-gradient(105deg,#f7c76d 5%,#fff1c4 32%,#d99a54 54%,#ffe6a4 75%,#e5aa58);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite} .cp-timecapsule-intro p{max-width:570px;margin:16px 0 0;color:#cdb4a8;font-size:12px;line-height:2.2} .cp-timecapsule-note{display:flex;align-items:center;gap:10px;margin-top:25px;color:rgba(255,244,233,.48);font-size:9px;line-height:1.9}.cp-timecapsule-note-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:10px;color:#ffd77c;background:linear-gradient(145deg,rgba(255,215,124,.12),rgba(255,215,124,.035));border:1px solid rgba(255,215,124,.14);font-size:13px;box-shadow:0 8px 25px rgba(0,0,0,.15)} .cp-timecapsule-card{position:relative;padding:27px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));border:1px solid rgba(255,220,165,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 24px 60px rgba(0,0,0,.25);transform:translateY(0);transition:transform .35s ease,box-shadow .35s ease}.cp-timecapsule-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px rgba(0,0,0,.32)} .cp-timecapsule-card:before{content:'';position:absolute;inset:9px;border:1px dashed rgba(255,215,145,.10);border-radius:21px;pointer-events:none}.cp-timecapsule-card:after{content:'♡';position:absolute;left:18px;bottom:10px;color:rgba(255,215,145,.06);font-size:72px;line-height:1;transform:rotate(-14deg);pointer-events:none}.cp-timecapsule-card>*{position:relative;z-index:1} .cp-timecapsule-card-top{display:flex;justify-content:space-between;align-items:center;color:#f0d39d;font-size:10px;font-weight:800;margin-bottom:19px}.cp-timecapsule-card-label{display:flex;align-items:center;gap:7px}.cp-timecapsule-card-label i{font-style:normal;color:#dba85d;font-size:8px}.cp-timecapsule-heart{width:37px;height:37px;display:grid;place-items:center;border-radius:13px;font-size:20px;color:#ffd36f;background:linear-gradient(145deg,rgba(255,215,120,.12),rgba(255,215,120,.035));border:1px solid rgba(255,215,120,.14);box-shadow:0 8px 22px rgba(0,0,0,.13);animation:cpCapsuleHeartbeat 2.8s ease-in-out infinite} .cp-timecapsule-card label{display:block;color:#fff8f0;font:700 13px Estedad,Vazirmatn,Tahoma,sans-serif;margin-bottom:11px}.cp-timecapsule-input{display:block;width:100%;min-height:118px;box-sizing:border-box;resize:vertical;border:1px solid rgba(255,218,155,.13);border-radius:18px;padding:15px 16px;background:linear-gradient(145deg,rgba(10,5,8,.56),rgba(31,14,12,.42));color:#fff8f0;font:500 10px Vazirmatn;line-height:2;outline:none;transition:border-color .25s,box-shadow .25s,background .25s,transform .25s}.cp-timecapsule-input:hover{border-color:rgba(255,218,155,.20)}.cp-timecapsule-input::placeholder{color:rgba(255,247,239,.34)}.cp-timecapsule-input:focus{border-color:rgba(255,211,111,.40);background:rgba(13,5,8,.64);box-shadow:0 0 0 4px rgba(255,211,111,.055),0 15px 35px rgba(0,0,0,.15);transform:translateY(-1px)} .cp-timecapsule-actions{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:13px}.cp-timecapsule-actions>span{color:rgba(255,255,255,.29);font-size:8px}.cp-timecapsule-actions button{position:relative;overflow:hidden;border:1px solid rgba(255,224,163,.24);border-radius:15px;padding:11px 17px;background:linear-gradient(105deg,#7f3518,#c56b3f 42%,#d9aa59 76%,#f0cf82);background-size:220% auto;color:#fffdf9;font:700 9px Vazirmatn;box-shadow:0 12px 28px rgba(188,102,58,.20),0 1px 0 rgba(255,255,255,.18) inset;transition:transform .25s,box-shadow .25s,background-position .6s}.cp-timecapsule-actions button:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);transform:translateX(-130%);transition:transform .65s}.cp-timecapsule-actions button:hover{transform:translateY(-3px);box-shadow:0 17px 34px rgba(188,102,58,.28),0 1px 0 rgba(255,255,255,.2) inset;background-position:right center}.cp-timecapsule-actions button:hover:before{transform:translateX(130%)}.cp-timecapsule-actions button:active{transform:translateY(-1px) scale(.985)}.cp-timecapsule-actions button b{font-size:14px;margin-right:5px;vertical-align:-1px} .cp-timecapsule-submit.is-sent{background:linear-gradient(105deg,#96702b,#d4af62,#f2d38d);box-shadow:0 14px 34px rgba(220,174,82,.22);animation:cpCapsuleSuccess .55s ease}.cp-timecapsule-status{margin-top:13px;padding:10px 11px;border-radius:13px;font-size:8px;line-height:1.9;animation:cpCapsuleReveal .35s ease}.cp-timecapsule-status[hidden]{display:none}.cp-timecapsule-status.is-success{background:linear-gradient(100deg,rgba(255,215,125,.075),rgba(255,215,125,.025));border:1px solid rgba(255,215,125,.13);color:rgba(255,235,178,.78)}.cp-timecapsule-status.is-error{background:rgba(232,131,74,.055);border:1px solid rgba(232,131,74,.10);color:rgba(255,190,150,.75)} .cp-timecapsule-saved{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 11px;border-radius:13px;background:rgba(255,215,0,.055);border:1px solid rgba(255,215,0,.09)}.cp-timecapsule-saved[hidden]{display:none}.cp-timecapsule-saved>span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#E8834A;color:#fff;font-size:9px;flex:none}.cp-timecapsule-saved div{min-width:0}.cp-timecapsule-saved strong{display:block;color:#FFD56B;font-size:9px;margin-bottom:2px}.cp-timecapsule-saved small{display:block;color:rgba(255,255,255,.45);font-size:8px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @keyframes cpCapsuleSheen{0%,65%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}@keyframes cpCapsuleFloat{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-9px);opacity:.85}}@keyframes cpCapsuleTwinkle{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}@keyframes cpCapsuleHeartbeat{0%,100%{transform:scale(1)}8%{transform:scale(1.08)}16%{transform:scale(1)}24%{transform:scale(1.06)}32%{transform:scale(1)}}@keyframes cpCapsuleSuccess{0%{transform:scale(.96)}55%{transform:scale(1.045)}100%{transform:scale(1)}}@keyframes cpCapsuleReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} @media(max-width:760px){.cp-timecapsule{width:92%;margin:18px auto 34px;border-radius:25px}.cp-timecapsule-inner{grid-template-columns:1fr;gap:23px;padding:27px 19px}.cp-timecapsule-intro h2{font-size:27px}.cp-timecapsule-intro p{font-size:9px}.cp-timecapsule-card{padding:18px}.cp-timecapsule-input{min-height:92px}.cp-timecapsule-note{margin-top:16px}} /* ========================================================= COUPLINA AUTUMN DRAWING SPACE — DISPLAY ONLY No persistence. Canvas is intentionally ephemeral. ========================================================= */ .cp-autumn-drawing{width:min(1180px,92%);margin:-18px auto 72px;position:relative;overflow:hidden;border-radius:38px;border:1px solid rgba(244,190,117,.12);background:linear-gradient(145deg,#241814,#3a241b);box-shadow:0 34px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,242,211,.06);isolation:isolate} .cp-autumn-drawing:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.035) 45%,transparent 62%);transform:translateX(-120%);animation:cpAutumnSheen 12s ease-in-out infinite;pointer-events:none} .cp-autumn-mist{position:absolute;width:420px;height:420px;right:-190px;top:-240px;border-radius:50%;background:rgba(225,157,83,.045);filter:blur(26px);pointer-events:none} .cp-autumn-inner{position:relative;z-index:2;padding:48px 52px 40px} .cp-autumn-heading{text-align:center;max-width:650px;margin:0 auto 28px} .cp-autumn-kicker{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;color:#d8b998;background:rgba(255,209,139,.035);border:1px solid rgba(255,214,151,.08);font-size:10px;font-weight:800} .cp-autumn-kicker i{font-style:normal;color:#edc48d} .cp-autumn-heading h2{margin:14px 0 7px;color:#fff7ed;font:800 clamp(29px,4vw,46px) Estedad,Vazirmatn,Tahoma,sans-serif;letter-spacing:-.05em} .cp-autumn-heading h2 em{font-style:normal;background:linear-gradient(110deg,#c89d73,#f0d0a3,#a87856,#e1b98d);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cpAutumnText 7s linear infinite} .cp-autumn-heading p{margin:0;color:#cdb6a8;font-size:12px;line-height:2} .cp-autumn-leaves{display:none!important} .cp-drawing-frame{position:relative;padding:12px;border-radius:30px;background:linear-gradient(145deg,rgba(255,247,231,.065),rgba(255,255,255,.018));border:1px solid rgba(255,218,166,.11);box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)} .cp-drawing-top{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 9px 8px;color:#ead2bb;font-size:10px;font-weight:800} .cp-drawing-top span{display:flex;align-items:center;gap:7px} .cp-drawing-top span b{font-size:15px} .cp-drawing-top button{border:1px solid rgba(255,218,166,.12);background:rgba(255,255,255,.045);color:#cdb29f;border-radius:999px;padding:7px 11px;font-family:inherit;font-size:9px;cursor:pointer;transition:.25s ease} .cp-drawing-top button:hover{background:rgba(255,214,150,.08);color:#ffe0aa;transform:translateY(-1px)} .cp-drawing-canvas-wrap{position:relative;height:390px;overflow:hidden;border-radius:22px;border:1px solid rgba(116,76,48,.34);background:#5f4736;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -18px 34px rgba(40,25,17,.12),0 10px 30px rgba(0,0,0,.18)} .cp-drawing-canvas-wrap:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 24%,transparent 70%,rgba(45,27,18,.09)),radial-gradient(ellipse at 50% 0%,rgba(255,244,216,.10),transparent 46%);mix-blend-mode:soft-light;pointer-events:none;z-index:1} .cp-drawing-canvas-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%,transparent 78%,rgba(35,21,14,.055));pointer-events:none;z-index:1} #cpDrawingCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;z-index:2} .cp-drawing-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;z-index:3;transition:opacity .35s ease} .cp-drawing-hint span{width:57px;height:57px;margin:0 auto 10px;display:grid;place-items:center;border-radius:20px;color:#f4d3a5;background:rgba(68,42,27,.18);border:1px solid rgba(255,235,201,.20);box-shadow:0 15px 35px rgba(35,20,12,.18);font-size:25px;animation:cpHintPulse 2.8s ease-in-out infinite} .cp-drawing-hint strong{color:#fff3df;font-size:13px;text-shadow:0 1px 8px rgba(34,21,14,.45)} .cp-drawing-hint small{margin-top:5px;color:#f0d8bf;font-size:9px;text-shadow:0 1px 7px rgba(34,21,14,.45)} .cp-drawing-hint.is-hidden{opacity:0} .cp-drawing-bottom{height:36px;display:flex;align-items:flex-end;padding:7px 8px 0;color:rgba(231,207,190,.43);font-size:8px} .cp-drawing-bottom span{display:flex;align-items:center;gap:6px} .cp-drawing-bottom i{width:5px;height:5px;border-radius:50%;background:#c58b58;box-shadow:0 0 10px rgba(197,139,88,.6)} @keyframes cpAutumnSheen{0%,62%{transform:translateX(-120%)}78%,100%{transform:translateX(120%)}} @keyframes cpAutumnText{0%{background-position:0% 50%}100%{background-position:240% 50%}} @keyframes cpHintPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.035)}} @media(max-width:760px){ .cp-autumn-drawing{width:94%;margin:-8px auto 48px;border-radius:27px} .cp-autumn-inner{padding:32px 15px 26px} .cp-autumn-heading{margin-bottom:20px} .cp-autumn-heading h2{font-size:29px} .cp-autumn-heading p{font-size:10px;line-height:2.05} .cp-drawing-frame{padding:8px;border-radius:23px} .cp-drawing-canvas-wrap{height:310px;border-radius:17px} .cp-drawing-top{height:39px;padding:0 6px 6px} .cp-drawing-bottom{font-size:7px} } /* Procedural wet-mud surface: generated with canvas, never loaded from an image. */ .cp-drawing-canvas-wrap{background:#977257;box-shadow:inset 0 1px 0 rgba(255,244,220,.11),inset 0 -22px 42px rgba(35,22,16,.13),0 14px 34px rgba(0,0,0,.20);} #cpMudBase{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;} #cpDrawingCanvas{z-index:2;background:transparent;} .cp-drawing-canvas-wrap:before{z-index:1;background:linear-gradient(115deg,rgba(255,248,226,.08),transparent 24%,transparent 70%,rgba(42,27,19,.08)),radial-gradient(ellipse at 45% 0%,rgba(255,245,220,.09),transparent 48%);mix-blend-mode:soft-light;} /* Natural wet-earth treatment — no image texture, no ceramic/clay look. */ .cp-drawing-canvas-wrap{ background:#92705a; border-color:rgba(74,47,34,.55); box-shadow:inset 0 1px 0 rgba(255,244,220,.08), inset 0 -26px 50px rgba(32,20,15,.18), 0 14px 34px rgba(0,0,0,.22); } .cp-drawing-canvas-wrap:before{ background:linear-gradient(105deg,rgba(255,239,207,.035),transparent 22%,transparent 74%,rgba(35,21,15,.10)),radial-gradient(ellipse at 48% 18%,rgba(255,239,208,.035),transparent 50%); mix-blend-mode:normal; } .cp-drawing-canvas-wrap:after{background:linear-gradient(180deg,rgba(255,245,222,.018),transparent 22%,transparent 72%,rgba(25,15,11,.09));} #cpMudBase{filter:saturate(.92) contrast(1.03);} /* ===== Spooky autumn side trees ===== */ .spooky-sides{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden} .spooky-tree{position:absolute;bottom:0;height:100vh;width:clamp(150px,21vw,420px);object-fit:cover;object-position:bottom; filter:drop-shadow(0 0 22px #ff6a1350) drop-shadow(0 0 60px #d92b0f30);opacity:.97} .spooky-tree-left{left:0;object-position:left bottom} /* Right tree: complete tree (nothing cropped), scaled down so it takes less width */ .spooky-tree-right{right:0;left:auto;width:clamp(120px,15.5vw,300px);height:auto;aspect-ratio:340/1100;object-fit:contain;object-position:right bottom; filter:drop-shadow(0 0 18px #ff6a1344) drop-shadow(0 0 44px #d92b0f26);opacity:.97; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 100%),linear-gradient(to left,#000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 100%),linear-gradient(to left,#000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%); mask-composite:intersect} /* Left tree: same soft inner edge so no hard vertical border shows */ .spooky-tree-left{-webkit-mask-image:linear-gradient(to right,#000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%); mask-image:linear-gradient(to right,#000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%)} .spooky-vignette{position:absolute;inset:0; background:radial-gradient(ellipse at 50% 45%,transparent 52%,#12040055 78%,#0a020099 100%); animation:spookyPulse 6s ease-in-out infinite alternate} .spooky-leaves{position:absolute;inset:0} .spooky-leaves i{position:absolute;top:-8%;border-radius:100% 0 100% 0;opacity:.85; animation:spookyFall linear infinite,spookySpin ease-in-out infinite alternate;will-change:transform} @keyframes spookyFall{from{transform:translate3d(0,-10vh,0)}to{transform:translate3d(var(--drift,40px),115vh,0)}} @keyframes spookySpin{from{rotate:-70deg}to{rotate:110deg}} @keyframes spookyPulse{from{opacity:.75}to{opacity:1}} /* Tablets and phones: slim branches overlay the very edges only */ @media(max-width:900px){ .spooky-sides{z-index:1} .spooky-tree{width:78px;opacity:.6;-webkit-mask-image:none;mask-image:none} .spooky-tree-right{right:0;width:78px;height:100vh;aspect-ratio:auto;object-fit:cover;object-position:right bottom;opacity:.6;-webkit-mask-image:none;mask-image:none} .spooky-vignette{display:none} } @media(prefers-reduced-motion:reduce){.spooky-vignette{animation:none}.spooky-leaves{display:none}} /* ===== Scale / zoom safety: nothing may widen the page ===== */ html{overflow-x:clip;max-width:100%} body{overflow-x:clip;max-width:100vw} body.relationship-calendar-open{overflow-x:clip} /* Closed calendar popup must not take any layout/scroll space (it only faded out before) */ .relationship-calendar-modal:not(.show){display:none!important} .relationship-calendar-modal.show{animation:calPopIn .22s ease both} @keyframes calPopIn{from{opacity:0}to{opacity:1}} img,video{max-width:100%} /* ===== Header on small screens / high zoom: never overlap, never overflow ===== */ @media(max-width:560px){ .couplina-header .header-shell,.header-shell{width:calc(100% - 20px);max-width:100%;margin-inline:auto;gap:6px;box-sizing:border-box} .header-brand-area{min-width:0;flex:1 1 auto} .header-brand-area .brand{min-width:0;gap:6px} .brand-copy{min-width:0} .header-actions{flex:0 0 auto;gap:3px;margin-right:0;margin-left:auto} .header-actions .header-icon-btn{width:32px;height:32px;font-size:16px} .header-actions .header-icon-btn>svg{width:18px;height:18px} .header-actions .profile-btn{width:34px;height:34px} .header-actions .profile-btn .profile-avatar{width:28px;height:28px} .mobile-menu-btn{margin-left:0!important;flex:0 0 auto} .brand-logo-orbit{width:40px;height:40px} .brand-symbol{width:36px!important;height:36px!important} .brand-copy b{font-size:16px} } @media(max-width:380px){ .couplina-header .header-shell,.header-shell{width:calc(100% - 12px);gap:4px} .header-actions .header-icon-btn{width:29px;height:29px} .header-actions .profile-btn{width:31px;height:31px} .brand-logo-orbit{width:34px;height:34px} .brand-symbol{width:30px!important;height:30px!important} .brand-copy b{font-size:14px} } /* The header is a flex row: take the thin progress bar out of the row so it can't squeeze the header content */ header.top .header-progress-bar{position:absolute;left:0;right:0;bottom:0;width:auto} header.top .header-shell{flex:0 1 auto;min-width:0} /* Tablets/phones: soft inner fade on the slim edge trees (no hard vertical borders) */ @media(max-width:900px){ .spooky-tree-left{-webkit-mask-image:linear-gradient(to right,#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 30%,transparent 100%)} .spooky-tree-right{-webkit-mask-image:linear-gradient(to left,#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(to left,#000 0%,#000 30%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add} } /* ===================================================================== PERFORMANCE OVERRIDES (روان‌سازی سایت برای موبایل و دسکتاپ) ===================================================================== */ /* 1) افکت‌های سنگین ثابت‌ِ تمام‌صفحه که هر فریم دوباره رسم می‌شدند */ .noise,.blob{display:none!important} /* 2) backdrop-filter روی header چسبنده / کارت‌ها / مودال‌ها باعث لگ اسکرول می‌شد. به‌جایش پس‌زمینه کمی مات‌تر شد تا ظاهر تقریباً همان بماند. */ *,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .couplina-header{background:rgba(18,8,12,.96)!important;box-shadow:0 6px 20px rgba(0,0,0,.25)!important} .modal .back{background:rgba(2,24,17,.88)} .policy-back{background:rgba(10,3,8,.88)} .lg-modal{background:rgba(10,4,6,.8)} .cp-slider-arrow{background:rgba(20,12,10,.8)} .cp-timecapsule{background:radial-gradient(circle at 9% 16%,rgba(255,204,115,.12),transparent 23%),linear-gradient(135deg,rgba(18,10,9,.96),rgba(45,20,16,.9) 52%,rgba(13,9,10,.97))} /* 3) درخت‌های کناری: حالا تصویر از پیش رندر‌شده است؛ drop-shadow و فیلتر زنده حذف شد */ .spooky-sides{contain:strict} .spooky-tree,.spooky-tree-right{filter:none!important;transform:translateZ(0)} .spooky-vignette{animation:none!important;opacity:.9} .spooky-leaves{contain:layout paint} /* 4) انیمیشن‌هایی که هر فریم repaint/layout می‌کردند (background-position / filter / box-shadow) */ .main-nav .nav-link.nav-png-only img{animation:none!important;filter:none!important} .sun{animation:none!important} h1 strong,.poster h2 em,.primary, .cp-timecapsule-intro h2 em,.cp-autumn-heading h2 em, .footer-cta-pro h2 em,.footer-message h2 em,.welcome-popup h2 em, .relationship-day.monthly-anniversary .day-number{animation:none!important;filter:none!important} .relationship-day.selected{animation:none!important} .relationship-day.selected:before{animation:relationshipFlame 1.05s ease-in-out infinite alternate!important} /* 5) وقتی بخشی از صفحه دیده نمی‌شود انیمیشن‌هایش متوقف می‌شود (کلاس را اسکریپت می‌گذارد) */ .is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused!important} /* 6) لمس روان‌تر در موبایل */ button,a,.header-icon-btn,.profile-btn,.nav-link{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .cp-feature-slide{contain:layout paint style} .cp-slider-track{will-change:transform;backface-visibility:hidden} @media(max-width:900px),(pointer:coarse){ .cp-timecapsule-stars,.footer-orbit{display:none!important} .spooky-leaves{display:block!important} .spooky-leaves i{opacity:.7} .cp-feature-slide,.cp-timecapsule,.policy-box,.lg-card{box-shadow:0 10px 24px rgba(0,0,0,.28)!important} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} .tab-hidden *,.tab-hidden *::before,.tab-hidden *::after{animation-play-state:paused!important} /* ===== Round 2: header decorations animate only on hover (کاهش repaint دائمی هدر) ===== */ .couplina-header .heart-orbit, .couplina-header .heart-orbit::before, .couplina-header .heart-orbit::after, .brand-logo-orbit:before,.brand-logo-orbit:after, .header-progress-bar span{animation:none!important} .couplina-header .nav-link:hover .heart-orbit, .couplina-header .nav-link:focus-visible .heart-orbit{animation:heart-orbit-spin 15s linear infinite!important} .couplina-header .brand:hover .brand-logo-orbit:before{animation:headerOrbit 8s linear infinite!important} .couplina-header .brand:hover .brand-logo-orbit:after{animation:headerOrbit 11s linear infinite reverse!important} /* ===== پس‌زمینه‌ی صفحه روی یک لایه‌ی ثابت: دیگر هنگام اسکرول دوباره رسم نمی‌شود ===== */ html{background:#592D11} body{background:transparent!important} body{position:relative} body::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;transform:translateZ(0); background: radial-gradient(circle at 10% 15%,#f8df5020 0 6%,transparent 22%), radial-gradient(circle at 85% 20%,#ce510d3d 0 10%,transparent 30%), radial-gradient(circle at 60% 92%,#5c2a1266 0 12%,transparent 35%), linear-gradient(160deg,#e9a526 7%,#592D11 30%,#93b178 65%,#773110 111%)} /* ===== Round 3: لایه‌ی براق (sheen) تمام‌عرض روی بوم نقاشی/کپسول باعث blend و repaint دائمی می‌شد ===== */ .cp-autumn-drawing:before,.cp-timecapsule:after{display:none!important;animation:none!important} .cp-drawing-canvas-wrap:before{mix-blend-mode:normal!important;opacity:.55} .cp-autumn-mist{display:none!important} .cp-drawing-canvas-wrap{contain:layout paint} .spooky-sides picture{display:contents} /* ========================================================= Couplina — guest header lock ========================================================= */ .couplina-auth-toast{ position:fixed; z-index:99999; right:50%; top:92px; transform:translate(50%,-14px) scale(.98); width:min(420px,calc(100vw - 28px)); padding:14px 16px; display:flex; align-items:center; gap:12px; direction:rtl; background:rgba(27,19,31,.96); color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:18px; box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s ease; } .couplina-auth-toast.show{opacity:1; transform:translate(50%,0) scale(1); pointer-events:auto} .couplina-auth-toast .cat-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(225,105,157,.24),rgba(255,193,117,.18));font-size:21px} .couplina-auth-toast .cat-copy{min-width:0;flex:1} .couplina-auth-toast b{display:block;font-size:14px;margin-bottom:3px} .couplina-auth-toast span{display:block;font-size:11px;line-height:1.7;opacity:.72} .couplina-guest-locked{position:relative} .couplina-guest-locked::after{content:'♡';position:absolute;top:5px;left:5px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-size:10px;background:rgba(255,255,255,.86);color:#8b466f;box-shadow:0 3px 10px rgba(0,0,0,.12);pointer-events:none} @media(max-width:700px){.couplina-auth-toast{top:72px}} /* ===== Couplina checkboxes (terms / remember me): gold + ruby, matched to the logo ===== */ .lg-row label{gap:9px;color:#e8cdb4;transition:color .2s} .lg-row label:hover{color:#ffe9cf} .lg-row input[type=checkbox]{ -webkit-appearance:none;appearance:none;flex:0 0 auto;position:relative; width:20px;height:20px;margin:0;border-radius:7px;cursor:pointer; border:1.5px solid rgba(255,201,74,.55); background:linear-gradient(145deg,rgba(255,215,106,.10),rgba(10,4,6,.55)); box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 0 rgba(255,201,74,0); transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .15s ease; } .lg-row input[type=checkbox]:hover{border-color:#ffd76a;box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 3px rgba(255,201,74,.12)} .lg-row input[type=checkbox]:active{transform:scale(.9)} .lg-row input[type=checkbox]:focus-visible{outline:none;border-color:#ffd76a;box-shadow:0 0 0 3px rgba(255,201,74,.28)} .lg-row input[type=checkbox]::after{ content:"";position:absolute;inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd76a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E") center/78% no-repeat; opacity:0;transform:scale(.4) rotate(-12deg); transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1); } .lg-row input[type=checkbox]:checked{ border-color:#ffd76a; background:radial-gradient(circle at 30% 25%,#e0245e 0%,#a3123f 45%,#5c0a22 100%); box-shadow:0 0 12px rgba(214,30,90,.45),inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.35); } .lg-row input[type=checkbox]:checked::after{opacity:1;transform:none} /* ===== Forgot password modal (code boxes + resend timer) ===== */ .fg-codefield{margin-top:2px} .fg-code{display:flex;justify-content:center;gap:10px;direction:ltr} .fg-code input{ width:52px;height:56px;padding:0;text-align:center;border-radius:14px; border:1.5px solid rgba(255,201,74,.5);background:rgba(10,4,6,.42); color:#ffe9cf;font:800 22px Vazirmatn,sans-serif;caret-color:#ffd76a;outline:none; transition:border-color .2s,box-shadow .2s,background .2s,opacity .2s; } .fg-code input:focus{border-color:#ffd76a;box-shadow:0 0 0 3px rgba(255,201,74,.2)} .fg-code input:disabled{opacity:.45;border-color:rgba(255,255,255,.14);cursor:not-allowed} .fg-resend{ display:block;width:100%;margin-top:10px;padding:9px;border-radius:12px; border:1px solid rgba(255,201,74,.35);background:rgba(255,201,74,.06); color:#ffd76a;font:700 12px Vazirmatn,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,color .2s; } .fg-resend:not(:disabled):hover{background:rgba(214,30,90,.22);border-color:#ffd76a} .fg-resend:disabled{color:#bfa08a;border-color:rgba(255,255,255,.12);background:transparent;cursor:not-allowed} #fgUser[readonly]{opacity:.7} @media(max-width:380px){.fg-code input{width:46px;height:52px}.fg-code{gap:8px}} /* Couple ID field */ #lgCoupleId{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center;text-transform:uppercase} .lg-field label small,.lg-field>span small{opacity:.62;font-size:.72em;font-weight:500} /* Couple ID field */ #lgCoupleId{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center;text-transform:uppercase} .lg-field>span small{opacity:.62;font-size:.72em;font-weight:500} /* Couplina: registration game is guest-only */ #snakeGame.auth-registration-hidden{display:none!important} /* ===== Couplina auth entrance — warm cinematic welcome ===== */ .couplina-entrance{ position:fixed;inset:0;z-index:99999;display:grid;place-items:center; pointer-events:none;opacity:0;visibility:hidden;overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(93,28,31,.72),rgba(17,6,8,.94) 58%,rgba(7,3,4,.98)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:opacity .42s ease,visibility .42s ease; } .couplina-entrance.show{opacity:1;visibility:visible} .couplina-entrance.leave{opacity:0} .ce-glow{position:absolute;width:min(72vw,700px);height:min(72vw,700px);border-radius:50%; background:radial-gradient(circle,rgba(255,184,83,.22),rgba(211,67,70,.10) 35%,transparent 70%); filter:blur(12px);animation:cePulse 1.8s ease-in-out infinite} .ce-card{position:relative;width:min(390px,84vw);padding:36px 28px 32px;text-align:center;border-radius:32px; border:1px solid rgba(255,207,133,.28);background:linear-gradient(145deg,rgba(66,25,25,.82),rgba(27,10,12,.78)); box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,240,210,.13); transform:translateY(35px) scale(.86);opacity:0;animation:ceCardIn .72s cubic-bezier(.16,1.25,.35,1) .08s forwards} .ce-logo-wrap{width:82px;height:82px;margin:0 auto 15px;border-radius:25px;display:grid;place-items:center; background:radial-gradient(circle,rgba(255,197,103,.20),rgba(214,62,82,.10) 60%,transparent 70%); box-shadow:0 0 45px rgba(255,177,74,.20);animation:ceLogo 1.5s ease-in-out infinite} .ce-logo-wrap img{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))} .ce-check{width:42px;height:42px;margin:-3px auto 14px;border-radius:50%;display:grid;place-items:center; color:#fff4dc;font:900 22px/1 Arial,sans-serif;background:linear-gradient(135deg,#d84d59,#9e263d); border:2px solid rgba(255,213,133,.8);box-shadow:0 0 0 7px rgba(255,190,88,.07),0 8px 25px rgba(143,28,47,.4); animation:ceCheck .55s cubic-bezier(.2,1.5,.4,1) .42s both} .ce-title{color:#ffe8c5;font:900 24px/1.5 Vazirmatn,sans-serif;text-shadow:0 3px 20px rgba(255,175,72,.18)} .ce-sub{margin-top:6px;color:#d8b99d;font:600 13px/1.8 Vazirmatn,sans-serif} .ce-orbit{position:absolute;border:1px solid rgba(255,193,91,.12);border-radius:50%;transform:rotate(-22deg);animation:ceOrbit 7s linear infinite} .ce-orbit-a{width:440px;height:170px}.ce-orbit-b{width:620px;height:240px;animation-duration:10s;animation-direction:reverse} .ce-hearts{position:absolute;inset:0;pointer-events:none} .ce-hearts i{position:absolute;color:#ef7980;font-style:normal;font-size:18px;opacity:0;animation:ceHeart 2s ease-out infinite} .ce-hearts i:nth-child(1){left:18%;top:62%;animation-delay:.15s}.ce-hearts i:nth-child(2){left:29%;top:28%;animation-delay:.7s} .ce-hearts i:nth-child(3){left:76%;top:30%;animation-delay:.35s}.ce-hearts i:nth-child(4){left:83%;top:66%;animation-delay:1s} .ce-hearts i:nth-child(5){left:12%;top:42%;animation-delay:1.25s}.ce-hearts i:nth-child(6){left:69%;top:72%;animation-delay:.8s} .ce-hearts i:nth-child(7){left:42%;top:18%;animation-delay:1.5s}.ce-hearts i:nth-child(8){left:56%;top:82%;animation-delay:.45s} @keyframes cePulse{50%{transform:scale(1.12);opacity:.72}} @keyframes ceCardIn{to{transform:none;opacity:1}} @keyframes ceLogo{50%{transform:translateY(-5px) scale(1.04)}} @keyframes ceCheck{from{transform:scale(.2) rotate(-25deg);opacity:0}to{transform:none;opacity:1}} @keyframes ceOrbit{to{transform:rotate(338deg)}} @keyframes ceHeart{0%{transform:translateY(18px) scale(.5);opacity:0}25%{opacity:.75}100%{transform:translateY(-90px) scale(1.15) rotate(18deg);opacity:0}} @media(max-width:600px){.ce-card{padding:30px 22px 27px;border-radius:28px}.ce-title{font-size:21px}.ce-sub{font-size:12px}.ce-orbit-a{width:330px;height:130px}.ce-orbit-b{width:470px;height:190px}} @media(prefers-reduced-motion:reduce){.couplina-entrance *{animation-duration:.01ms!important;animation-iteration-count:1!important}.couplina-entrance{transition:none}} /* Couplina — World Settings */ .world-settings-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,4,5,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transition:.3s ease} .world-settings-overlay.show{opacity:1;visibility:visible;pointer-events:auto} .world-settings-page{position:relative;width:min(760px,94vw);max-height:92vh;overflow:auto;border:1px solid #ffd28f24;border-radius:32px;background:radial-gradient(circle at 15% 0,#e8834a18,transparent 35%),linear-gradient(145deg,#2a130e,#12080b 70%);box-shadow:0 40px 120px #000d,0 0 80px #e8834a12;padding:28px;color:#fff;transform:translateY(28px) scale(.96);transition:.38s cubic-bezier(.2,.9,.25,1)} .world-settings-overlay.show .world-settings-page{transform:none} .world-settings-close{position:absolute;top:17px;left:18px;width:38px;height:38px;border:1px solid #fff1;border-radius:12px;background:#fff1;color:#f5d8c7;font-size:24px;cursor:pointer} .world-settings-cover{display:flex;align-items:center;gap:18px;padding:8px 8px 25px;border-bottom:1px solid #fff1}.settings-orbit{width:76px;height:76px;display:grid;place-items:center;border-radius:25px;background:radial-gradient(circle,#ffd28f,#e8834a 55%,#6b2b21);box-shadow:0 0 40px #e8834a55;color:#fff;font-size:35px}.world-settings-cover small{font-size:8px;letter-spacing:3px;color:#d69d78}.world-settings-cover h2{margin:7px 0 4px;font-size:25px}.world-settings-cover p{margin:0;color:#a99287;font-size:11px} .world-settings-form{padding-top:25px}.settings-avatar-wrap{display:flex;align-items:center;gap:12px;margin-bottom:24px}.settings-avatar{width:92px;height:92px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(145deg,#e8834a,#6b2b21);border:1px solid #ffd28f44;background-size:cover;background-position:center;box-shadow:0 15px 35px #0007;font-size:30px}.settings-avatar.has-photo{color:transparent}.avatar-upload,.avatar-remove{border:1px solid #ffd28f22;border-radius:12px;padding:10px 13px;background:#fff1;color:#f1d5c5;font:inherit;font-size:10px;cursor:pointer}.avatar-upload:hover,.avatar-remove:hover{background:#e8834a18;border-color:#e8834a55}.avatar-remove{color:#bda69b} .settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.settings-fields label{display:flex;flex-direction:column;gap:8px}.settings-fields label:first-child{grid-column:1/-1}.settings-fields span{font-size:10px;color:#e8cfc1}.settings-fields input{width:100%;box-sizing:border-box;border:1px solid #fff1;border-radius:13px;background:#0d0708aa;color:#fff;padding:13px 14px;outline:none;font:inherit;font-size:11px}.settings-fields input:focus{border-color:#e8834a88;box-shadow:0 0 0 3px #e8834a12}.settings-fields small{font-size:8px;color:#8f7a71;margin-top:-2px}.settings-input-prefix{display:flex;direction:ltr;align-items:center;border:1px solid #fff1;border-radius:13px;background:#0d0708aa;overflow:hidden}.settings-input-prefix b{padding:0 0 0 13px;color:#e8834a}.settings-input-prefix input{border:0;background:transparent} .settings-share-id{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;width:max-content;margin-top:2px;padding:8px 11px;border:1px solid #ffd28f2e;border-radius:11px;background:linear-gradient(135deg,#e8834a12,#ffd28f08);color:#e8cfc1;font:700 9px Estedad,Vazirmatn,Tahoma,sans-serif;cursor:pointer;transition:.22s ease;direction:rtl}.settings-share-id svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.settings-share-id:hover{border-color:#e8834a77;background:#e8834a18;color:#ffd9ad;transform:translateY(-1px);box-shadow:0 8px 20px #e8834a12}.settings-share-id.copied{border-color:#ffd28f88;background:#e8834a25;color:#ffe2bd}.settings-save-row{display:flex;align-items:center;gap:15px;margin-top:24px;padding-top:20px;border-top:1px solid #fff1}.settings-save-row span{font-size:9px;color:#917c72}.settings-save-row button{margin-right:auto;border:0;border-radius:14px;padding:13px 20px;background:linear-gradient(135deg,#e8834a,#b74f32);color:#fff;box-shadow:0 12px 30px #e8834a25;cursor:pointer;font:800 11px Estedad,Vazirmatn,Tahoma,sans-serif}.settings-save-row button:disabled{opacity:.6;cursor:wait}.profile-avatar.has-user-photo,.chat-avatar.has-user-photo,.presence-avatar.has-user-photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent!important} @media(max-width:600px){.world-settings-overlay{padding:10px}.world-settings-page{width:100%;border-radius:25px;padding:21px;max-height:94vh}.world-settings-cover{padding-top:46px}.settings-fields{grid-template-columns:1fr}.settings-fields label:first-child{grid-column:auto}.settings-avatar{width:78px;height:78px}.settings-save-row{flex-direction:column;align-items:stretch}.settings-save-row button{margin:0}.settings-save-row span{text-align:center}} /* Couplina — Privacy Settings */ .privacy-settings-overlay{position:fixed;inset:0;z-index:510;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,4,5,.8);-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);opacity:0;visibility:hidden;pointer-events:none;transition:.3s ease} .privacy-settings-overlay.show{opacity:1;visibility:visible;pointer-events:auto} .privacy-settings-page{position:relative;width:min(780px,94vw);max-height:92vh;overflow:auto;border:1px solid #ffd28f24;border-radius:32px;background:radial-gradient(circle at 15% 0,#e8834a18,transparent 35%),linear-gradient(145deg,#2a130e,#12080b 70%);box-shadow:0 40px 120px #000d,0 0 80px #e8834a12;padding:28px;color:#fff;transform:translateY(28px) scale(.96);transition:.38s cubic-bezier(.2,.9,.25,1)} .privacy-settings-overlay.show .privacy-settings-page{transform:none} .privacy-settings-close{position:absolute;top:17px;left:18px;width:38px;height:38px;border:1px solid #fff1;border-radius:12px;background:#fff1;color:#f5d8c7;font-size:24px;cursor:pointer} .privacy-settings-cover{display:flex;align-items:center;gap:18px;padding:8px 8px 25px;border-bottom:1px solid #fff1}.privacy-orbit{width:76px;height:76px;display:grid;place-items:center;border-radius:25px;background:radial-gradient(circle,#ffd28f,#e8834a 55%,#6b2b21);box-shadow:0 0 40px #e8834a55;color:#fff;font-size:31px}.privacy-settings-cover small,.devices-head small{font-size:8px;letter-spacing:3px;color:#d69d78}.privacy-settings-cover h2{margin:7px 0 4px;font-size:25px}.privacy-settings-cover p{margin:0;color:#a99287;font-size:11px}.privacy-settings-body{padding-top:23px}.privacy-card{display:flex;align-items:center;gap:18px;padding:18px 16px;margin-bottom:10px;border:1px solid #fff1;border-radius:19px;background:#0d0708aa}.privacy-card-copy{display:flex;flex-direction:column;gap:6px;flex:1}.privacy-card-copy b{font-size:12px}.privacy-card-copy span{font-size:9px;color:#a99287;line-height:1.8}.privacy-subcard{margin-right:28px;background:#fff1}.privacy-switch{position:relative;width:48px;height:28px;flex:none}.privacy-switch input{opacity:0;width:0;height:0}.privacy-switch span{position:absolute;inset:0;border-radius:20px;background:#3b2521;border:1px solid #ffffff18;cursor:pointer;transition:.25s}.privacy-switch span:before{content:'';position:absolute;width:20px;height:20px;top:3px;right:3px;border-radius:50%;background:#9b8177;transition:.25s;box-shadow:0 3px 8px #0008}.privacy-switch input:checked+span{background:#a84e32;box-shadow:0 0 18px #e8834a22}.privacy-switch input:checked+span:before{transform:translateX(-20px);background:#ffd28f}.privacy-note{padding:12px 14px;border-radius:15px;background:#e8834a0c;border:1px solid #e8834a18;color:#bfa89d;font-size:9px;line-height:1.9;margin:14px 0 24px}.devices-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.devices-head h3{margin:6px 0 0;font-size:15px}.devices-head button{border:1px solid #ffd28f22;border-radius:11px;background:#fff1;color:#d9b9aa;padding:9px 12px;font:inherit;font-size:9px;cursor:pointer}.privacy-device{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #fff1;border-radius:15px;background:#0d0708aa;margin-bottom:8px}.device-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#e8834a14;color:#e8834a;font-size:20px}.device-copy{flex:1;display:flex;flex-direction:column;gap:5px}.device-copy b{font-size:10px}.device-copy span{font-size:8px;color:#8f7a71;direction:rtl}.privacy-device em{font-style:normal;font-size:8px;color:#e8b477;white-space:nowrap}.privacy-loading{padding:18px;text-align:center;color:#8f7a71;font-size:9px}.privacy-save-row{display:flex;align-items:center;gap:15px;margin-top:22px;padding-top:19px;border-top:1px solid #fff1}.privacy-save-row span{font-size:9px;color:#917c72}.privacy-save-row button{margin-right:auto;border:0;border-radius:14px;padding:13px 20px;background:linear-gradient(135deg,#e8834a,#b74f32);color:#fff;box-shadow:0 12px 30px #e8834a25;cursor:pointer;font:800 11px Estedad,Vazirmatn,Tahoma,sans-serif}.privacy-save-row button:disabled,.devices-head button:disabled{opacity:.6;cursor:wait} @media(max-width:600px){.privacy-settings-overlay{padding:10px}.privacy-settings-page{width:100%;border-radius:25px;padding:21px;max-height:94vh}.privacy-settings-cover{padding-top:12px}.privacy-card{padding:15px 12px}.privacy-subcard{margin-right:14px}.privacy-save-row{flex-direction:column;align-items:stretch}.privacy-save-row button{margin:0}.privacy-save-row span{text-align:center}.devices-head{align-items:flex-start;gap:10px}.devices-head button{font-size:8px}.privacy-device{align-items:flex-start}.privacy-device em{font-size:7px}} /* Live notifications */ .notification-btn .notification-badge[hidden]{display:none!important} .notification-list{display:flex;flex-direction:column} .notification-empty{padding:26px 10px;text-align:center;color:#9f8980;font-size:9px} .notification-item{width:100%;border:0;border-bottom:1px solid #fff1;background:transparent;color:inherit;text-align:right;cursor:pointer;font-family:inherit} .notification-item.unread{background:linear-gradient(90deg,rgba(232,131,74,.08),transparent)} .notification-item:active{transform:scale(.995)} .notification-item>i{pointer-events:none} /* Couplina notifications: simple real login alerts + delete action */ .notification-item{cursor:pointer;position:relative;padding-left:42px!important;min-height:58px;transition:background .18s ease,transform .18s ease} .notification-item:hover{background:rgba(232,131,74,.07)} .notification-copy{min-width:0;flex:1;padding-right:4px} .notification-copy small{line-height:1.7} .notification-delete{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.04);color:#cdb6ac;display:grid;place-items:center;cursor:pointer;font-size:12px;opacity:.72;transition:.18s} .notification-delete:hover{opacity:1;background:rgba(220,70,70,.12);color:#ffb1a8;border-color:rgba(220,70,70,.25)} .notification-item.unread{background:linear-gradient(90deg,rgba(232,131,74,.10),transparent)} .notification-item .notif-unread-dot{position:absolute;right:4px;top:18px;width:6px;height:6px;background:#e61f82;border-radius:50%;box-shadow:0 0 10px #e61f82} /* Couple request notification actions */ .couple-request-actions{display:flex;gap:7px;margin-top:8px;direction:rtl} .couple-request-actions button{border:1px solid #ffffff18;border-radius:9px;padding:6px 12px;font:inherit;font-size:8px;cursor:pointer;transition:.18s ease} .couple-request-actions button:first-child{background:#e8834a20;color:#ffd7b0;border-color:#e8834a55} .couple-request-actions button:last-child{background:#ffffff08;color:#cbbab3} .couple-request-actions button:hover{transform:translateY(-1px);filter:brightness(1.12)} .couple-request-actions button:disabled{opacity:.5;cursor:wait;transform:none} /* Couple request decision feedback */ .notification-item.decision-accepted{background:linear-gradient(90deg,rgba(232,131,74,.16),rgba(232,131,74,.035));border-right:2px solid #e8834a;box-shadow:inset -8px 0 22px rgba(232,131,74,.06)} .notification-item.decision-rejected{background:linear-gradient(90deg,rgba(210,86,74,.12),rgba(210,86,74,.025));border-right:2px solid #c85d4e;opacity:.82} .notification-item.decision-accepted .notif-symbol{background:rgba(232,131,74,.22);color:#ffd28f;box-shadow:0 0 16px rgba(232,131,74,.12)} .notification-item.decision-rejected .notif-symbol{background:rgba(200,93,78,.18);color:#e8aaa0} .notification-decision-mark{position:absolute;right:4px;bottom:10px;width:19px;height:19px;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:900;line-height:1} .notification-item.decision-accepted .notification-decision-mark{background:rgba(232,131,74,.18);border:1px solid rgba(232,131,74,.35);color:#ffd28f} .notification-item.decision-rejected .notification-decision-mark{background:rgba(200,93,78,.14);border:1px solid rgba(200,93,78,.3);color:#e8aaa0} .notification-item.decision-accepted .notification-copy b{color:#ffd9aa} .notification-item.decision-rejected .notification-copy b{color:#d9b9b1} /* ========================================================= COUPLINA — PRIVATE CHAT / MONGODB CHAT UI Isolated chat styles: does not alter the rest of the theme. ========================================================= */ .chat-panel{z-index:10020} .chat-mini-status{display:flex;align-items:center;gap:8px;padding:7px 0 12px;color:#a9948d;font-size:9px} .chat-live-dot{width:7px;height:7px;border-radius:50%;background:#65e69a;box-shadow:0 0 13px #65e69a;animation:chatPulse 1.8s infinite} .chat-preview-list{max-height:220px;overflow:hidden} .chat-preview-empty{padding:25px 10px;text-align:center;color:#a9948d;font-size:10px;line-height:2} .chat-preview-list .chat-preview{cursor:pointer;transition:.2s ease} .chat-preview-list .chat-preview:hover{transform:translateX(-3px)} .chat-preview-list .chat-avatar{display:grid;place-items:center;overflow:hidden} .chat-preview-list .chat-avatar img{width:100%;height:100%;object-fit:cover} .chat-panel .panel-footer-btn{cursor:pointer} .couplina-chat-overlay{position:fixed;inset:0;z-index:50000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(5,2,11,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .couplina-chat-overlay.show{display:flex;animation:chatOverlayIn .25s ease} .couplina-chat-shell{width:min(900px,96vw);height:min(790px,94vh);position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,215,0,.18);border-radius:34px;background: radial-gradient(circle at 90% 0%,rgba(205,95,255,.16),transparent 32%), radial-gradient(circle at 0% 100%,rgba(255,125,69,.13),transparent 32%), linear-gradient(145deg,#100817 0%,#190d25 48%,#0a0610 100%); box-shadow:0 45px 140px rgba(0,0,0,.75),0 0 80px rgba(186,74,255,.12),inset 0 1px rgba(255,255,255,.06); color:#fff} .couplina-chat-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.025) 50%,transparent 66%);transform:translateX(-100%);animation:chatSheen 9s ease-in-out infinite} .couplina-chat-topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:24px 27px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(12,6,18,.62)} .chat-person{display:flex;align-items:center;gap:14px;min-width:0} .chat-avatar-large{width:57px;height:57px;flex:0 0 57px;border-radius:20px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#f2a35b,#8d3b71);font-size:23px;font-weight:900;color:#fff;box-shadow:0 10px 35px rgba(232,131,74,.2),inset 0 1px rgba(255,255,255,.28)} .chat-avatar-large img{width:100%;height:100%;object-fit:cover} .chat-kicker{display:block;font-size:8px;letter-spacing:.18em;color:#d8a2ff;font-weight:900;margin-bottom:4px} .chat-person h2{font-size:23px;margin:0;color:#fff} .chat-presence-line{display:flex;align-items:center;gap:6px;margin-top:4px;color:#a998aa;font-size:9px} .chat-presence-line i{width:6px;height:6px;border-radius:50%;background:#61e89a;box-shadow:0 0 10px #61e89a} .chat-close-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:5;width:40px;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.05);color:#fff;font-size:25px;cursor:pointer;transition:.2s} @media(hover:hover){.chat-close-btn:hover{transform:rotate(90deg);background:rgba(255,255,255,.1)}} .chat-aura{position:absolute;border-radius:50%;filter:blur(50px);opacity:.22;pointer-events:none} .chat-aura-one{width:170px;height:170px;background:#c34cff;right:-60px;top:100px} .chat-aura-two{width:150px;height:150px;background:#ff8a4d;left:-70px;bottom:110px} .chat-messages-wrap{position:relative;z-index:1;flex:1;overflow-y:auto;padding:24px 25px 14px;scroll-behavior:smooth} .chat-messages-wrap::-webkit-scrollbar{width:7px}.chat-messages-wrap::-webkit-scrollbar-thumb{background:#ffffff18;border-radius:99px} .chat-welcome-card{width:min(430px,90%);margin:0 auto 22px;padding:17px 20px;text-align:center;border:1px solid rgba(255,215,0,.13);border-radius:20px;background:linear-gradient(135deg,rgba(255,215,0,.05),rgba(196,76,255,.06));color:#a99aa9;font-size:9px;line-height:1.8} .chat-welcome-card div{color:#ffd56a;font-size:20px;text-shadow:0 0 16px #ffd56a55} .chat-welcome-card b{display:block;color:#e8dce9;font-size:11px;margin:2px 0} .chat-messages{display:flex;flex-direction:column;gap:10px} .chat-day-divider{text-align:center;margin:10px 0;color:#806f80;font-size:8px;display:flex;align-items:center;gap:10px} .chat-day-divider:before,.chat-day-divider:after{content:"";height:1px;background:linear-gradient(90deg,transparent,#ffffff10);flex:1} .chat-bubble-row{display:flex;max-width:82%;animation:chatBubbleIn .22s ease} .chat-bubble-row.mine{margin-right:auto;justify-content:flex-start} .chat-bubble-row.theirs{margin-left:auto;justify-content:flex-end} .chat-bubble{position:relative;padding:11px 14px 8px;border-radius:19px 19px 5px 19px;background:linear-gradient(135deg,#7b3bb2,#49245f);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 25px rgba(0,0,0,.18);white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.75;color:#fff} .chat-bubble-row.theirs .chat-bubble{border-radius:19px 19px 19px 5px;background:linear-gradient(135deg,#281b36,#1b1324);color:#f4eaf6} .chat-bubble-name{font-size:8px;color:#d6a9f4;font-weight:800;margin-bottom:2px} .chat-bubble-meta{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:4px;color:#cdb8d0;font-size:7px;opacity:.8} .chat-read-mark{letter-spacing:-2px;color:#72e5b2} .chat-typing{display:none;align-items:center;gap:4px;padding:0 27px 9px;color:#7e7081;font-size:8px} .chat-typing.show{display:flex} .chat-typing span{width:5px;height:5px;border-radius:50%;background:#b36be8;animation:chatDots 1s infinite} .chat-typing span:nth-child(2){animation-delay:.15s}.chat-typing span:nth-child(3){animation-delay:.3s} .chat-typing b{font-weight:500;margin-right:4px} .chat-composer{position:relative;z-index:3;margin:0 18px 18px;padding:10px 11px 8px;display:grid;grid-template-columns:42px 1fr 84px;grid-template-rows:auto 20px;gap:6px 8px;border:1px solid rgba(255,255,255,.09);border-radius:23px;background:rgba(9,5,14,.84);box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.04)} .chat-composer textarea{width:100%;min-height:43px;max-height:125px;resize:none;grid-column:2;grid-row:1;border:0;outline:0;background:transparent;color:#fff;padding:9px 2px;font:inherit;font-size:12px;line-height:1.7} .chat-composer textarea::placeholder{color:#756a79} .chat-tool-btn{grid-column:1;grid-row:1;align-self:center;width:42px;height:42px;border:1px solid rgba(255,215,0,.15);border-radius:14px;background:linear-gradient(145deg,#23172d,#150d1d);color:#ffd76a;font-size:22px;cursor:pointer;transition:.2s} .chat-tool-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 22px rgba(255,215,0,.1)} .chat-send-btn{grid-column:3;grid-row:1;align-self:center;height:43px;border:0;border-radius:14px;background:linear-gradient(135deg,#e78b4e,#a54bd4);color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:900;cursor:pointer;box-shadow:0 9px 25px rgba(173,74,211,.25);transition:.2s} .chat-send-btn:hover{transform:translateY(-2px);filter:brightness(1.08)} .chat-send-btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .chat-send-btn b{font-size:15px} .chat-composer-bottom{grid-column:2/4;grid-row:2;display:flex;justify-content:space-between;align-items:center;color:#655a68;font-size:7px} .chat-emoji-picker{position:absolute;bottom:78px;right:7px;width:min(360px,calc(100vw - 44px));padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(20,11,28,.98);box-shadow:0 25px 70px rgba(0,0,0,.65);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:chatPickerIn .18s ease} .emoji-picker-head{display:flex;justify-content:space-between;align-items:center;color:#eadfee;font-size:10px;padding:0 4px 9px;border-bottom:1px solid #fff1} .emoji-picker-head button{border:0;background:transparent;color:#aaa0ae;font-size:18px;cursor:pointer} .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding-top:8px;max-height:190px;overflow:auto} .emoji-grid button{border:0;background:transparent;border-radius:9px;font-size:22px;line-height:38px;cursor:pointer;transition:.15s} .emoji-grid button:hover{background:#ffffff0d;transform:scale(1.18)} @keyframes chatPulse{50%{opacity:.45;transform:scale(.8)}}@keyframes chatOverlayIn{from{opacity:0}to{opacity:1}}@keyframes chatBubbleIn{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}@keyframes chatDots{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}@keyframes chatPickerIn{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none}}@keyframes chatSheen{0%,65%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}} @media(max-width:700px){.couplina-chat-overlay{padding:0}.couplina-chat-shell{width:100vw;height:100dvh;border-radius:0;border:0}.couplina-chat-topbar{padding:18px 17px 14px}.chat-messages-wrap{padding:18px 14px 10px}.chat-bubble-row{max-width:90%}.chat-composer{margin:0 9px 9px;border-radius:20px}.chat-composer-bottom span:last-child{display:none}.chat-composer-bottom{grid-column:2/4}.chat-send-btn span{display:none}.chat-send-btn{width:48px;margin-right:auto}.chat-welcome-card{margin-bottom:15px}.chat-person h2{font-size:19px}} /* Couplina chat polish: emoji picker wraps in place instead of scrolling sideways */ .chat-emoji-picker { box-sizing: border-box; max-width: calc(100vw - 24px); overflow: hidden; } .emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; max-height: min(42vh, 310px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(220, 160, 255, .35) transparent; -webkit-overflow-scrolling: touch; } .emoji-grid button { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; min-height: 38px; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1.2; -webkit-tap-highlight-color: transparent; } .emoji-grid button:focus-visible { outline: 2px solid rgba(255, 215, 106, .8); outline-offset: -2px; background: rgba(255, 255, 255, .08); } @media (max-width: 420px) { .chat-emoji-picker { right: 0; width: calc(100vw - 24px); padding: 10px; } .emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .emoji-grid button { font-size: 21px; min-height: 37px; } } /* Clear, elegant boundary for messages that have not been read yet. */ .chat-unread-divider{display:flex;align-items:center;gap:10px;margin:16px 2px;color:#f0b6c8;font-size:10px;font-weight:700;text-align:center} .chat-unread-divider:before,.chat-unread-divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(240,182,200,.42),transparent)} /* Quick panel: subscription button */ .quick-grid button.quick-subscribe{grid-column:1/-1;min-height:86px;position:relative;background:linear-gradient(135deg,rgba(232,131,74,.20),rgba(255,215,0,.08));border-color:rgba(255,215,0,.28)} .quick-grid button.quick-subscribe:hover{background:linear-gradient(135deg,rgba(232,131,74,.30),rgba(255,215,0,.14));border-color:rgba(255,215,0,.5)} .quick-grid button.quick-subscribe b{font-size:11px} .quick-grid button.quick-subscribe small{font-size:8px} .quick-grid button.quick-subscribe em{position:absolute;top:12px;left:12px;font-style:normal;font-size:8px;padding:3px 9px;border-radius:99px;background:rgba(255,215,0,.14);color:#ffd36b;border:1px solid rgba(255,215,0,.25)} /* Romantic sticker packs — placed beside the emoji control in chat */ .chat-sticker-btn{display:flex!important;align-items:center;justify-content:center;gap:4px;min-width:58px!important;padding:0 8px!important;font-size:21px!important;color:#f5b7cf!important} .chat-sticker-btn span{font-size:10px;font-weight:800} .sticker-store-overlay,.sticker-detail-overlay{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(13,4,22,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .sticker-store-overlay.show,.sticker-detail-overlay.show{display:flex} .sticker-store,.sticker-detail-card{position:relative;width:min(560px,100%);max-height:min(88vh,780px);overflow:auto;border:1px solid #f6bfd84d;border-radius:26px;padding:26px;background:linear-gradient(150deg,#21132d,#35172e 60%,#1a1024);color:#fff0f6;box-shadow:0 28px 90px #0009} .sticker-store-close{position:absolute;left:14px;top:14px;width:36px;height:36px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff12;color:#fff;font-size:24px;z-index:2} .sticker-store-heading{display:flex;gap:14px;align-items:center;padding:4px 32px 20px 0} .sticker-store-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#ffb5d0,#ff6f9f);font-size:29px;flex-shrink:0} .sticker-store-heading small,.sticker-detail-eyebrow{color:#ff9fc3;font-size:9px;font-weight:900;letter-spacing:.12em} .sticker-store-heading h2{margin:5px 0;font-size:23px;color:#fff0f6} .sticker-store-heading p{margin:0;color:#d8bdcc;font-size:12px} .sticker-pack-grid{display:grid;gap:11px} .sticker-pack-card{width:100%;display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto;align-items:center;gap:9px 13px;text-align:right;padding:13px;border-radius:19px;border:1px solid #ffffff1a;background:#ffffff08;color:#fff0f6;transition:transform .2s,border-color .2s,background .2s} .sticker-pack-card:hover{transform:translateY(-2px);border-color:#ff9fc3aa;background:#ffffff10} .sticker-pack-preview{grid-row:span 2;display:grid;grid-template-columns:1fr 1fr;gap:3px;place-items:center;min-height:86px;border-radius:14px;background:linear-gradient(135deg,#49213f,#25172e);font-style:normal} .sticker-pack-preview i{font-style:normal;font-size:26px;filter:drop-shadow(0 3px 4px #0004)} .sticker-pack-label b,.sticker-pack-label small{display:block} .sticker-pack-label b{font-size:14px} .sticker-pack-label small{font-size:11px;color:#cbb2c5;margin-top:4px} .sticker-pack-status,.sticker-pack-price{font-size:11px;font-weight:800;justify-self:start} .sticker-pack-status{color:#83e5b5} .sticker-pack-price{color:#ffc1d7} .sticker-store-footnote{text-align:center;font-size:11px;color:#cbb2c5;margin:18px 0 0} .sticker-detail-card{text-align:center;width:min(430px,100%);padding:30px 24px} .sticker-detail-art{display:flex;justify-content:center;align-items:center;gap:14px;min-height:105px;margin:8px 0 14px;font-size:38px} .sticker-detail-card h2{font-size:28px;margin:7px 0;color:#fff0f6} .sticker-detail-card>p{font-size:13px;line-height:1.9;color:#d8bdcc} .sticker-detail-meta{display:flex;justify-content:space-between;gap:10px;margin:18px 0;padding:12px 14px;border-radius:13px;background:#ffffff0c;font-size:12px} .sticker-detail-meta span{color:#d8bdcc}.sticker-detail-meta b{color:#ffb2cf} .sticker-detail-stickers{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px 0} .sticker-detail-stickers button{width:51px;height:51px;border:1px solid #ffffff20;border-radius:14px;background:#ffffff0b;font-size:27px} .sticker-detail-stickers button:hover{background:#ff9fc322;border-color:#ff9fc3} .sticker-buy-button{width:100%;padding:13px 16px;border:0;border-radius:14px;background:linear-gradient(100deg,#ff8db8,#ffc1d7);color:#43162f;font-weight:900;font-size:14px} .sticker-buy-button:disabled{opacity:.7;cursor:default} .sticker-buy-note{font-size:11px!important;color:#d8bdcc!important;margin-bottom:0} @media(max-width:480px){.sticker-store,.sticker-detail-card{padding:22px 16px;border-radius:22px}.sticker-store-heading h2{font-size:19px}.sticker-pack-card{grid-template-columns:82px 1fr;padding:10px;gap:8px}.sticker-pack-preview{min-height:78px}.sticker-pack-preview i{font-size:22px}.sticker-pack-label b{font-size:13px}} /* Keep both controls side-by-side rather than overlapping the emoji button */ .chat-composer{grid-template-columns:42px 64px minmax(0,1fr) 84px} .chat-composer #chatEmojiBtn{grid-column:1;grid-row:1} .chat-composer #chatStickerBtn{grid-column:2;grid-row:1;width:64px!important;min-width:64px!important} .chat-composer textarea{grid-column:3} .chat-composer .chat-send-btn{grid-column:4} .chat-composer .chat-composer-bottom{grid-column:1/-1} @media(max-width:520px){ .chat-composer{grid-template-columns:38px 58px minmax(0,1fr) 48px} .chat-composer #chatEmojiBtn{width:38px} .chat-composer #chatStickerBtn{width:58px!important;min-width:58px!important} } /* ===== Telegram-style animated sticker packs ===== */ .stk{display:block;width:100%;height:auto;overflow:visible} .stk .ch{transform-box:fill-box;transform-origin:50% 100%} .stk .a-bounce{animation:stkBounce 1.5s ease-in-out infinite} .stk .a-wiggle{animation:stkWiggle 1.8s ease-in-out infinite} .stk .a-pulse{animation:stkPulse 1.6s ease-in-out infinite} .stk .a-float{animation:stkFloat 2.4s ease-in-out infinite} .stk .fh{animation:stkRise 2.6s ease-in infinite;opacity:0} @keyframes stkBounce{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-9px) scale(.98,1.03)}70%{transform:translateY(0) scale(1.03,.96)}} @keyframes stkWiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}} @keyframes stkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes stkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes stkRise{0%{opacity:0;transform:translateY(8px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-18px)}} @media (prefers-reduced-motion:reduce){.stk .ch,.stk .fh{animation:none}} .tg-pack{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"strip strip" "info action";gap:6px 10px;align-items:center;padding:12px!important;text-align:right} .tg-strip{grid-area:strip;display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .tg-info{grid-area:info;display:flex;flex-direction:column;gap:2px} .tg-info b{font-size:16px} .tg-info small{opacity:.7;font-size:12px} .tg-action{grid-area:action;padding:7px 16px;border-radius:999px;background:linear-gradient(135deg,#ff6fa0,#ff9fc3);color:#fff;font-weight:800;font-size:13px;white-space:nowrap} .tg-action.is-free{background:#ffffff18;color:#ffd1e1} .sticker-detail-art{display:flex;justify-content:center} .sticker-detail-art .stk.big{width:170px;height:auto} .sticker-detail-stickers.stk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:36vh;overflow:auto} .sticker-detail-stickers.stk-grid button{position:relative;width:auto;height:auto;aspect-ratio:1/1.05;padding:4px;border:0;border-radius:14px;background:#ffffff0b} .sticker-detail-stickers.stk-grid button:hover,.sticker-detail-stickers.stk-grid button:active{background:#ff9fc328} .sticker-detail-stickers.stk-grid em{position:absolute;top:2px;left:4px;font-style:normal;font-size:12px} .chat-bubble.is-sticker{background:none!important;box-shadow:none!important;border:0!important;padding:0!important} .chat-bubble.is-sticker .chat-stk{width:min(170px,46vw);height:auto} .stk .a-sway{animation:stkSway 3.2s ease-in-out infinite} @keyframes stkSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} @media (prefers-reduced-motion:reduce){.stk .a-sway{animation:none}} /* ===== sticker section: vertical scroll only, never sideways ===== */ .sticker-store-overlay,.sticker-detail-overlay{overflow:hidden;touch-action:pan-y} .sticker-store,.sticker-detail-card{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;max-width:100%} .sticker-detail-stickers.stk-grid{max-height:none!important;overflow:visible!important} .sticker-store *,.sticker-detail-card *{min-width:0} .sticker-pack-card,.tg-pack{max-width:100%;box-sizing:border-box} .tg-strip>*,.stk-grid>*{min-width:0;max-width:100%} .sticker-detail-card .stk{max-width:100%} /* ========================================================= Chat: reply / edit / swipe-to-reply ========================================================= */ .chat-messages-wrap{overflow-x:hidden} .chat-bubble-row{position:relative;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent;touch-action:pan-y;-webkit-user-select:none;user-select:none} .chat-bubble-row .chat-bubble{position:relative;z-index:1;transition:transform .22s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s} .chat-bubble-row.is-dragging{cursor:grabbing} .chat-bubble-row.is-dragging .chat-bubble{transition:none} .chat-bubble-row:focus-visible .chat-bubble{box-shadow:0 0 0 2px #ffd76a88} .chat-bubble-row.is-selected .chat-bubble{box-shadow:0 0 0 2px #e0a6ff88,0 10px 25px rgba(0,0,0,.25)} .chat-bubble-row.is-flash .chat-bubble{animation:chatFlash 1.4s ease} @keyframes chatFlash{0%,100%{box-shadow:0 10px 25px rgba(0,0,0,.18)}30%,70%{box-shadow:0 0 0 3px #ffd76acc,0 0 28px #ffd76a66}} /* arrow revealed underneath the bubble while dragging */ .chat-swipe-hint{position:absolute;top:50%;z-index:0;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;border-radius:50%;background:rgba(224,166,255,.22);color:#f2d6ff;font-size:16px;font-weight:900;opacity:0;pointer-events:none;left:6px;transition:background .15s,color .15s} .chat-bubble-row.is-armed .chat-swipe-hint{background:#c34cff;color:#fff;box-shadow:0 0 16px #c34cff88} .chat-bubble-row.is-sticker-row{cursor:pointer} .chat-edited{font-style:normal;opacity:.85} /* quoted message inside a bubble */ .chat-reply-quote{display:flex;flex-direction:column;gap:1px;margin:0 0 6px;padding:5px 9px;border-radius:10px;border-right:3px solid #ffd76a;background:rgba(0,0,0,.22);cursor:pointer;max-width:100%;overflow:hidden} .chat-reply-quote b{font-size:8px;color:#ffd76a;font-weight:800} .chat-reply-quote span{font-size:10px;line-height:1.6;color:#e8dcec;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-bubble.is-sticker .chat-reply-quote{background:rgba(25,13,35,.85)} /* bar above the composer (reply / edit) */ .chat-context-bar{position:relative;z-index:3;margin:0 18px -6px;padding:8px 12px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.09);border-bottom:0;border-radius:18px 18px 0 0;background:rgba(20,11,28,.96);animation:chatPickerIn .18s ease} .chat-context-bar[hidden]{display:none} .chat-context-bar:before{content:"";align-self:stretch;width:3px;border-radius:3px;background:linear-gradient(#ffd76a,#c34cff);order:0} .chat-context-bar[data-kind="edit"]:before{background:linear-gradient(#72e5b2,#4fb4e8)} .ccb-icon{font-size:17px;color:#ffd76a;flex:0 0 auto} .chat-context-bar[data-kind="edit"] .ccb-icon{color:#72e5b2} .ccb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .ccb-body b{font-size:10px;color:#f0e2f4} .ccb-body small{font-size:10px;color:#a998aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ccb-close{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:18px;line-height:1;cursor:pointer} .ccb-close:hover{background:rgba(255,255,255,.14)} .chat-send-btn.is-edit{background:linear-gradient(135deg,#3fbf8f,#2f8fd0)} /* tap / right-click menu */ .chat-msg-menu{position:fixed;z-index:60000;min-width:150px;padding:6px;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(24,13,34,.98);box-shadow:0 20px 60px rgba(0,0,0,.65);animation:chatPickerIn .14s ease} .chat-msg-menu[hidden]{display:none} .chat-msg-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:11px;background:transparent;color:#f4eaf6;font:inherit;font-size:12px;font-weight:700;text-align:right;cursor:pointer} .chat-msg-menu button[hidden]{display:none} .chat-msg-menu button span{width:18px;text-align:center;color:#ffd76a;font-size:15px} .chat-msg-menu button:hover,.chat-msg-menu button:focus-visible{background:rgba(195,76,255,.2);outline:0} @media(max-width:700px){ .chat-context-bar{margin:0 9px -6px} .chat-msg-menu button{padding:12px 14px;font-size:13px} } @media (prefers-reduced-motion:reduce){.chat-bubble-row .chat-bubble{transition:none}.chat-bubble-row.is-flash .chat-bubble{animation:none}} /* Jump to latest chat message */ /* Refined jump-to-latest control */ .chat-scroll-bottom{position:sticky;bottom:16px;align-self:flex-end;z-index:8;display:flex;align-items:center;justify-content:center;gap:0;flex:0 0 46px;width:46px;height:46px;margin:-62px 10px 16px 0;padding:0;overflow:visible;border:1px solid rgba(255,224,154,.62);border-radius:999px;background:linear-gradient(145deg,rgba(255,230,174,.98),rgba(232,166,111,.98) 48%,rgba(197,119,145,.98));color:#351c32;box-shadow:0 8px 24px rgba(0,0,0,.34),0 0 0 5px rgba(255,218,158,.075),inset 0 1px 0 rgba(255,255,255,.72);cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,filter .22s ease;animation:chatScrollIn .24s cubic-bezier(.2,.8,.2,1) both;isolation:isolate} .chat-scroll-bottom-glow{position:absolute;inset:-5px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,223,153,.3),rgba(224,139,170,.18));filter:blur(10px);opacity:.7;z-index:-1;pointer-events:none} .chat-scroll-bottom svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease} .chat-scroll-bottom-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(4px,-50%);white-space:nowrap;padding:7px 11px;border:1px solid rgba(255,222,166,.2);border-radius:10px;background:rgba(28,17,31,.94);color:#ffe5c1;font-size:11px;font-weight:700;letter-spacing:-.1px;box-shadow:0 5px 18px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease} .chat-scroll-bottom:hover{transform:translateY(-3px) scale(1.035);filter:brightness(1.06);box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 0 6px rgba(255,218,158,.1),inset 0 1px 0 rgba(255,255,255,.8)} .chat-scroll-bottom:hover svg{transform:translateY(2px)} .chat-scroll-bottom:hover .chat-scroll-bottom-label,.chat-scroll-bottom:focus-visible .chat-scroll-bottom-label{opacity:1;transform:translate(0,-50%)} .chat-scroll-bottom:active{transform:scale(.94)} .chat-scroll-bottom:focus-visible{outline:2px solid #fff0cf;outline-offset:4px} .chat-scroll-bottom[hidden]{display:none} @keyframes chatScrollIn{from{opacity:0;transform:translateY(8px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:700px){.chat-scroll-bottom{bottom:12px;margin:-58px 5px 12px 0;width:43px;height:43px;flex-basis:43px}.chat-scroll-bottom-label{display:none}} @media(prefers-reduced-motion:reduce){.chat-scroll-bottom,.chat-scroll-bottom svg,.chat-scroll-bottom-label{animation:none;transition:none}} /* In-chat message search */ .chat-top-actions{display:flex;align-items:center;gap:9px;flex:none} .chat-search-toggle{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));color:#f7d7ff;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease} .chat-search-toggle:hover{transform:translateY(-2px);border-color:rgba(235,178,255,.45);background:rgba(181,100,218,.16)} .chat-search-toggle svg,.chat-search-input-wrap>svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .chat-search-panel{position:relative;z-index:4;padding:12px 24px 13px;border-bottom:1px solid rgba(255,255,255,.075);background:linear-gradient(110deg,rgba(31,17,43,.97),rgba(18,10,27,.97));box-shadow:0 10px 26px rgba(0,0,0,.14);animation:chatSearchIn .18s ease both} .chat-search-panel[hidden]{display:none} .chat-search-input-wrap{display:flex;align-items:center;gap:10px;min-height:43px;padding:0 12px;border:1px solid rgba(219,165,244,.2);border-radius:14px;background:rgba(5,3,10,.46);color:#d9b8ea;transition:border-color .2s,box-shadow .2s} .chat-search-input-wrap:focus-within{border-color:rgba(220,164,255,.6);box-shadow:0 0 0 3px rgba(177,93,216,.1)} .chat-search-input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:12px;padding:10px 0} .chat-search-input-wrap input::placeholder{color:#8f7c99} .chat-search-input-wrap button,.chat-search-controls button{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.045);color:#e9d7f1;font:inherit;font-size:17px;cursor:pointer;transition:background .16s,border-color .16s} .chat-search-input-wrap button:hover,.chat-search-controls button:hover{background:rgba(198,124,232,.17);border-color:rgba(220,164,255,.32)} .chat-search-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;color:#a998b4;font-size:10px} .chat-search-controls>div{display:flex;align-items:center;gap:5px} .chat-search-controls button{font-size:14px} .chat-bubble-row.chat-search-highlight .chat-bubble{border-color:rgba(255,218,126,.95);box-shadow:0 0 0 3px rgba(255,209,102,.14),0 0 28px rgba(255,190,89,.2);animation:chatSearchPulse 1.3s ease-in-out 2} @keyframes chatSearchIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} @keyframes chatSearchPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}} @media(max-width:700px){.chat-search-panel{padding:10px 13px 11px}.chat-search-input-wrap{min-height:41px}.chat-top-actions{gap:6px}.chat-search-toggle,.chat-close-btn{width:38px;height:38px}} @media(prefers-reduced-motion:reduce){.chat-search-panel,.chat-bubble-row.chat-search-highlight .chat-bubble{animation:none}.chat-search-toggle,.chat-search-input-wrap,.chat-search-controls button{transition:none}} /* Couplina chat: multi-pin support */ .chat-pinned-banner{position:relative;z-index:4;display:flex;align-items:center;gap:4px;margin:8px 18px 0;padding:5px 7px 5px 5px;border:1px solid rgba(255,215,106,.22);border-radius:15px;background:linear-gradient(110deg,rgba(255,215,106,.09),rgba(195,76,255,.09));box-shadow:0 8px 24px rgba(0,0,0,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .chat-pinned-banner[hidden]{display:none!important} .chat-pinned-jump{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px 8px;border:0;background:transparent;color:#f8e9c2;text-align:right;cursor:pointer} .chat-pinned-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:rgba(255,215,106,.11);font-size:17px} .chat-pinned-copy{display:flex;flex-direction:column;gap:2px;min-width:0} .chat-pinned-copy b{font-size:10px;color:#ffdf8a} .chat-pinned-copy small{font-size:9px;color:#d4c7dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(65vw,540px)} .chat-pinned-arrow{margin-right:auto;color:#ffdf8a;font-size:16px} .chat-pinned-hide{width:27px;height:27px;border:0;border-radius:9px;background:rgba(255,255,255,.05);color:#bcaec5;font-size:17px;cursor:pointer} .chat-bubble-row.is-pinned{align-items:center;gap:7px} .chat-pinned-marker{align-self:center;flex:0 0 auto;display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,215,106,.2);border-radius:9px;background:rgba(255,215,106,.08);font-size:13px;box-shadow:0 3px 12px rgba(255,215,106,.08)} .chat-pin-choice-overlay[hidden]{display:none!important} .chat-pin-choice-overlay{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px;background:rgba(8,4,13,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:chatPinFade .16s ease} .chat-pin-choice{width:min(390px,100%);padding:25px 22px 18px;border:1px solid rgba(255,215,106,.22);border-radius:25px;background:radial-gradient(circle at 90% 0,rgba(195,76,255,.15),transparent 42%),linear-gradient(145deg,#21152c,#100b17);color:#f7edf8;box-shadow:0 28px 90px rgba(0,0,0,.55);text-align:center} .chat-pin-choice-symbol{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;border-radius:17px;background:linear-gradient(145deg,rgba(255,215,106,.18),rgba(195,76,255,.16));font-size:25px} .chat-pin-choice h3{margin:0 0 8px;font-size:16px} .chat-pin-choice p{margin:0 0 18px;color:#b9a9c1;font-size:11px;line-height:1.9} .chat-pin-option{width:100%;display:flex;align-items:center;gap:12px;margin:8px 0;padding:12px 13px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.035);color:#f6edf8;text-align:right;cursor:pointer;transition:transform .18s,border-color .18s,background .18s} .chat-pin-option:hover{transform:translateY(-1px);border-color:rgba(255,215,106,.35);background:rgba(255,215,106,.06)} .chat-pin-option.primary{border-color:rgba(255,215,106,.25);background:linear-gradient(100deg,rgba(255,215,106,.09),rgba(195,76,255,.07))} .chat-pin-option>span:first-child{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(255,255,255,.06);font-size:20px;color:#ffdf8a} .chat-pin-option>span:last-child{display:flex;flex-direction:column;gap:4px} .chat-pin-option b{font-size:11px} .chat-pin-option small{font-size:9px;color:#b9a9c1} .chat-pin-cancel{margin-top:7px;padding:8px 20px;border:0;background:transparent;color:#a99bb2;font:inherit;font-size:10px;cursor:pointer} @keyframes chatPinFade{from{opacity:0}to{opacity:1}} @media(max-width:700px){.chat-pinned-banner{margin:7px 10px 0}.chat-pinned-copy small{max-width:62vw}.chat-pin-choice{padding:22px 17px 15px}} /* Global site search results */ .global-search-results{display:grid;gap:7px;margin-top:12px;max-height:min(46vh,390px);overflow:auto;overscroll-behavior:contain;padding:1px 3px 4px} .global-search-empty,.global-search-count{font-size:10px;color:#d4bdb0;padding:10px 8px} .global-search-count{padding:2px 8px;color:var(--yellow)} .global-search-result{display:flex;flex-direction:column;gap:4px;width:100%;text-align:right;padding:11px 13px;border:1px solid rgba(255,203,163,.12);border-radius:12px;background:rgba(255,255,255,.045);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease} .global-search-result:hover,.global-search-result:focus-visible{background:rgba(232,131,74,.13);border-color:rgba(255,203,163,.48);outline:none;transform:translateY(-1px)} .global-search-result strong{font-size:11px;font-weight:700;color:#ffe2bd} .global-search-result span{font-size:9px;line-height:1.9;color:#c4a896;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .global-search-target{outline:2px solid rgba(255,201,74,.9)!important;outline-offset:5px;border-radius:12px;transition:outline-color .25s ease} .search-panel{max-height:calc(100vh - 105px);overflow-y:auto;overscroll-behavior:contain} @media(max-width:700px){.global-search-results{max-height:42vh}.global-search-result{padding:10px}.global-search-result strong{font-size:10px}} @media(prefers-reduced-motion:reduce){.global-search-result{transition:none}.global-search-target{transition:none}} /* Telegram-like romantic reactions for private couple chat */ .chat-bubble-row{position:relative;flex-direction:column;align-items:flex-start;} .chat-bubble-row.mine{align-items:flex-start;} .chat-bubble-row.theirs{align-items:flex-end;} .chat-reactions-line{position:relative;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px;margin:4px 4px 0;max-width:100%;z-index:4;} .chat-reaction-chip,.chat-reaction-add{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:34px;height:28px;padding:2px 8px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(27,14,34,.9);color:#fff;box-shadow:0 3px 12px #0002;cursor:pointer;transition:transform .16s,border-color .16s,background .16s;font-family:inherit;} .chat-heart-reply{display:inline-flex;align-items:center;justify-content:center;width:29px;min-width:29px;height:28px;padding:0;border:1px solid rgba(255,143,185,.34);border-radius:999px;background:linear-gradient(145deg,rgba(255,105,157,.15),rgba(255,255,255,.045));color:#ff9dbf;font-size:20px;font-weight:700;line-height:1;font-family:inherit;box-shadow:0 3px 12px #0002;cursor:pointer;transition:transform .18s,border-color .18s,background .18s,color .18s;} .chat-heart-reply:hover,.chat-heart-reply:focus-visible{transform:scale(1.1);border-color:#ff8ab7;background:rgba(255,105,157,.22);color:#ff5c99;outline:none;} .chat-heart-reply:active,.chat-heart-reply.is-sending{transform:scale(.92);color:#ff4f8d;} .chat-heart-reply:disabled{opacity:.65;cursor:wait;} .chat-reaction-chip span{font-size:15px;line-height:1}.chat-reaction-chip small{font-size:10px;color:#f9dce8;line-height:1} .chat-reaction-chip.is-mine{border-color:#ff91bc;background:linear-gradient(135deg,#772d58,#402046);box-shadow:0 0 0 1px #ff91bc22,0 4px 14px #ff4f9630} .chat-reaction-chip:hover,.chat-reaction-add:hover{transform:translateY(-1px);border-color:#ff9fc3} .chat-reaction-add{width:29px;min-width:29px;height:27px;padding:0;font-size:19px;color:#f7b6d0;background:rgba(255,255,255,.06);} .chat-reaction-picker{position:absolute;bottom:calc(100% + 8px);right:0;display:grid;grid-template-columns:repeat(5,36px);gap:4px;padding:9px;border:1px solid #f5a9cc4d;border-radius:17px;background:linear-gradient(145deg,#211328,#3a1c37);box-shadow:0 15px 40px #0008;z-index:30;animation:chatReactionIn .16s ease;} .chat-bubble-row.mine .chat-reaction-picker{right:auto;left:0} .chat-reaction-picker[hidden]{display:none!important} .chat-reaction-option{display:grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:11px;background:#ffffff09;font-size:21px;cursor:pointer;transition:transform .15s,background .15s} .chat-reaction-option:hover,.chat-reaction-option:focus-visible{transform:scale(1.12);background:#ff9fc326;border-color:#ff9fc366;outline:none} @keyframes chatReactionIn{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:600px){.chat-reactions-line{gap:4px;margin-top:3px}.chat-reaction-chip{height:27px;padding:2px 7px}.chat-reaction-picker{grid-template-columns:repeat(5,34px);padding:8px}.chat-reaction-option{width:34px;height:34px}} /* ── Mood (حال من) picker ── */ .mood-box .policy-scroll.mood-scroll{text-align:center;padding:14px 18px 26px;max-height:calc(min(82vh,780px) - 105px)} .mood-title-main{margin:4px 0 14px;font-size:26px;font-weight:800;color:#fae9e2;letter-spacing:.02em} /* گوی ایموجی: هر حال رنگ خودش را دارد (--mc) */ .mood-orb{ --orb:36px; position:relative;display:inline-grid;place-items:center;flex-shrink:0; width:var(--orb);height:var(--orb);border-radius:50%; font-size:calc(var(--orb)*.56);line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif; background: radial-gradient(circle at 30% 22%,rgba(255,255,255,.5),transparent 46%), radial-gradient(circle at 72% 88%,color-mix(in srgb,var(--mc,#ff8fb3) 60%,transparent),transparent 70%), color-mix(in srgb,var(--mc,#ff8fb3) 24%,#1a0a10); border:1px solid color-mix(in srgb,var(--mc,#ff8fb3) 55%,transparent); box-shadow:inset 0 -6px 10px rgba(0,0,0,.18),inset 0 2px 3px rgba(255,255,255,.28),0 6px 14px color-mix(in srgb,var(--mc,#ff8fb3) 28%,transparent); transition:transform .28s cubic-bezier(.34,1.56,.64,1); } .mood-orb::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--mc,#ff8fb3);opacity:0;pointer-events:none} .mood-selected{ --mc:#ffb18a; display:flex;align-items:center;gap:16px;justify-content:center; padding:16px 18px;margin:0 auto 12px;max-width:440px;border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--mc) 14%,transparent),rgba(166,93,255,.07)); border:1px solid color-mix(in srgb,var(--mc) 24%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.2); transition:border-color .25s ease,background .25s ease; } .mood-selected.has-mood{border-color:color-mix(in srgb,var(--mc) 55%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--mc) 22%,transparent),rgba(204,91,123,.1))} .mood-selected .mood-orb{--orb:64px} .mood-selected.has-mood .mood-orb::before{ content:"";position:absolute;inset:-6px;border-radius:50%; background:conic-gradient(from 0deg,transparent 0 30%,var(--mc) 62%,transparent 92%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); animation:moodSpin 3.4s linear infinite; } .mood-selected.pop .mood-orb{animation:moodPop .55s cubic-bezier(.34,1.56,.64,1)} .mood-selected-emoji{line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))} .mood-selected-text{text-align:right;min-width:0} .mood-selected-text b{display:block;color:#fae9e2;font-size:15px;font-weight:800;margin:0 0 4px;line-height:1.4} .mood-selected-text small{display:block;color:#b8968c;font-size:10.5px;line-height:1.6} /* قفل ۱ ساعته + تایمر */ .mood-lock-banner{ position:relative;overflow:hidden;display:flex;align-items:center;gap:10px; margin:0 auto 14px;max-width:440px;padding:11px 14px 15px;border-radius:16px;text-align:right; background:rgba(255,180,80,.1);border:1px solid rgba(255,180,80,.28);color:#f0c98a; } .mood-lock-banner[hidden]{display:none!important} .mood-lock-icon{font-size:20px;flex-shrink:0} .mood-lock-copy{flex:1;min-width:0} .mood-lock-copy b{display:block;font-size:12px;font-weight:800} .mood-lock-copy small{display:block;margin-top:2px;font-size:10px;line-height:1.55;color:#c9a56c;font-weight:600} .mood-lock-clock{flex-shrink:0;font-variant-numeric:tabular-nums;font-size:21px;font-weight:800;letter-spacing:.04em;color:#ffd9a0;direction:ltr;unicode-bidi:isolate} .mood-lock-bar{position:absolute;inset:auto 0 0 0;height:4px;background:rgba(255,180,80,.16);font-style:normal} .mood-lock-bar u{display:block;height:100%;text-decoration:none;background:linear-gradient(90deg,#ffb86b,#ff7a95);transform-origin:right center;transition:transform 1s linear} /* اشتراک فعال */ .mood-premium-badge{ display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap; margin:0 auto 14px;max-width:440px;padding:9px 14px;border-radius:14px; background:linear-gradient(135deg,rgba(255,215,0,.13),rgba(166,93,255,.13)); border:1px solid rgba(255,215,0,.32);color:#ffe9a8;font-size:11px; } .mood-premium-badge[hidden]{display:none!important} .mood-premium-badge b{font-weight:800} .mood-premium-badge small{color:#e6cf8f;font-size:10px;font-weight:600} /* حال پارتنر */ .mood-partner{ --mc:#ff8fb3; display:flex;align-items:center;gap:12px;margin:0 auto 16px;max-width:440px;padding:11px 14px;border-radius:18px;text-align:right; background:rgba(255,255,255,.04);border:1px dashed rgba(255,177,137,.22); } .mood-partner[hidden]{display:none!important} .mood-partner.has-mood{border-style:solid;border-color:color-mix(in srgb,var(--mc) 40%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--mc) 12%,transparent),rgba(255,255,255,.03))} .mood-partner .mood-orb{--orb:46px} .mood-partner-copy{min-width:0} .mood-partner-copy b{display:block;color:#fae9e2;font-size:13px;font-weight:800;line-height:1.45} .mood-partner-copy small{display:block;color:#b8968c;font-size:10px;line-height:1.55} .mood-partner-copy .mood-partner-eyebrow{color:#e0b8a8;font-weight:700;font-size:10.5px} .mood-hint{margin:0 0 12px;color:#c9a396;font-size:12px;font-weight:600;letter-spacing:.02em} .mood-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 18px;max-width:540px} .mood-chip{ --mc:#ff8fb3; display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 8px; border:1.5px solid color-mix(in srgb,var(--mc) 22%,transparent);border-radius:999px; background:rgba(255,255,255,.045);color:#f0d5c8;cursor:pointer;text-align:right;direction:rtl;font-family:inherit; transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease; } .mood-chip:hover:not(:disabled){background:color-mix(in srgb,var(--mc) 14%,transparent);border-color:color-mix(in srgb,var(--mc) 55%,transparent);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.2)} .mood-chip:hover:not(:disabled) .mood-orb{transform:scale(1.16) rotate(-8deg)} .mood-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--mc) 70%,transparent);outline-offset:2px} .mood-chip.active{ background:linear-gradient(145deg,color-mix(in srgb,var(--mc) 30%,transparent),color-mix(in srgb,var(--mc) 12%,transparent)); border-color:color-mix(in srgb,var(--mc) 85%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--mc) 25%,transparent),0 8px 20px color-mix(in srgb,var(--mc) 22%,transparent); } .mood-chip.active .mood-orb{animation:moodFloat 2.6s ease-in-out infinite} .mood-chip.active .mood-orb::after{animation:moodRing 1.9s ease-out infinite} .mood-chip:disabled,.mood-chip.is-locked{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none} .mood-chip.active:disabled,.mood-chip.active.is-locked{opacity:1} .mood-label{font-size:12px;font-weight:700;line-height:1.35;color:#f5e0d6;white-space:nowrap} .mood-chip.active .mood-label{color:#fff} .mood-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px;position:sticky;bottom:0;padding-top:8px;background:linear-gradient(180deg,transparent,rgba(12,4,10,.95) 30%)} .mood-save-btn{appearance:none;border:0;cursor:pointer;min-width:220px;padding:14px 40px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:800;color:#1a0a10;background:linear-gradient(135deg,#ffb18a,#ff7a95 55%,#e85a8c);box-shadow:0 10px 28px rgba(232,90,140,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease} .mood-save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px rgba(232,90,140,.45),inset 0 1px 0 rgba(255,255,255,.4)} .mood-save-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .mood-save-note{margin:0;min-height:16px;font-size:11px;color:#b59a90;font-weight:600;line-height:1.6} .mood-save-note.ok{color:#8fd4a8} /* نشان حال پارتنر کنار کارت حضور در هدر */ .presence-mood{--mc:#ff8fb3;width:24px;height:24px;display:inline-grid;place-items:center;flex-shrink:0;font-size:13px;line-height:1;border-radius:50%;cursor:default;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;background:color-mix(in srgb,var(--mc) 26%,#1a0a10);border:1px solid color-mix(in srgb,var(--mc) 60%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--mc) 30%,transparent)} .presence-mood[hidden]{display:none!important} @keyframes moodFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) scale(1.07)}} @keyframes moodRing{0%{transform:scale(.92);opacity:.85}100%{transform:scale(1.4);opacity:0}} @keyframes moodSpin{to{transform:rotate(360deg)}} @keyframes moodPop{0%{transform:scale(.6) rotate(-14deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}} @media (prefers-reduced-motion:reduce){ .mood-orb,.mood-orb::before,.mood-orb::after,.mood-selected,.mood-chip{animation:none!important;transition:none!important} } @media(max-width:560px){ .mood-box .policy-scroll.mood-scroll{padding:10px 12px 20px} .mood-title-main{font-size:22px;margin-bottom:10px} .mood-grid{gap:8px} .mood-chip{padding:5px 12px 5px 6px;gap:7px} .mood-orb{--orb:32px} .mood-selected{padding:12px;gap:12px} .mood-selected .mood-orb{--orb:54px} .mood-partner .mood-orb{--orb:42px} .mood-label{font-size:11px} .mood-selected-text b{font-size:13px} .mood-save-btn{min-width:180px;padding:12px 28px;font-size:14px} .mood-lock-clock{font-size:17px} .mood-lock-copy small{font-size:9.5px} } /* ═══════ Mood tabs + Cycle calendar (Couplina) ═══════ */ .mood-box-wide{width:min(440px,100%);max-height:min(92vh,900px)} .mood-tabs{display:flex;gap:6px;padding:0 18px 10px;border-bottom:1px solid rgba(255,177,137,.1);position:relative;z-index:1} .mood-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border:1px solid transparent;border-radius:14px;background:transparent;color:#b8968c;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.22s} .mood-tab:hover{color:#fae9e2;background:rgba(255,255,255,.04)} .mood-tab.active{color:#1a0a10;background:linear-gradient(135deg,#ffb18a,#ff7a95 60%,#e85a8c);border-color:transparent;box-shadow:0 6px 18px rgba(232,90,140,.35)} .mood-tab-ico{font-size:15px;line-height:1} .cycle-scroll{padding:12px 16px 22px!important;max-height:calc(min(90vh,860px) - 145px)!important} .cycle-hero{position:relative;display:flex;align-items:center;gap:14px;padding:16px 14px;margin-bottom:14px;border-radius:20px;background:linear-gradient(160deg,rgba(12,8,28,.95),rgba(28,12,36,.9) 50%,rgba(40,18,28,.85));border:1px solid rgba(255,180,200,.12);overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)} .cycle-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(180,120,255,.12),transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(255,100,150,.08),transparent 50%);pointer-events:none} .cycle-moon{position:relative;width:72px;height:72px;flex-shrink:0} .cycle-moon-glow{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,180,.25),transparent 70%);animation:cycleGlow 4s ease-in-out infinite} .cycle-crescent{position:absolute;inset:10px;border-radius:50%;background:linear-gradient(145deg,#fff8e8,#ffe0b0 45%,#f0c878);box-shadow:0 0 28px rgba(255,220,160,.5),inset -4px -2px 10px rgba(180,120,60,.15)} .cycle-crescent::after{content:"";position:absolute;top:-4px;right:-10px;width:85%;height:85%;border-radius:50%;background:linear-gradient(160deg,rgba(12,8,28,.98),rgba(28,12,36,.95))} .cycle-stars{position:absolute;inset:0;pointer-events:none} .cycle-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;opacity:.7} .cycle-stars i:nth-child(1){top:8%;right:12%;animation:cycleTwinkle 2.4s ease-in-out infinite} .cycle-stars i:nth-child(2){top:22%;left:6%;width:2px;height:2px;animation:cycleTwinkle 3.1s ease-in-out .4s infinite} .cycle-stars i:nth-child(3){bottom:18%;right:8%;animation:cycleTwinkle 2.8s ease-in-out .8s infinite} .cycle-stars i:nth-child(4){bottom:8%;left:18%;width:2px;height:2px;animation:cycleTwinkle 3.4s ease-in-out 1.2s infinite} @keyframes cycleGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} @keyframes cycleTwinkle{0%,100%{opacity:.35}50%{opacity:1}} .cycle-hero-text{position:relative;z-index:1;min-width:0;text-align:right} .cycle-kicker{display:block;font-size:9px;letter-spacing:.14em;color:#e0a8c8;font-weight:800;margin-bottom:4px} .cycle-hero-text h3{margin:0 0 4px;font-size:20px;font-weight:800;color:#fae9e2;line-height:1.3} .cycle-hero-text p{margin:0;font-size:11px;color:#c4a0b0;line-height:1.55} .cycle-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} .cycle-nav-btn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,177,137,.15);background:rgba(255,255,255,.04);color:#fae9e2;font-size:20px;cursor:pointer;transition:.2s;display:grid;place-items:center;line-height:1} .cycle-nav-btn:hover{background:rgba(255,120,150,.15);border-color:rgba(255,150,170,.35)} .cycle-nav-center{text-align:center;flex:1} .cycle-nav-center strong{display:block;font-size:16px;font-weight:800;color:#fae9e2} .cycle-year-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px} .cycle-year-row button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,177,137,.12);background:rgba(255,255,255,.03);color:#dcb8aa;font-size:14px;cursor:pointer;line-height:1} .cycle-year-row button:hover{color:#fff;background:rgba(255,120,150,.12)} .cycle-year-row span{font-size:12px;font-weight:700;color:#c4a896;min-width:42px} .cycle-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px;text-align:center} .cycle-weekdays span{font-size:10px;font-weight:700;color:#9a7a72;padding:4px 0} .cycle-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px} .cycle-day{aspect-ratio:1;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.03);color:#d4b8a8;font-size:13px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;transition:.15s;font-family:inherit;padding:0;min-height:40px} .cycle-day:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,180,160,.2)} .cycle-day.other-month{opacity:.28;cursor:default} .cycle-day.today{box-shadow:0 0 0 2px rgba(255,200,120,.55);color:#fff} .cycle-day.period{background:linear-gradient(145deg,#ff6b9d,#e8437a);color:#fff;border-color:rgba(255,150,180,.4);box-shadow:0 4px 14px rgba(232,67,122,.35)} .cycle-day.ovulation{background:linear-gradient(145deg,#c084fc,#a855f7);color:#fff;border-color:rgba(200,150,255,.4);box-shadow:0 4px 14px rgba(168,85,247,.3)} .cycle-day.ovulation-main{background:linear-gradient(145deg,#7c3aed,#5b21b6);border:2px solid #fef08a;box-shadow:0 0 0 2px rgba(254,240,138,.25),0 4px 16px rgba(124,58,237,.45)} .cycle-day .ovulation-main-mark{font-size:9px;color:#fef08a;font-weight:900} .cycle-day.pms{background:linear-gradient(145deg,rgba(251,146,60,.38),rgba(249,115,22,.22));color:#ffedd5;border-color:rgba(251,146,60,.42)} .cycle-day.period.ovulation,.cycle-day.period.pms{background:linear-gradient(145deg,#ff6b9d,#e8437a)} .cycle-day .cd-mark{font-size:7px;line-height:1;opacity:.9} .cycle-day.selected-start{outline:2px solid #ffd9a0;outline-offset:1px} .cycle-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-bottom:14px} .cl-item{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#b8968c} .cl-item i{width:10px;height:10px;border-radius:4px;display:block} .cl-period i{background:linear-gradient(145deg,#ff6b9d,#e8437a)} .cl-ovulation i{background:linear-gradient(145deg,#c084fc,#a855f7)} .cl-pms i{background:linear-gradient(145deg,#fb923c,#f97316)} .cl-today i{background:transparent;border:2px solid rgba(255,200,120,.7);border-radius:4px;box-sizing:border-box} .cycle-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} .cycle-info-card{padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,177,137,.1);text-align:center} .cic-label{display:block;font-size:9px;font-weight:700;color:#9a7a72;margin-bottom:4px;letter-spacing:.04em} .cycle-info-card strong{font-size:13px;font-weight:800;color:#fae9e2} .cycle-settings{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,177,137,.08)} .cycle-settings label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;color:#b8968c;flex:1;min-width:90px} .cycle-settings input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,177,137,.15);background:rgba(0,0,0,.25);color:#fae9e2;font-family:inherit;font-size:14px;font-weight:700;text-align:center} .cycle-settings input:focus{outline:none;border-color:rgba(255,120,150,.5)} .cycle-settings small{font-size:9px;color:#8a6a62} .cycle-save-settings{appearance:none;border:0;cursor:pointer;padding:10px 16px;border-radius:12px;font-family:inherit;font-size:12px;font-weight:800;color:#1a0a10;background:linear-gradient(135deg,#ffd9a0,#ffb18a);box-shadow:0 4px 12px rgba(255,180,100,.25);transition:.18s;white-space:nowrap} .cycle-save-settings:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,180,100,.35)} .cycle-actions{text-align:center} .cycle-log-btn{appearance:none;border:0;cursor:pointer;width:100%;padding:13px 20px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff6b9d,#e8437a 55%,#c0265a);box-shadow:0 8px 24px rgba(232,67,122,.4),inset 0 1px 0 rgba(255,255,255,.2);transition:.18s} .cycle-log-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,67,122,.5)} .cycle-log-btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .cycle-note{margin:10px 0 0;font-size:10.5px;color:#9a7a72;line-height:1.6;font-weight:600} .cycle-note.ok{color:#8fd4a8} .cycle-note.err{color:#ff8a9a} @media (max-width:480px){ .mood-box-wide{width:min(100%,100%)} .cycle-day{min-height:36px;font-size:12px;border-radius:10px} .cycle-moon{width:56px;height:56px} .cycle-hero{padding:12px 10px;gap:10px} .cycle-hero-text h3{font-size:17px} .cycle-info{grid-template-columns:1fr} } /* Couplina cycle: gender onboarding + partner circular overview */ .cycle-gender-card{padding:22px 16px;margin:0 0 14px;border-radius:22px;text-align:center;background:linear-gradient(145deg,rgba(42,20,40,.96),rgba(18,12,30,.97));border:1px solid rgba(255,177,200,.2);box-shadow:0 12px 34px rgba(0,0,0,.22)} .cycle-gender-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 10px;border-radius:50%;font-size:30px;color:#ffd5e2;background:radial-gradient(circle,rgba(255,107,157,.25),rgba(255,107,157,.04));border:1px solid rgba(255,150,190,.28)} .cycle-gender-card h3{margin:0 0 7px;color:#fff0f4;font-size:19px}.cycle-gender-card p{margin:0 auto 16px;max-width:340px;color:#c9aebc;font-size:12px;line-height:1.9} .cycle-gender-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.cycle-gender-options button{border:1px solid rgba(255,177,200,.2);border-radius:13px;padding:11px 5px;color:#ffe8ef;background:rgba(255,255,255,.045);font-family:inherit;font-size:11px;font-weight:800;cursor:pointer}.cycle-gender-options button:hover{background:rgba(255,107,157,.17);border-color:rgba(255,150,190,.45)} .cycle-partner-chart{padding:15px;margin:0 0 14px;border-radius:20px;background:linear-gradient(135deg,rgba(35,18,43,.96),rgba(24,16,37,.96));border:1px solid rgba(255,190,210,.15);box-shadow:0 10px 28px rgba(0,0,0,.2)} .cpc-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cpc-heading span:first-child{font-size:10px;color:#dba9c2;font-weight:800}.cpc-heading h4{margin:3px 0 0;font-size:16px;color:#fff0f5}.cpc-heart{font-size:27px;color:#ff83ad}.cpc-content{display:flex;align-items:center;gap:16px}.cpc-ring{--cycle-progress:0%;width:112px;height:112px;flex:0 0 112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ff6b9d var(--cycle-progress),rgba(255,255,255,.09) var(--cycle-progress));position:relative;filter:drop-shadow(0 4px 12px rgba(232,67,122,.15))}.cpc-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:linear-gradient(145deg,#21132e,#180f25);border:1px solid rgba(255,255,255,.06)}.cpc-ring>div{z-index:1;text-align:center;display:flex;flex-direction:column;gap:2px}.cpc-ring strong{font-size:25px;color:#fff0f5}.cpc-ring small{font-size:9px;color:#c7a3b6}.cpc-stats{min-width:0;flex:1;display:grid;gap:9px}.cpc-stats>div{display:flex;flex-direction:column;gap:3px}.cpc-stats small{font-size:10px;color:#b995aa}.cpc-stats strong{font-size:12px;color:#ffe7ef}.cpc-stats p{margin:0;font-size:9px;line-height:1.7;color:#a88b9d} @media(max-width:380px){.cycle-gender-options{grid-template-columns:1fr}.cpc-content{gap:10px}.cpc-ring{width:94px;height:94px;flex-basis:94px}.cpc-ring strong{font-size:21px}} /* Cycle profile controls and male partner-support view */ .cycle-profile-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(255,177,200,.12);border-radius:13px;background:rgba(255,255,255,.025);color:#d9b6c4;font-size:11px} .cycle-profile-tools button{border:1px solid rgba(255,150,190,.28);border-radius:10px;padding:8px 11px;background:rgba(255,107,157,.09);color:#ffe8ef;font:inherit;font-weight:800;cursor:pointer} .cycle-profile-tools button[hidden],.cycle-male-guide[hidden]{display:none!important} .cycle-male-guide{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding:15px;border:1px solid rgba(126,178,255,.18);border-radius:18px;background:linear-gradient(135deg,rgba(35,40,65,.78),rgba(25,18,39,.9))} .cmg-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:13px;background:rgba(126,178,255,.12);color:#b8d5ff;font-size:23px} .cycle-male-guide strong{display:block;margin:1px 0 5px;color:#e8efff;font-size:12px}.cycle-male-guide p{margin:0;color:#b1b8d0;font-size:10px;line-height:1.9} @media(max-width:380px){.cycle-profile-tools{align-items:flex-start;flex-direction:column}.cycle-profile-tools button{width:100%}} /* PMS replaces the fertile-window marker; male partner sees a countdown ring. */ .cpc-ring{background:conic-gradient(#fb923c var(--cycle-progress),rgba(255,255,255,.09) var(--cycle-progress))} .cpc-ring:after{content:"";position:absolute;inset:2px;border-radius:50%;border:1px solid rgba(251,146,60,.16);pointer-events:none} .cl-pms i{border-radius:50%;box-shadow:0 0 9px rgba(249,115,22,.22)} /* Gender-specific cycle views: men see the partner ring chart; women use the editable calendar. */ #cycleTabPanel.cycle-view-male .cycle-hero, #cycleTabPanel.cycle-view-male .cycle-nav, #cycleTabPanel.cycle-view-male .cycle-weekdays, #cycleTabPanel.cycle-view-male .cycle-grid, #cycleTabPanel.cycle-view-male .cycle-legend, #cycleTabPanel.cycle-view-male .cycle-info, #cycleTabPanel.cycle-view-male .cycle-settings, #cycleTabPanel.cycle-view-male .cycle-actions { display:none !important; } #cycleTabPanel.cycle-view-male .cycle-partner-chart { display:block; } #cycleTabPanel.cycle-view-female .cycle-partner-chart { display:none !important; } /* ── Cycle section polish (complete, non half-finished look) ── */ .cycle-scroll { padding: 14px 16px 28px !important; max-height: calc(min(90vh, 860px) - 145px) !important; } .cycle-main { display: block; animation: cycleFadeIn .28s ease; } .cycle-main[hidden] { display: none !important; } @keyframes cycleFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Gender onboarding – only shown once */ .cycle-gender-card { padding: 28px 18px 24px; margin: 4px 0 0; border-radius: 24px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(255, 120, 160, .14), transparent 55%), linear-gradient(160deg, rgba(48, 22, 46, .98), rgba(18, 12, 32, .98)); border: 1px solid rgba(255, 177, 200, .22); box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05); } .cycle-gender-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; font-size: 28px; line-height: 1; color: #ffe0ea; background: radial-gradient(circle, rgba(255, 107, 157, .28), rgba(255, 107, 157, .05)); border: 1px solid rgba(255, 150, 190, .32); box-shadow: 0 0 24px rgba(255, 107, 157, .18); } .cycle-gender-card h3 { margin: 0 0 8px; color: #fff4f8; font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .cycle-gender-card p { margin: 0 auto 20px; max-width: 320px; color: #c9aebc; font-size: 12.5px; line-height: 1.85; font-weight: 600; } .cycle-gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cycle-gender-options button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid rgba(255, 177, 200, .2); border-radius: 16px; padding: 16px 10px 14px; color: #ffe8ef; background: rgba(255, 255, 255, .04); font-family: inherit; cursor: pointer; transition: .2s ease; } .cycle-gender-options button:hover { background: rgba(255, 107, 157, .16); border-color: rgba(255, 150, 190, .5); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 80, 130, .15); } .cycle-gender-options button:active { transform: translateY(0); } .cycle-gender-options .cg-emoji { font-size: 22px; line-height: 1; margin-bottom: 2px; } .cycle-gender-options .cg-label { font-size: 14px; font-weight: 800; } .cycle-gender-options button small { font-size: 9.5px; font-weight: 600; color: #b896a8; line-height: 1.4; } /* Profile chip – only after gender is set */ .cycle-profile-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 8px 10px 8px 12px; border: 1px solid rgba(255, 177, 200, .14); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)); color: #d9b6c4; font-size: 11.5px; font-weight: 700; } .cycle-profile-tools[hidden] { display: none !important; } .cycle-profile-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .cycle-profile-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #ff8ab0, #e8437a); box-shadow: 0 0 8px rgba(232, 67, 122, .5); flex-shrink: 0; } .cycle-edit-gender-btn { display: inline-flex !important; align-items: center; gap: 5px; border: 1px solid rgba(255, 150, 190, .28); border-radius: 10px; padding: 7px 11px; background: rgba(255, 107, 157, .08); color: #ffe8ef; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; transition: .18s; flex-shrink: 0; } .cycle-edit-gender-btn:hover { background: rgba(255, 107, 157, .18); border-color: rgba(255, 150, 190, .45); } .cycle-edit-gender-btn svg { opacity: .85; } /* Hero polish */ .cycle-hero { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px; margin-bottom: 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(12, 8, 28, .96), rgba(28, 12, 36, .92) 50%, rgba(40, 18, 28, .88)); border: 1px solid rgba(255, 180, 200, .14); overflow: hidden; box-shadow: 0 14px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05); } .cycle-hero-text h3 { font-size: 19px; } .cycle-hero-text p { font-size: 11.5px; color: #c4a0b0; } /* Calendar grid polish */ .cycle-nav { margin-bottom: 12px; padding: 4px 0; } .cycle-grid { gap: 5px; margin-bottom: 14px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .12); border: 1px solid rgba(255, 177, 137, .06); } .cycle-day { border-radius: 13px; min-height: 42px; font-size: 13px; background: rgba(255, 255, 255, .035); } .cycle-day:hover:not(:disabled) { background: rgba(255, 255, 255, .09); border-color: rgba(255, 180, 160, .25); transform: scale(1.04); } .cycle-day.period { background: linear-gradient(145deg, #ff6b9d, #e8437a); box-shadow: 0 4px 16px rgba(232, 67, 122, .4); } .cycle-day.pms { background: linear-gradient(145deg, rgba(251, 146, 60, .42), rgba(249, 115, 22, .24)); } .cycle-legend { gap: 12px 16px; margin-bottom: 16px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .025); } /* Info cards */ .cycle-info { gap: 10px; margin-bottom: 14px; } .cycle-info-card { padding: 14px 12px; border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 177, 137, .12); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } .cic-label { font-size: 9.5px; letter-spacing: .05em; color: #a88880; margin-bottom: 6px; } .cycle-info-card strong { font-size: 13.5px; color: #fae9e2; } /* Settings panel */ .cycle-settings { margin-bottom: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 177, 137, .1); gap: 12px; } .cycle-settings input { padding: 10px 12px; border-radius: 12px; font-size: 15px; } .cycle-save-settings { appearance: none; border: 0; cursor: pointer; padding: 11px 16px; border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: 800; color: #1a0a10; background: linear-gradient(135deg, #ffd4a8, #ffb070); box-shadow: 0 4px 14px rgba(255, 180, 100, .3); transition: .18s; width: 100%; margin-top: 4px; } .cycle-save-settings:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 180, 100, .4); } /* Log button */ .cycle-log-btn { padding: 14px 20px; border-radius: 999px; font-size: 14.5px; background: linear-gradient(135deg, #ff6b9d, #e8437a 55%, #c0265a); box-shadow: 0 10px 28px rgba(232, 67, 122, .42), inset 0 1px 0 rgba(255, 255, 255, .22); } .cycle-log-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(232, 67, 122, .52); } .cycle-note { margin: 12px 0 0; font-size: 11px; line-height: 1.7; padding: 0 4px; } /* Male partner view */ .cycle-male-guide { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 16px; border: 1px solid rgba(126, 178, 255, .2); border-radius: 18px; background: linear-gradient(135deg, rgba(35, 42, 70, .85), rgba(25, 18, 42, .92)); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .cmg-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; background: rgba(126, 178, 255, .14); color: #b8d5ff; font-size: 22px; } .cycle-partner-chart { padding: 18px 16px; margin: 0 0 16px; border-radius: 22px; background: linear-gradient(145deg, rgba(38, 18, 46, .97), rgba(22, 14, 36, .97)); border: 1px solid rgba(255, 190, 210, .16); box-shadow: 0 12px 32px rgba(0, 0, 0, .24); } .cpc-ring { width: 118px; height: 118px; flex: 0 0 118px; background: conic-gradient(#fb923c var(--cycle-progress), rgba(255, 255, 255, .08) var(--cycle-progress)); filter: drop-shadow(0 6px 16px rgba(251, 146, 60, .2)); } .cpc-ring:before { inset: 10px; background: linear-gradient(145deg, #221430, #160e24); } /* Gender-specific visibility */ #cycleTabPanel.cycle-view-male .cycle-hero, #cycleTabPanel.cycle-view-male .cycle-nav, #cycleTabPanel.cycle-view-male .cycle-weekdays, #cycleTabPanel.cycle-view-male .cycle-grid, #cycleTabPanel.cycle-view-male .cycle-legend, #cycleTabPanel.cycle-view-male .cycle-info, #cycleTabPanel.cycle-view-male .cycle-settings, #cycleTabPanel.cycle-view-male .cycle-actions { display: none !important; } #cycleTabPanel.cycle-view-male .cycle-partner-chart, #cycleTabPanel.cycle-view-male .cycle-male-guide { display: flex !important; } #cycleTabPanel.cycle-view-male .cycle-partner-chart { display: block !important; } #cycleTabPanel.cycle-view-female .cycle-partner-chart, #cycleTabPanel.cycle-view-female .cycle-male-guide { display: none !important; } #cycleTabPanel.cycle-needs-gender .cycle-main { display: none !important; } @media (max-width: 380px) { .cycle-gender-options { grid-template-columns: 1fr; } .cycle-profile-tools { flex-direction: column; align-items: stretch; } .cycle-edit-gender-btn { width: 100%; justify-content: center; } .cpc-content { flex-direction: column; align-items: center; text-align: center; } .cpc-ring { width: 100px; height: 100px; flex-basis: 100px; } .cycle-day { min-height: 36px; font-size: 12px; } } /* Cycle calendar refinement: calmer spacing, clear sections, no visual crowding */ #cycleTabPanel.cycle-scroll { box-sizing: border-box; padding: 16px 18px 26px !important; overflow-x: hidden; } #cycleTabPanel .cycle-main { width: 100%; min-width: 0; } #cycleTabPanel .cycle-profile-tools { margin-bottom: 14px; padding: 10px 13px; border-radius: 15px; } #cycleTabPanel .cycle-hero { box-sizing: border-box; gap: 16px; padding: 18px; margin: 0 0 18px; border-radius: 22px; } #cycleTabPanel .cycle-moon { flex: 0 0 64px; width: 64px; height: 64px; } #cycleTabPanel .cycle-hero-text { flex: 1; } #cycleTabPanel .cycle-hero-text h3 { margin-bottom: 6px; line-height: 1.45; } #cycleTabPanel .cycle-hero-text p { line-height: 1.9; } #cycleTabPanel .cycle-nav { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 12px; margin: 0 0 12px; padding: 4px 2px 10px; } #cycleTabPanel .cycle-nav-btn { position: static; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 14px; font-size: 23px; line-height: 1; } #cycleTabPanel .cycle-nav-center { min-width: 0; } #cycleTabPanel .cycle-nav-center strong { line-height: 1.6; } #cycleTabPanel .cycle-year-row { gap: 12px; margin-top: 5px; } #cycleTabPanel .cycle-weekdays { gap: 6px; margin: 0 0 8px; padding: 0 3px; } #cycleTabPanel .cycle-weekdays span { padding: 7px 0; } #cycleTabPanel .cycle-grid { box-sizing: border-box; gap: 6px; padding: 10px; margin: 0 0 14px; border-radius: 18px; background: rgba(7, 5, 15, .22); border: 1px solid rgba(255, 190, 170, .10); } #cycleTabPanel .cycle-day { min-width: 0; min-height: 39px; aspect-ratio: 1 / 1; border-radius: 11px; font-size: 12px; transform: none; } #cycleTabPanel .cycle-day:hover:not(:disabled) { transform: translateY(-1px); } #cycleTabPanel .cycle-legend { display: flex; justify-content: flex-start; gap: 9px 14px; padding: 12px 13px; margin: 0 0 16px; border: 1px solid rgba(255, 190, 170, .09); border-radius: 15px; background: rgba(255, 255, 255, .025); } #cycleTabPanel .cycle-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; } #cycleTabPanel .cycle-info-card { min-width: 0; padding: 14px 10px; border-radius: 16px; } #cycleTabPanel .cycle-info-card strong { display: block; line-height: 1.8; overflow-wrap: anywhere; } #cycleTabPanel .cycle-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 15px; margin: 0 0 16px; border-radius: 17px; } #cycleTabPanel .cycle-settings label { min-width: 0; } #cycleTabPanel .cycle-settings input { box-sizing: border-box; min-width: 0; } #cycleTabPanel .cycle-save-settings { grid-column: 1 / -1; margin-top: 0; } #cycleTabPanel .cycle-actions { padding-top: 1px; } #cycleTabPanel .cycle-log-btn { white-space: normal; line-height: 1.7; } #cycleTabPanel .cycle-note { line-height: 1.9; } @media (max-width: 480px) { #cycleTabPanel.cycle-scroll { padding: 12px 12px 22px !important; } #cycleTabPanel .cycle-hero { gap: 11px; padding: 14px 12px; margin-bottom: 15px; } #cycleTabPanel .cycle-moon { flex-basis: 52px; width: 52px; height: 52px; } #cycleTabPanel .cycle-hero-text h3 { font-size: 16px; } #cycleTabPanel .cycle-hero-text p { font-size: 11px; } #cycleTabPanel .cycle-nav { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 7px; } #cycleTabPanel .cycle-nav-btn { width: 36px; height: 36px; border-radius: 12px; } #cycleTabPanel .cycle-nav-center strong { font-size: 14px; } #cycleTabPanel .cycle-grid { gap: 4px; padding: 7px; } #cycleTabPanel .cycle-day { min-height: 32px; border-radius: 9px; font-size: 11px; } #cycleTabPanel .cycle-legend { gap: 8px 11px; padding: 10px; } #cycleTabPanel .cycle-info { gap: 7px; } #cycleTabPanel .cycle-info-card { padding: 11px 7px; } } @media (max-width: 340px) { #cycleTabPanel .cycle-grid { gap: 3px; padding: 5px; } #cycleTabPanel .cycle-day { min-height: 29px; font-size: 10px; } #cycleTabPanel .cycle-legend { justify-content: center; } } /* Partner cycle view: polished circular timeline inspired by the supplied reference. */ #cycleTabPanel.cycle-view-male .cycle-partner-chart { padding: 20px 18px 16px !important; overflow: hidden; color: #f8edf5; background: #151217 !important; border: 1px solid rgba(255,255,255,.055) !important; border-radius: 24px !important; box-shadow: 0 16px 38px rgba(0,0,0,.22) !important; } #cycleTabPanel.cycle-view-male .cpc-heading { margin-bottom: 18px; } #cycleTabPanel.cycle-view-male .cpc-heading span:first-child { color: #c3a8b9; letter-spacing: .02em; } #cycleTabPanel.cycle-view-male .cpc-heading h4 { font-size: 18px; color: #fff7fb; } #cycleTabPanel.cycle-view-male .cpc-heart { width: 38px; height: 38px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,123,151,.55); background:rgba(255,123,151,.08); } #cycleTabPanel.cycle-view-male .cpc-content { flex-direction:column; align-items:center; gap:20px; } #cycleTabPanel.cycle-view-male .cpc-ring-wrap { width:min(100%, 310px); aspect-ratio:1; display:grid; place-items:center; position:relative; } #cycleTabPanel.cycle-view-male .cpc-ring-wrap:before { content:none; } #cycleTabPanel.cycle-view-male .cpc-ring { position:absolute; inset:0; width:100%; height:100%; flex:none; border-radius:50%; filter:none; background:conic-gradient(from -90deg, rgba(76,65,81,.56) 0deg 360deg) !important; box-shadow:none; } #cycleTabPanel.cycle-view-male .cpc-ring:before { inset:15px; background:#151217; border:0; } #cycleTabPanel.cycle-view-male .cpc-ring:after { inset:0; border:0; } #cycleTabPanel.cycle-view-male .cpc-ring-center { gap:2px; align-items:center; } #cycleTabPanel.cycle-view-male .cpc-ring-center small { color:#c8b8c8; font-size:13px; } #cycleTabPanel.cycle-view-male .cpc-ring-center strong { color:#fff7fb; font-size:36px; line-height:1.25; } #cycleTabPanel.cycle-view-male .cpc-ring-center span { color:#c8b8c8; font-size:12px; } #cycleTabPanel.cycle-view-male .cpc-stats { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #cycleTabPanel.cycle-view-male .cpc-stats>div { min-height:72px; padding:12px; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:rgba(255,255,255,.035); justify-content:center; } #cycleTabPanel.cycle-view-male .cpc-stats>div:last-of-type { grid-column:1 / -1; } #cycleTabPanel.cycle-view-male .cpc-stats small { color:#b9a9b9; font-size:11px; } #cycleTabPanel.cycle-view-male .cpc-stats strong { color:#fff0f5; font-size:13px; line-height:1.7; } #cycleTabPanel.cycle-view-male .cpc-stats p { grid-column:1 / -1; margin-top:2px; color:#a99aa9; font-size:10px; line-height:1.9; } #cycleTabPanel.cycle-view-male .cpc-legend { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); } #cycleTabPanel.cycle-view-male .cpc-legend span { display:inline-flex; align-items:center; gap:6px; color:#d8cbd8; font-size:11px; } #cycleTabPanel.cycle-view-male .cpc-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; } #cycleTabPanel.cycle-view-male .cpc-legend-period { background:#fb7d91; } #cycleTabPanel.cycle-view-male .cpc-legend-ovulation { background:#66d4d0; } #cycleTabPanel.cycle-view-male .cpc-legend-pms { background:#ffca66; } @media(max-width:420px) { #cycleTabPanel.cycle-view-male .cycle-partner-chart { padding:16px 12px 14px !important; } #cycleTabPanel.cycle-view-male .cpc-ring-wrap { width:min(100%, 270px); } #cycleTabPanel.cycle-view-male .cpc-stats { gap:8px; } #cycleTabPanel.cycle-view-male .cpc-stats>div { padding:10px; } #cycleTabPanel.cycle-view-male .cpc-legend { gap:9px; } } /* ===== Couplina Question Games ===== */ /* ═══════════════════════════════════════════ Couplina Games — Pink / Yellow / Turquoise / Black / Brown Fluffy, soft, no pure white ═══════════════════════════════════════════ */ .cq-overlay{ position:fixed;inset:0;z-index:100500; background:rgba(12,6,10,.88); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); display:none;align-items:center;justify-content:center; padding:clamp(8px,2vw,24px);direction:rtl; color:#f5e6d3; } .cq-overlay.is-open{display:flex} .cq-shell{ width:min(960px,100%);max-height:min(92dvh,900px); overflow:auto;overscroll-behavior:contain; border:1px solid rgba(255,107,157,.35); border-radius:28px; background:linear-gradient(155deg,#1a0f14 0%,#2a1520 40%,#1f1810 70%,#0f1a18 100%); box-shadow:0 30px 100px #000000aa, inset 0 1px 0 rgba(255,209,102,.12); position:relative; } .cq-head{ display:flex;align-items:center;justify-content:space-between; padding:20px 26px; border-bottom:1px solid rgba(255,107,157,.22); background:linear-gradient(90deg,#241018,#1a1210); position:sticky;top:0;z-index:2; } .cq-brand{display:flex;align-items:center;gap:12px} .cq-brand h2{font-size:22px;margin:2px 0;color:#ff8fab} .cq-brand small{font-size:9px;letter-spacing:2px;color:#ffd166;font-weight:800} .cq-heart{ display:grid;place-items:center;width:46px;height:46px;border-radius:16px; background:linear-gradient(135deg,#ff6b9d,#ffd166); color:#1a0a12;font-size:24px; box-shadow:0 4px 16px rgba(255,107,157,.4), inset 0 0 0 1px rgba(255,209,102,.3); } .cq-close{ border:0;border-radius:13px;width:42px;height:42px; background:linear-gradient(145deg,#3a2030,#2a1810); color:#ff8fab;font-size:28px;cursor:pointer; border:1px solid rgba(255,107,157,.3); } .cq-close:hover{background:#4a2838;color:#ffd166} .cq-view{padding:25px clamp(16px,4vw,38px) 32px} .cq-welcome{text-align:center;padding:8px 0 22px} .cq-eyebrow{ display:inline-block;color:#2ec4b6;font-size:12px;font-weight:800;letter-spacing:.2px; } .cq-welcome h3{font-size:clamp(24px,4vw,36px);color:#ff8fab;margin:10px 0} .cq-welcome p{color:#c9a88a;margin:0 auto;max-width:560px;line-height:1.9;font-size:14px} .cq-stats{display:flex;justify-content:center;gap:12px;margin:24px auto 0;max-width:540px} .cq-stats div,.cq-result-stats div{ flex:1; background:linear-gradient(160deg,#2a1a22,#1f1510); border:1px solid rgba(255,107,157,.25); border-radius:16px;padding:13px 8px; box-shadow:0 6px 18px #00000040; } .cq-stats b,.cq-result-stats b{display:block;font-size:24px;color:#ffd166} .cq-stats small,.cq-result-stats small{font-size:11px;color:#a67c52;display:block;margin-top:4px} .cq-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .cq-mode-card{ position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:right; border:1px solid rgba(46,196,182,.3); border-radius:21px;padding:19px; background:linear-gradient(150deg,#2a1520 0%,#1a2018 50%,#2a1a10 100%); color:#f5e6d3;cursor:pointer;min-height:210px; transition:transform .2s,box-shadow .2s,border-color .2s; } .cq-mode-card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(255,107,157,.25); border-color:#ff6b9d; } .cq-mode-icon{font-size:28px;margin-bottom:8px} .cq-tag{ display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px; color:#1a0a12;background:linear-gradient(90deg,#ff6b9d,#ffd166); padding:3px 10px;border-radius:20px;margin-bottom:8px; } .cq-mode-card b{font-size:16px;color:#ff8fab;margin-bottom:6px} .cq-mode-card p{font-size:12px;color:#c9a88a;line-height:1.7;margin:0 0 auto;flex:1} .cq-mode-cta{font-size:12px;font-weight:700;color:#2ec4b6;margin-top:12px} .cq-mode-cta i{font-style:normal} .cq-daily{border-color:rgba(255,209,102,.4)} .cq-daily .cq-tag{background:linear-gradient(90deg,#ffd166,#2ec4b6)} .cq-mode-card.is-locked,.cq-mode-card.is-played{ opacity:.72;cursor:not-allowed;filter:grayscale(.25); } .cq-mode-card.is-played .cq-mode-cta{color:#c9a88a} .cq-mode-card.is-locked:hover{transform:none;box-shadow:none} .cq-tip{ display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px; background:linear-gradient(120deg,#2a1a18,#1a2018); border:1px solid rgba(166,124,82,.35);border-radius:16px; } .cq-tip span{font-size:22px} .cq-tip b{color:#ffd166;display:block;margin-bottom:4px} .cq-tip p{color:#c9a88a;font-size:13px;margin:0;line-height:1.7} /* ── بازی زنده: لابی، تایمر سؤال، دعوت ── */ .cq-live-players{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:16px 0 6px} .cq-live-chip{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#1a1014;border:1px dashed rgba(255,209,102,.35);color:#c9a88a;font-weight:700;font-size:13px} .cq-live-chip i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#2a2010;color:#ffd166;font-size:12px} .cq-live-chip.is-in{border-style:solid;border-color:#2ec4b6;color:#e8fff9;background:rgba(46,196,182,.12)} .cq-live-chip.is-in i{background:#2ec4b6;color:#06211d} .cq-qtimer{display:flex;align-items:center;gap:10px;margin:-6px 0 14px} .cq-qtimer-track{flex:1;height:10px;border-radius:10px;background:#1a1014;border:1px solid rgba(255,209,102,.25);overflow:hidden} #cqQTimerBar{display:block;height:100%;width:100%;border-radius:10px;background:linear-gradient(90deg,#2ec4b6,#ffd166);transition:width .2s linear} .cq-qtimer b{min-width:34px;text-align:center;color:#ffd166;font-size:20px;font-weight:900} .cq-qtimer.is-low #cqQTimerBar{background:linear-gradient(90deg,#ff6b9d,#f72585)} .cq-qtimer.is-low b{color:#ff6b9d;animation:cqPulse .6s ease-in-out infinite alternate} @keyframes cqPulse{from{transform:scale(1)}to{transform:scale(1.22)}} .cq-partner-stat{margin:8px 0 0;text-align:center;color:#2ec4b6;font-size:12.5px;font-weight:700} .cq-invite-toast{position:fixed;z-index:60000;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:min(420px,calc(100vw - 28px));padding:10px 12px;border:2px solid #fff3b0;border-radius:18px;background:linear-gradient(135deg,#ffe066,#ffc300);color:#3a2800;box-shadow:0 14px 45px rgba(255,195,0,.45),0 0 0 4px rgba(255,224,102,.25);font-family:inherit;text-align:right;animation:cqToastIn .3s ease} .cq-invite-toast[hidden]{display:none} .cq-invite-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:right;cursor:pointer} .cq-invite-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:#3a2800;font-size:21px;flex:none;animation:cqPulse .7s ease-in-out infinite alternate} .cq-invite-toast b{display:block;font-size:13.5px;font-weight:900;margin-bottom:3px} .cq-invite-toast small{display:block;font-size:11.5px;font-weight:600;opacity:.85} .cq-invite-join{flex:none;padding:9px 14px;border:0;border-radius:12px;background:#3a2800;color:#ffe066;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer} .cq-invite-close{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:rgba(58,40,0,.15);color:#3a2800;font-size:18px;line-height:1;cursor:pointer} @keyframes cqToastIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}} /* ── قوانین بازی در کاپلینا ── */ .cq-rules{margin-top:20px;padding:18px 18px 14px;border-radius:20px;background:linear-gradient(135deg,#2a1a18,#1a2018);border:1px solid rgba(166,124,82,.38)} .cq-rules-head{display:flex;gap:12px;align-items:center;margin-bottom:14px} .cq-rules-head>span{font-size:28px} .cq-rules-head h4{margin:0;color:#ffd166;font-size:17px} .cq-rules-head p{margin:3px 0 0;color:#c9a88a;font-size:12.5px;line-height:1.7} .cq-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .cq-rule-block{padding:14px 14px 10px;border-radius:16px;background:rgba(15,10,12,.45);border:1px solid rgba(255,143,171,.18)} .cq-rule-block h5{margin:0 0 8px;color:#ff8fab;font-size:14px;display:flex;align-items:center;gap:7px} .cq-rule-block ul{margin:0;padding:0;list-style:none;display:grid;gap:7px} .cq-rule-block li{position:relative;padding-inline-start:16px;color:#d8bda4;font-size:12.5px;line-height:1.85} .cq-rule-block li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ff6b9d,#ffd166)} .cq-rule-block li b{color:#ffd166;font-weight:800} .cq-rules-foot{margin:12px 0 0;text-align:center;color:#2ec4b6;font-size:12.5px;font-weight:700;line-height:1.8} @media (max-width:720px){.cq-rules-grid{grid-template-columns:1fr}.cq-rules{padding:14px 12px}} .cq-bottom-row{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap} .cq-primary,.cq-secondary{ border:0;border-radius:14px;padding:12px 20px;font-weight:700;cursor:pointer;font-size:14px; transition:transform .15s,box-shadow .15s; } .cq-primary{ background:linear-gradient(135deg,#ff6b9d,#f72585); color:#1a0a12; box-shadow:0 6px 20px rgba(255,107,157,.35); } .cq-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,157,.5)} .cq-primary:disabled{opacity:.45;cursor:not-allowed;transform:none} .cq-secondary{ background:linear-gradient(145deg,#2a2010,#1a1810); color:#ffd166; border:1px solid rgba(255,209,102,.3); } .cq-secondary:hover{background:#3a2a18;border-color:#ffd166} .cq-play-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .cq-back{ border:0;background:transparent;color:#2ec4b6;font-weight:700;cursor:pointer;font-size:14px; } .cq-back:hover{color:#ffd166} #cqModeLabel{color:#ff8fab;font-weight:800;font-size:14px} #cqCounter{color:#ffd166;font-weight:700;font-size:13px} .cq-progress{ height:6px;border-radius:10px;background:#1a1014;margin-bottom:18px;overflow:hidden; border:1px solid rgba(46,196,182,.2); } #cqProgressBar{ display:block;height:100%;width:0; background:linear-gradient(90deg,#ff6b9d,#ffd166,#2ec4b6); border-radius:10px;transition:width .3s ease; } .cq-question-card{ text-align:center;padding:20px 12px;margin-bottom:14px; background:linear-gradient(160deg,#2a1520,#1a1810); border:1px solid rgba(255,107,157,.25);border-radius:20px; } .cq-question-icon{font-size:36px;display:block;margin-bottom:8px} #cqCategory{color:#2ec4b6} #cqQuestion{color:#ff8fab;font-size:clamp(18px,3vw,24px);margin:8px 0} #cqSubQuestion{color:#c9a88a;font-size:13px;margin:0} .cq-turn{ display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:14px; background:linear-gradient(90deg,#1a2018,#2a1a10); border:1px solid rgba(46,196,182,.3);border-radius:14px; } .cq-turn-dot{ width:10px;height:10px;border-radius:50%; background:#2ec4b6;box-shadow:0 0 8px #2ec4b6; animation:cqPulse 1.4s ease-in-out infinite; } @keyframes cqPulse{0%,100%{opacity:1}50%{opacity:.4}} #cqTurnName{color:#ffd166;font-size:14px} #cqTurnHint{color:#a67c52;font-size:12px;margin-right:auto} .cq-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .cq-option{ min-height:44px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; border:1px solid rgba(166,124,82,.35); background:linear-gradient(150deg,#241820,#1a1510); color:#f5e6d3;border-radius:14px;padding:14px 12px; font-size:13px;cursor:pointer;text-align:right; transition:border-color .15s,background .15s,transform .15s; } .cq-option:hover{ border-color:#ff6b9d;background:#2a1a22;transform:translateY(-2px); } .cq-option.is-selected{ border-color:#2ec4b6; background:linear-gradient(150deg,#1a2a24,#1a2018); color:#2ec4b6; box-shadow:0 0 0 1px rgba(46,196,182,.4),0 4px 16px rgba(46,196,182,.15); } .cq-play-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .cq-private-note{text-align:center;color:#a67c52;font-size:12px;margin-top:14px} .cq-result-hero{text-align:center;padding:10px 0 18px} #cqResultEmoji,#cqLocalResultEmoji{font-size:48px;display:block;margin-bottom:6px} .cq-result-hero h3,#cqLocalResultTitle{color:#ff8fab;font-size:clamp(20px,3vw,28px);margin:8px 0} .cq-score{font-size:42px;color:#ffd166;font-weight:800} .cq-score span{font-size:20px;color:#a67c52} .cq-result-stats{display:flex;gap:10px;justify-content:center;margin:16px 0} .cq-review-title{color:#2ec4b6;font-size:15px;margin:18px 0 10px} .cq-review{display:flex;flex-direction:column;gap:8px} .cq-review-item{ display:flex;align-items:flex-start;gap:10px;padding:12px; background:linear-gradient(120deg,#22151c,#1a1810); border:1px solid rgba(255,107,157,.18);border-radius:14px; } .cq-review-item span{font-size:20px} .cq-review-item b{color:#ff8fab;display:block;font-size:13px} .cq-review-item small{color:#c9a88a;font-size:11px;display:block;margin-top:2px} .cq-match{color:#2ec4b6;font-size:12px} .cq-miss{color:#a67c52;font-size:12px} .cq-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px} .cq-history-title{text-align:center;margin-bottom:16px} .cq-history-title span{font-size:32px} .cq-history-title h3{color:#ff8fab;margin:6px 0} .cq-history-title p{color:#c9a88a;font-size:13px} .cq-history-item{transition:background .15s,transform .12s;display:flex;align-items:center;gap:12px} .cq-history-item:hover{background:rgba(255,209,102,.08)} .cq-history-item:focus-visible{outline:2px solid rgba(46,196,182,.5);outline-offset:2px} .cq-history-list{display:flex;flex-direction:column;gap:8px} .cq-history-row{ display:flex;align-items:center;gap:12px;padding:12px 14px; background:linear-gradient(120deg,#22151c,#1a1810); border:1px solid rgba(255,209,102,.2);border-radius:14px; } .cq-history-medal{font-size:22px} .cq-history-row b{color:#ff8fab;display:block;font-size:13px} .cq-history-row small{color:#a67c52;font-size:11px} .cq-history-row strong{margin-right:auto;color:#ffd166} .cq-history-empty{text-align:center;color:#c9a88a;padding:30px;font-size:14px} .cq-dual-scores{ display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0;flex-wrap:wrap; } .cq-score-card{ flex:1;min-width:120px;max-width:180px;text-align:center;padding:16px 12px; background:linear-gradient(160deg,#2a1520,#1a1810); border:1px solid rgba(255,107,157,.3);border-radius:18px; } .cq-score-card.is-winner{ border-color:#ffd166; box-shadow:0 0 24px rgba(255,209,102,.25); background:linear-gradient(160deg,#2a2010,#1a1810); } .cq-score-name{display:block;color:#c9a88a;font-size:12px;margin-bottom:6px} .cq-score-card b{display:block;font-size:36px;color:#ffd166} .cq-score-card small{color:#a67c52;font-size:11px} .cq-vs{ font-weight:900;color:#ff6b9d;font-size:16px; background:linear-gradient(135deg,#2a1520,#1a2018); padding:8px 12px;border-radius:50%; border:1px solid rgba(255,107,157,.4); } .cq-wait-hero{text-align:center;padding:30px 12px} .cq-wait-emoji{font-size:56px;display:block;margin-bottom:10px} #cqWaitTitle{color:#ff8fab;font-size:24px;margin:8px 0} #cqWaitText{color:#c9a88a;font-size:14px;line-height:1.8;max-width:420px;margin:0 auto 20px} .cq-timer{ display:inline-flex;flex-direction:column;align-items:center;gap:6px; padding:16px 28px;margin-bottom:20px; background:linear-gradient(160deg,#2a1a10,#1a1510); border:1px solid rgba(255,209,102,.4);border-radius:18px; } .cq-timer-label{color:#a67c52;font-size:11px} #cqTimerValue{font-size:36px;color:#ffd166;font-weight:800;font-variant-numeric:tabular-nums} .cq-wait-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .cq-active-banner{ margin-top:16px;padding:14px 16px; background:linear-gradient(120deg,#2a1a20,#1a2018); border:1px solid rgba(46,196,182,.4);border-radius:14px; color:#f5e6d3;font-size:13px;line-height:1.7; display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .cq-active-banner b{color:#2ec4b6} .cq-banner-btn{ border:0;border-radius:10px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer; background:linear-gradient(135deg,#ff6b9d,#ffd166);color:#1a0a12; } .cq-banner-btn:hover{filter:brightness(1.1)} @media (max-width:720px){ .cq-mode-grid{grid-template-columns:1fr} .cq-options{grid-template-columns:1fr} .cq-stats{flex-direction:column} .cq-shell{ border-radius:18px; max-height:min(96dvh,100%); width:100%; } .cq-overlay{ padding:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px)); align-items:stretch; } .cq-head{padding:14px 16px} .cq-brand h2{font-size:18px} .cq-view{padding:18px 14px 24px} .cq-mode-card{min-height:auto;padding:16px} .cq-option{ min-height:48px; padding:14px 16px; font-size:14px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .cq-primary,.cq-secondary{ min-height:48px; padding:14px 18px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .cq-play-actions{flex-direction:column} .cq-play-actions .cq-primary,.cq-play-actions .cq-secondary{width:100%} .cq-qtimer b{font-size:18px;min-width:28px} .cq-invite-toast{top:max(12px,env(safe-area-inset-top,0px))} } @media (max-width:420px){ .cq-welcome h3{font-size:22px} .cq-mode-card b{font-size:15px} .cq-mode-card p{font-size:11.5px} .cq-question-card h3,#cqQuestion{font-size:17px;line-height:1.55} .cq-stats b,.cq-result-stats b{font-size:20px} .cq-score-card b{font-size:28px} } .cl-item.cl-ovulation-main i{display:inline-flex;align-items:center;justify-content:center;background:#5b21b6;color:#fef08a;font-style:normal;border:1px solid #fef08a} /* Refined partner-support card in the cycle section */ #cycleTabPanel .cycle-male-guide { position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 15px; overflow: hidden; margin: 0 0 16px; padding: 19px 17px 16px; border: 1px solid rgba(125, 190, 255, .28); border-radius: 23px; background: radial-gradient(ellipse at 100% 0%, rgba(86, 164, 255, .24), transparent 46%), radial-gradient(ellipse at 0% 100%, rgba(120, 105, 255, .15), transparent 45%), linear-gradient(135deg, #172b4b 0%, #17213b 52%, #211b3d 100%); box-shadow: 0 14px 32px rgba(7, 15, 36, .28), inset 0 1px 0 rgba(255,255,255,.08); } #cycleTabPanel .cycle-male-guide:before { content: ""; position: absolute; z-index: -1; width: 155px; height: 155px; left: -78px; bottom: -105px; border: 1px solid rgba(143, 199, 255, .14); border-radius: 50%; box-shadow: 0 0 0 17px rgba(143,199,255,.025), 0 0 0 35px rgba(143,199,255,.02); } #cycleTabPanel .cmg-icon-wrap { position: relative; flex: 0 0 52px; width: 52px; height: 52px; } #cycleTabPanel .cmg-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(170, 215, 255, .34); border-radius: 18px; color: #e3f3ff; font-size: 28px; background: linear-gradient(145deg, rgba(109, 183, 255, .27), rgba(106, 119, 255, .12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.13); } #cycleTabPanel .cmg-spark { position: absolute; top: -6px; right: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #17213b; background: #a8d9ff; border: 2px solid #1a2948; font-size: 10px; } #cycleTabPanel .cmg-copy { min-width: 0; flex: 1; } #cycleTabPanel .cmg-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; color: #a8d9ff; font-size: 10px; font-weight: 800; letter-spacing: .02em; } #cycleTabPanel .cmg-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #80e6d0; box-shadow: 0 0 0 4px rgba(128,230,208,.1); } #cycleTabPanel .cycle-male-guide strong { display: block; margin: 0 0 8px; color: #f4f8ff; font-size: 15px; line-height: 1.65; font-weight: 900; } #cycleTabPanel .cycle-male-guide p { margin: 0; color: #c4d2e9; font-size: 11.5px; line-height: 2; font-weight: 500; } #cycleTabPanel .cmg-footer { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(196, 218, 255, .12); color: #9fb5d5; font-size: 9.5px; line-height: 1.8; } #cycleTabPanel .cmg-footer span { color: #9fd6ff; font-size: 14px; line-height: 1.3; } @media (max-width: 380px) { #cycleTabPanel .cycle-male-guide { gap: 11px; padding: 15px 12px 13px; border-radius: 20px; } #cycleTabPanel .cmg-icon-wrap, #cycleTabPanel .cmg-icon { width: 44px; height: 44px; flex-basis: 44px; } #cycleTabPanel .cmg-icon { border-radius: 15px; font-size: 24px; } #cycleTabPanel .cycle-male-guide strong { font-size: 13px; } #cycleTabPanel .cycle-male-guide p { font-size: 10.5px; } } /* Partner month dial: one marker for each day of the current calendar month */ #cycleTabPanel.cycle-view-male .cpc-ring-wrap { width:min(100%, 310px); aspect-ratio:1; display:grid; place-items:center; position:relative; margin:8px auto 18px; } #cycleTabPanel.cycle-view-male .cpc-month-markers { position:absolute; inset:0; z-index:4; pointer-events:none; } #cycleTabPanel.cycle-view-male .cpc-month-day { position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; line-height:1; color:#c9bdcc; background:#29212f; border:1px solid rgba(255,255,255,.13); box-sizing:border-box; } #cycleTabPanel.cycle-view-male .cpc-month-day.phase-period { color:#fff; background:#e66b9d; border-color:#ff9fc2; } #cycleTabPanel.cycle-view-male .cpc-month-day.phase-ovulation { color:#fff; background:#5fc8bf; border-color:#9aeee5; } #cycleTabPanel.cycle-view-male .cpc-month-day.phase-pms { color:#4a3000; background:#ffca66; border-color:#ffe3a6; } #cycleTabPanel.cycle-view-male .cpc-month-day.is-today { width:29px; height:29px; font-size:12px; font-weight:900; border:2px solid #fff; outline:2px solid rgba(255,255,255,.28); outline-offset:2px; z-index:2; } #cycleTabPanel.cycle-view-male .cpc-ring { z-index:1; inset:12%; width:76%; height:76%; } #cycleTabPanel.cycle-view-male .cpc-ring:before { inset:13px; } #cycleTabPanel.cycle-view-male .cpc-ring-center { padding:0 18px; } #cycleTabPanel.cycle-view-male .cpc-ring-center span { max-width:135px; text-align:center; line-height:1.6; font-size:11px; } @media(max-width:380px){#cycleTabPanel.cycle-view-male .cpc-ring-wrap{width:min(100%,270px)} #cycleTabPanel.cycle-view-male .cpc-month-day{width:19px;height:19px;font-size:9px} #cycleTabPanel.cycle-view-male .cpc-month-day.is-today{width:26px;height:26px;font-size:11px}} /* Partner dial: stronger ovulation colours + main-day star */ #cycleTabPanel.cycle-view-male .cpc-month-day.phase-ovulation { background:linear-gradient(145deg,#6fe0d6,#2fa99f); border-color:#a8f5ec; box-shadow:0 0 8px rgba(95,200,191,.45); } #cycleTabPanel.cycle-view-male .cpc-month-day.phase-ovulation-main { background:linear-gradient(145deg,#1f8f86,#0f5f63); border:2px solid #fef08a; box-shadow:0 0 0 2px rgba(254,240,138,.22),0 0 12px rgba(95,200,191,.6); font-weight:900; } #cycleTabPanel.cycle-view-male .cpc-month-day .cpc-ov-star { position:absolute; top:-7px; right:-5px; font-style:normal; font-size:9px; line-height:1; color:#fef08a; text-shadow:0 0 4px rgba(0,0,0,.6); } #cycleTabPanel.cycle-view-male .cpc-month-day.is-today.phase-ovulation-main { border-color:#fff; } #cycleTabPanel.cycle-view-male .cpc-legend-ovulation-main { display:inline-flex !important; align-items:center; justify-content:center; width:13px !important; height:13px !important; background:#0f5f63; border:1.5px solid #fef08a; color:#fef08a; font-size:8px; font-style:normal; border-radius:50%; } /* Partner dial: PMS colours (original yellow) + peak-day badge */ #cycleTabPanel.cycle-view-male .cpc-month-day.phase-pms { color:#4a3000; background:linear-gradient(145deg,#ffd987,#ffca66); border-color:#ffe3a6; box-shadow:0 0 8px rgba(255,202,102,.45); } #cycleTabPanel.cycle-view-male .cpc-month-day.phase-pms-main { color:#3b2400; background:linear-gradient(145deg,#ffca66,#f0a52e); border:2px solid #fff1cc; box-shadow:0 0 0 2px rgba(255,202,102,.25),0 0 12px rgba(255,202,102,.65); font-weight:900; } #cycleTabPanel.cycle-view-male .cpc-month-day .cpc-pms-mark { position:absolute; top:-7px; right:-5px; display:grid; place-items:center; width:11px; height:11px; border-radius:50%; font-style:normal; font-size:7px; font-weight:900; line-height:1; color:#4a3000; background:#fff1cc; border:1px solid #f0a52e; } #cycleTabPanel.cycle-view-male .cpc-legend-pms-main { display:inline-flex !important; align-items:center; justify-content:center; width:13px !important; height:13px !important; background:#f0a52e; border:1.5px solid #fff1cc; color:#4a3000; font-size:8px; font-style:normal; font-weight:900; border-radius:50%; } /* ─── بازی‌های ویژه Couplina ─── */ .cs-special-section{margin:22px 0 30px;padding:clamp(16px,3vw,28px);border:1px solid rgba(193,135,58,.22);border-radius:26px;background:linear-gradient(145deg,rgba(255,248,236,.97),rgba(255,241,225,.86));box-shadow:0 14px 38px rgba(116,71,35,.07);direction:rtl} .cs-special-heading{max-width:680px;margin:0 auto 20px;text-align:center} .cs-special-kicker{display:inline-block;color:#a86b2d;font-size:10px;font-weight:800;letter-spacing:1.8px;margin-bottom:7px} .cs-special-heading h3{margin:0;color:#553725;font-size:clamp(22px,4vw,30px);font-weight:900;letter-spacing:-.5px} .cs-special-heading h3 span{color:#d79a4a} .cs-special-heading p{max-width:560px;margin:9px auto 0;color:#8c6b55;font-size:13px;line-height:1.9} .cs-games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .cs-game-card{position:relative;display:flex;align-items:stretch;gap:11px;min-width:0;min-height:124px;padding:10px;border:1px solid rgba(160,111,65,.14);border-radius:19px;background:rgba(255,255,255,.8);color:#553725;text-align:right;box-shadow:0 5px 16px rgba(95,61,35,.035);overflow:hidden} button.cs-game-card{cursor:pointer;font:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} button.cs-game-card:hover{transform:translateY(-2px);border-color:rgba(191,132,58,.45);box-shadow:0 10px 22px rgba(95,61,35,.09)} .cs-game-card-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:3px 0} .cs-game-card-copy>b{font-size:14px;font-weight:900;color:#543625;line-height:1.5} .cs-game-card-copy>small{font-size:10px;line-height:1.6;color:#9a7c66} .cs-game-card-copy>strong{margin-top:4px;color:#ad7335;font-size:11px;font-weight:800} .cs-game-card-copy>strong span{display:inline-block;margin-right:3px} .cs-game-status{position:absolute;top:8px;left:8px;padding:4px 7px;border-radius:999px;background:#f7eee3;color:#a58a72;font-size:9px;font-weight:800;white-space:nowrap} .cs-status-live{background:#e9f5eb;color:#42774b} .cs-game-cover{position:relative;display:flex;flex:0 0 94px;width:94px;min-height:102px;align-items:center;justify-content:center;flex-direction:column;gap:3px;border-radius:13px;overflow:hidden;color:#fff;font-size:29px;background:linear-gradient(145deg,#d9a35e,#b76e3e)} .cs-game-cover small{font-size:9px;font-weight:800;letter-spacing:.2px;color:rgba(255,255,255,.9)} .cs-cover-xo{background:radial-gradient(circle at 20% 10%,#f8d9a3,transparent 40%),linear-gradient(145deg,#7d4b3a,#c58a53)} .cs-cover-xo i{position:absolute;left:17px;top:13px;font-style:normal;font-size:34px;color:#ffdf9c} .cs-cover-xo b{position:absolute;right:15px;top:24px;font-size:30px;color:#fff3dc} .cs-cover-xo em{position:absolute;left:38px;bottom:12px;font-size:26px;font-style:normal;color:#e8b8a1} .cs-cover-xo small{position:absolute;right:8px;bottom:7px;font-size:8px} .cs-cover-darts{background:linear-gradient(145deg,#4f766a,#233f3b)} .cs-cover-four{background:linear-gradient(145deg,#557eaf,#334f83);font-size:14px;line-height:1.5} .cs-cover-four i,.cs-cover-dots i{font-style:normal;color:#f7d47d} .cs-cover-four b,.cs-cover-dots b{font-size:14px;color:#f4b5a2} .cs-cover-bowl{background:linear-gradient(145deg,#8c91bb,#4b507e)} .cs-cover-cup{background:linear-gradient(145deg,#d99d66,#a65b3d)} .cs-cover-foot{background:linear-gradient(145deg,#6a9a7c,#2d6551)} .cs-cover-reversi{background:linear-gradient(145deg,#558b73,#244f43);flex-direction:row;flex-wrap:wrap} .cs-cover-reversi i{font-size:23px;font-style:normal}.cs-cover-reversi b{font-size:23px} .cs-cover-match{background:linear-gradient(145deg,#b78bba,#775b91)} .cs-cover-disco{background:linear-gradient(145deg,#bd8da7,#65538f)} .cs-cover-dots{background:linear-gradient(145deg,#cb946b,#8c593d);font-size:13px} .cs-cover-basket{background:linear-gradient(145deg,#d99c51,#a75d30)} .cs-xo-view{direction:rtl;padding-bottom:26px} .cs-xo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;color:#9d7658;font-size:12px;font-weight:800} .cs-xo-hero{padding:20px 16px 16px;text-align:center;border:1px solid rgba(193,135,58,.2);border-radius:23px;background:linear-gradient(150deg,#fff8ed,#fff0df)} .cs-xo-eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:#b77a3a} .cs-xo-hero h3{margin:7px 0;color:#563827;font-size:clamp(20px,4vw,27px);font-weight:900} .cs-xo-hero p{margin:0 auto;max-width:480px;color:#92725a;font-size:12px;line-height:1.8} .cs-xo-scoreboard{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:17px} .cs-xo-player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;min-width:0;flex:1;max-width:220px;padding:10px 11px;border:1px solid #f0dfca;border-radius:15px;background:rgba(255,255,255,.8);text-align:right} .cs-xo-player.is-turn{border-color:#d5a15c;background:#fff9ef;box-shadow:0 0 0 2px rgba(213,161,92,.13)} .cs-xo-mark{font-size:24px;font-weight:900;color:#bd8040;line-height:1} .cs-xo-player b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#684733} .cs-xo-player strong{font-size:19px;color:#583b29} .cs-xo-vs{font-size:9px;font-weight:900;color:#c5a17e} .cs-xo-lobby-timer{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px auto 0;color:#9a7659;font-size:11px} .cs-xo-lobby-timer b{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#fff;color:#a96f32;font-size:17px;box-shadow:inset 0 0 0 1px #efd8ba} .cs-xo-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,340px);margin:18px auto 13px;padding:10px;border-radius:21px;background:linear-gradient(145deg,#f5e5d2,#ebd3b8);box-shadow:0 10px 26px rgba(103,67,39,.09)} .cs-xo-cell{display:grid;place-items:center;aspect-ratio:1;border:1px solid rgba(164,117,73,.13);border-radius:14px;background:#fffaf3;color:#ad6f38;font-size:clamp(35px,10vw,53px);font-weight:800;line-height:1;transition:background .15s,transform .15s} .cs-xo-cell:not(:disabled){cursor:pointer}.cs-xo-cell:not(:disabled):hover{background:#fff0d9;transform:scale(.98)} .cs-xo-cell.is-o{color:#7c8c7a}.cs-xo-cell:disabled{opacity:1} .cs-xo-turn{min-height:38px;display:grid;place-items:center;text-align:center;color:#76533b;font-size:13px;font-weight:900} .cs-xo-note{max-width:480px;margin:0 auto;color:#a18771;font-size:10px;line-height:1.9;text-align:center} .cs-xo-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:16px} @media(max-width:480px){.cs-special-section{padding:13px;border-radius:20px}.cs-games-grid{gap:8px}.cs-game-card{gap:8px;min-height:106px;padding:8px;border-radius:15px}.cs-game-cover{flex-basis:70px;width:70px;min-height:88px;border-radius:11px;font-size:24px}.cs-game-status{top:5px;left:5px;font-size:8px;padding:3px 5px}.cs-game-card-copy>b{font-size:12px}.cs-game-card-copy>small{font-size:9px}.cs-game-card-copy>strong{font-size:10px}.cs-xo-player{grid-template-columns:auto 1fr;gap:5px;padding:8px}.cs-xo-player strong{grid-column:2}.cs-xo-vs{font-size:8px}} @media(prefers-reduced-motion:reduce){.cs-game-card,.cs-xo-cell{transition:none}} /* Couplina special games — bright yellow + light turquoise refresh */ .cs-special-section{border-color:rgba(52,190,190,.34)!important;background:linear-gradient(145deg,#fffde8 0%,#f1fffc 100%)!important;box-shadow:0 14px 38px rgba(27,154,155,.09)!important} .cs-special-kicker{color:#168f91!important} .cs-special-heading h3{color:#284e4c!important} .cs-special-heading h3 span{color:#e9c83e!important} .cs-special-heading p{color:#527b78!important} .cs-game-card{border-color:rgba(57,184,183,.22)!important;background:rgba(255,255,255,.9)!important;color:#284e4c!important} button.cs-game-card:hover{border-color:#55c8c3!important;box-shadow:0 10px 22px rgba(39,159,159,.13)!important} .cs-game-card-copy>b{color:#285957!important} .cs-game-card-copy>small{color:#648d88!important} .cs-game-card-copy>strong{color:#168f91!important} .cs-game-status{background:#e8fbf8!important;color:#258c88!important} .cs-game-status.cs-status-live{background:#fff5b8!important;color:#856b08!important} .cs-game-cover{background:linear-gradient(145deg,#61d8d0,#209eaa)!important;color:#fff!important;box-shadow:inset 0 0 0 1px #ffffff40} .cs-cover-xo{background:linear-gradient(145deg,#fff18a,#55d2cd)!important;color:#226e70!important} .cs-cover-darts,.cs-cover-four,.cs-cover-bowl,.cs-cover-cup,.cs-cover-foot,.cs-cover-reversi,.cs-cover-match,.cs-cover-disco,.cs-cover-dots,.cs-cover-basket,.cs-cover-pong{background:linear-gradient(145deg,#fff18a,#62d7d0)!important;color:#286b6b!important} .cs-xo-top{color:#328f8c!important} .cs-xo-hero{border-color:#a7e9e3!important;background:linear-gradient(150deg,#fffde8,#e9fffb)!important} .cs-xo-eyebrow{color:#168f91!important} .cs-xo-hero h3{color:#285957!important} .cs-xo-hero p{color:#527b78!important} .cs-xo-player{border-color:#c8eeea!important;background:rgba(255,255,255,.9)!important} .cs-xo-player.is-turn{border-color:#e9d45a!important;background:#fffbe0!important;box-shadow:0 0 0 2px #f3df6a35!important} .cs-xo-mark{color:#199f9f!important} .cs-xo-player b{color:#376c68!important} .cs-xo-player strong{color:#285957!important} .cs-xo-vs{color:#42aaa6!important} .cs-xo-lobby-timer{color:#347e7b!important} .cs-xo-lobby-timer b{background:#fffbdc!important;color:#188f91!important;box-shadow:inset 0 0 0 1px #c1e9df!important} .cs-xo-board{background:linear-gradient(145deg,#d4f5ef,#fff0a7)!important;box-shadow:0 10px 26px rgba(39,159,159,.11)!important} .cs-xo-cell{border-color:#d6efea!important;background:#fbfffc!important;color:#169b9b!important} .cs-xo-cell:not(:disabled):hover{background:#fff8c9!important} .cs-xo-cell.is-o{color:#d4a900!important} .cs-xo-turn{color:#347e7b!important} .cs-xo-note{color:#6a928d!important} .game-invite-actions{margin-top:7px} .game-invite-actions button{padding:7px 12px;border:1px solid #55c8c3;border-radius:10px;background:linear-gradient(120deg,#fff3a2,#c7f7f0);color:#216d6b;font-size:12px;font-weight:800;cursor:pointer} .game-invite-actions button:disabled{opacity:.6;cursor:wait} /* Special games: warm pale yellow stage, bright light-turquoise game tiles */ .cs-special-section{background:#f2df0f!important;border-color:#f0df76!important} .cs-game-card{background:#039e8f!important;border-color:#78dcd2!important;box-shadow:0 7px 18px rgba(33,151,147,.10)!important} .cs-game-card-copy>b{color:#ffffff!important}.cs-game-card-copy>small{color:#e6fffb!important}.cs-game-card-copy>strong{color:#fff7a8!important} .cs-game-cover,.cs-cover-xo,.cs-cover-darts,.cs-cover-four,.cs-cover-bowl,.cs-cover-cup,.cs-cover-foot,.cs-cover-reversi,.cs-cover-match,.cs-cover-disco,.cs-cover-dots,.cs-cover-basket,.cs-cover-pong{background:linear-gradient(145deg,#fff28b 0%,#72e1d7 100%)!important;color:#246a69!important} .cs-xo-hero{background:linear-gradient(145deg,#fff9bd,#cffff7)!important} .sticker-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .sticker-pack-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px;border:1px solid #f1d7e2;border-radius:16px;background:#fffafd;color:#58384b;cursor:pointer;font:inherit;min-width:0} .sticker-pack-card b{font-size:13px}.sticker-pack-card small{font-size:11px;color:#997b8a}.sticker-pack-card strong{font-size:10px;color:#b04e79} .sticker-pack-preview{display:flex;justify-content:center;align-items:center;width:100%;min-height:70px}.sticker-pack-thumb{width:52px;height:58px;max-width:34%;overflow:visible} .sticker-detail-stickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:42vh;overflow:auto;padding:8px} .sticker-choice{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid #f3dce6;border-radius:13px;background:#fffafd;padding:6px;cursor:pointer;min-width:0;color:#75435c;font:inherit} .sticker-choice:disabled{opacity:.6;cursor:wait}.sticker-choice-art{width:100%;max-width:100px;height:auto;display:block}.sticker-choice small{font-size:10px;line-height:1.5;text-align:center} .sticker-buy-button:disabled{opacity:.55;cursor:not-allowed} @media(max-width:420px){.sticker-detail-stickers{grid-template-columns:repeat(2,minmax(0,1fr))}.sticker-pack-card{padding:9px 5px}} /* Pong cover */ .cs-cover-pong .cs-pong-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.2))} .cs-cover-pong .pgl-field{fill:#0f1a3d;stroke:#fff;stroke-opacity:.85;stroke-width:2} .cs-cover-pong .pgl-net{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:1.6;stroke-dasharray:3 3.5;stroke-linecap:round} .cs-cover-pong .pgl-ring{fill:none;stroke:#35f2e1;stroke-opacity:.5;stroke-width:1.4} .cs-cover-pong .pgl-pad-op{fill:#ff4fa3} .cs-cover-pong .pgl-pad-me{fill:#ffd23f} .cs-cover-pong .pgl-pad{filter:drop-shadow(0 0 2px currentColor)} .cs-cover-pong .pgl-trail{fill:none;stroke:#35f2e1;stroke-opacity:.55;stroke-width:2.6;stroke-linecap:round} .cs-cover-pong .pgl-ball{fill:#fff;stroke:#35f2e1;stroke-width:2.2} .cs-cover-pong .pgl-shine{fill:none;stroke:#35f2e1;stroke-opacity:.6;stroke-width:1.2;stroke-linecap:round} .cs-cover-pong .pgl-ballg{animation:pglBall 2.4s ease-in-out infinite} @keyframes pglBall{0%,100%{transform:translate(0,12px)}50%{transform:translate(-12px,-12px)}} @media(prefers-reduced-motion:reduce){.cs-cover-pong .pgl-ballg{animation:none}} /* ===== sticker store: Telegram-style pack cards, locked previews ===== */ .sticker-pack-grid{grid-template-columns:1fr!important} .sticker-pack-grid .tg-pack{border:1px solid #ffffff1c;border-radius:18px;background:#ffffff0a;color:#fff0f6;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s} .sticker-pack-grid .tg-pack:hover{transform:translateY(-2px);border-color:#ff9fc3aa} .tg-pack .tg-strip .sticker-pack-thumb{width:100%;max-width:none;height:auto} .tg-pack .tg-info b{color:#fff0f6}.tg-pack .tg-info small{color:#cbb2c5;opacity:1} .tg-pack .tg-action{justify-self:start} .sticker-detail-stickers.stk-grid .sticker-choice{display:block;background:#ffffff0b;border:0;color:inherit} .sticker-detail-stickers.stk-grid .sticker-choice.is-locked .sticker-choice-art{opacity:.88} .sticker-detail-stickers.stk-grid .sticker-choice.is-previewing{background:#ff9fc333;outline:1px solid #ff9fc3} .sticker-detail-stickers.stk-grid em{z-index:1;font-size:13px} .sticker-detail-art .stk.big{width:150px} .sticker-buy-button[hidden]{display:none} @media(max-width:420px){.sticker-detail-stickers.stk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* fix: نوار خالی انتهای صفحه بازی‌ها (hidden باید واقعاً مخفی باشه) */ .cq-active-banner[hidden]{display:none} .cs-xo-lobby-timer[hidden]{display:none} /* ─── کاپ پونگ ─── */ .cs-cup-stage{width:min(100%,400px);margin:18px auto 10px;border-radius:21px;overflow:hidden;border:2px solid #c8eeea;background:#fffde8;box-shadow:0 10px 26px rgba(39,159,159,.13)} .cs-cup-stage canvas{display:block;width:100%;height:auto;aspect-ratio:400/580;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab} .cs-cup-info{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;min-height:20px;margin:0 auto 4px;color:#527b78;font-size:11px;font-weight:700} .cs-cup-info b{color:#188f91;font-size:13px} .cs-cup-dot.is-me{color:#ffc928!important;text-shadow:0 0 0 #e0a800} .cs-cup-dot.is-partner{color:#ff7f9d!important} .cs-cup-view[hidden]{display:none} /* ─── پونگ ─── */ .cs-pong-stage{width:min(100%,400px,max(240px,calc((100dvh - 260px)*.625)));margin:18px auto 12px;border-radius:22px;overflow:hidden;border:2px solid #35f2e1;background:#070b1f;box-shadow:0 0 0 1px rgba(53,242,225,.25),0 0 34px rgba(53,242,225,.28),0 0 70px rgba(255,79,163,.14)} .cs-pong-stage canvas{display:block;width:100%;height:auto;aspect-ratio:400/640;touch-action:none;user-select:none;-webkit-user-select:none;cursor:none} .cs-pong-dot.is-me{color:#ffc928!important} .cs-pong-dot.is-partner{color:#ff4fa3!important} .cs-pong-view[hidden]{display:none} /* فوتر: پدینگ پایینی عمومی footer{padding:50px} باعث فضای خالی بعد از فوتر و اسکرول اضافه می‌شد */ .couplina-footer-pro{padding-bottom:0!important} /* جفتش کن — کارت‌های حافظه */ /* ─── بولینگ ─── */ .cs-bowl-stage{width:min(100%,400px);margin:18px auto 10px;border-radius:21px;overflow:hidden;border:2px solid #c8eeea;background:#2c2358;box-shadow:0 10px 26px rgba(39,159,159,.13)} .cs-bowl-stage canvas{display:block;width:100%;height:auto;aspect-ratio:400/620;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab} .cs-bowl-info{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;min-height:20px;margin:0 auto 4px;color:#527b78;font-size:11px;font-weight:700} .cs-bowl-info b{color:#188f91;font-size:13px} .cs-bowl-dot.is-me{color:#ffc928!important;text-shadow:0 0 0 #e0a800} .cs-bowl-dot.is-partner{color:#ff7f9d!important} .cs-bowl-view[hidden]{display:none} /* دارت */ .cs-dart-stage{width:min(100%,400px);margin:18px auto 10px;border-radius:21px;overflow:hidden;border:2px solid #c8eeea;background:#2a2457;box-shadow:0 10px 26px rgba(39,159,159,.13)} .cs-dart-stage canvas{display:block;width:100%;height:auto;aspect-ratio:400/560;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair} .cs-dart-info{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;min-height:20px;margin:0 auto 4px;color:#527b78;font-size:11px;font-weight:700} .cs-dart-info b{color:#188f91;font-size:13px} .cs-dart-dot.is-me{color:#ffc928!important;text-shadow:0 0 0 #e0a800} .cs-dart-dot.is-partner{color:#ff7f9d!important} .cs-dart-view[hidden]{display:none} /* بسکتبال */ .cs-bball-stage{width:min(100%,400px);margin:18px auto 10px;border-radius:21px;overflow:hidden;border:2px solid #c8eeea;background:#2a2457;box-shadow:0 10px 26px rgba(39,159,159,.13)} .cs-bball-stage canvas{display:block;width:100%;height:auto;aspect-ratio:400/560;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab} .cs-bball-info{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;min-height:20px;margin:0 auto 4px;color:#527b78;font-size:11px;font-weight:700} .cs-bball-info b{color:#188f91;font-size:13px} .cs-bball-dot.is-me{color:#ffc928!important;text-shadow:0 0 0 #e0a800} .cs-bball-dot.is-partner{color:#ff7f9d!important} .cs-bball-view[hidden]{display:none} /* ─── Couplina · بازی ویژه‌ی ریورسی (فقط برای صفحه‌ی بازی ریورسی) ─── */ .cs-rv-view{direction:rtl} .rv-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;width:min(100%,390px);margin:18px auto 10px;padding:8px;border-radius:18px;background:linear-gradient(145deg,#2f7d63,#1d5846);box-shadow:0 10px 26px rgba(27,86,68,.22);direction:ltr} .rv-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;border-radius:6px;background:#3b9475;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:background .15s} .rv-cell>*{grid-area:1/1} .rv-cell:disabled{opacity:1;cursor:default} .rv-cell:not(:disabled){cursor:pointer} .rv-cell:not(:disabled):hover{background:#4cab88} .rv-cell.is-hint::after{content:"";grid-area:1/1;width:28%;height:28%;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.14)} .rv-disc{width:84%;height:84%;border-radius:50%;transform:scale(0);box-shadow:0 2px 4px rgba(0,0,0,.35)} .rv-disc.is-b{transform:scale(1);background:radial-gradient(circle at 35% 30%,#5a5a5a,#0f0f0f 72%)} .rv-disc.is-w{transform:scale(1);background:radial-gradient(circle at 35% 30%,#fff,#d2d2d2 78%)} .rv-cell.is-last .rv-disc{box-shadow:0 0 0 2px #ffd95a,0 2px 4px rgba(0,0,0,.35)} .rv-disc.is-drop{animation:rvDrop .28s ease-out} .rv-disc.is-flip{animation:rvFlip .5s ease} @keyframes rvDrop{from{transform:scale(.25);opacity:.4}to{transform:scale(1);opacity:1}} @keyframes rvFlip{0%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(0) scale(1)}} .rv-chip{display:inline-block;flex:none;width:21px;height:21px;border-radius:50%;vertical-align:middle} .rv-chip.b{background:radial-gradient(circle at 35% 30%,#5a5a5a,#0f0f0f 72%)} .rv-chip.w{background:radial-gradient(circle at 35% 30%,#fff,#d2d2d2 78%);box-shadow:inset 0 0 0 1px #c9c9c9} .cs-rv-view .cs-xo-mark{display:grid;place-items:center} .rv-counts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px} .rv-count{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #cfe9e4;border-radius:14px;background:#fff;color:#285957} .rv-count b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .rv-count strong{font-size:16px} @media(prefers-reduced-motion:reduce){.rv-disc.is-drop,.rv-disc.is-flip{animation:none}.rv-cell{transition:none}} /* ─── Couplina · بازی ویژه‌ی نقطه و خط (فقط برای صفحه‌ی بازی نقطه و خط) ─── */ .cs-dnb-view{direction:rtl} .dnb-board{display:grid;grid-template-columns:repeat(5,14px minmax(0,1fr)) 14px;grid-template-rows:repeat(5,14px minmax(0,1fr)) 14px;width:min(100%,390px);aspect-ratio:1;margin:18px auto 10px;padding:12px;box-sizing:border-box;border-radius:18px;background:#fffdf1;border:2px solid #c8eeea;box-shadow:0 10px 26px rgba(39,159,159,.13);direction:ltr;touch-action:manipulation} .dnb-dot{width:14px;height:14px;border-radius:50%;background:#2f8f8c;z-index:2} .dnb-line{position:relative;display:block;padding:0;border:0;background:transparent;cursor:default} .dnb-line::before{content:"";position:absolute;border-radius:6px;background:#e3f1ef;transition:background .15s,opacity .15s} .dnb-line.is-h::before{left:1px;right:1px;top:50%;height:8px;transform:translateY(-50%)} .dnb-line.is-v::before{top:1px;bottom:1px;left:50%;width:8px;transform:translateX(-50%)} .dnb-line::after{content:"";position:absolute} .dnb-line.is-h::after{inset:-9px 0} .dnb-line.is-v::after{inset:0 -9px} .dnb-line:not(:disabled){cursor:pointer} .dnb-line:not(:disabled):hover::before{background:#f7b3cd} .dnb-line:not(:disabled):active::before{background:#f2679a} .dnb-line:disabled{opacity:1} .dnb-line.is-p1::before{background:#f2679a} .dnb-line.is-p2::before{background:#1f2d6b} .dnb-line.is-last::before{box-shadow:0 0 0 3px #ffd95a} .dnb-box{display:grid;place-items:center;border-radius:8px;font-size:20px;line-height:1;color:transparent;transition:background .2s} .dnb-box.is-p1{background:rgba(242,103,154,.28);color:#f2679a} .dnb-box.is-p2{background:rgba(31,45,107,.26);color:#1f2d6b} .dnb-box.is-new{animation:dnbPop .35s ease-out} @keyframes dnbPop{from{transform:scale(.4);opacity:.3}to{transform:scale(1);opacity:1}} .dnb-chip{display:inline-block;flex:none;width:21px;height:21px;border-radius:6px;vertical-align:middle} .dnb-chip.p1{background:#f2679a} .dnb-chip.p2{background:#1f2d6b} .cs-dnb-view .cs-xo-mark{display:grid;place-items:center} .dnb-counts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px} .dnb-count{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #cfe9e4;border-radius:14px;background:#fff;color:#285957} .dnb-count b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .dnb-count strong{font-size:16px} @media(prefers-reduced-motion:reduce){.dnb-box.is-new{animation:none}.dnb-line::before,.dnb-box{transition:none}} /* ─── دیسک‌او (Disk-O) ─── */ .cs-disco-view{direction:rtl} .dsc-stage{display:flex;justify-content:center;margin:6px 0 2px} .dsc-canvas{width:min(100%,340px);aspect-ratio:5/7;height:auto;border-radius:22px;border:3px solid #6a3aa8;background:#2a1250;box-shadow:0 10px 28px rgba(74,34,128,.35),0 0 0 4px rgba(247,201,72,.25);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab} .dsc-canvas:active{cursor:grabbing} .dsc-pos{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px auto 2px;width:min(100%,340px);font-size:12px;color:#5b3a8c} .dsc-pos[hidden]{display:none} .dsc-pos input[type=range]{width:100%;accent-color:#a855c8} .dsc-pos input[type=range]:disabled{opacity:.45} .cs-disco-view .dnb-count small{font-size:10px;opacity:.7} /* ─── چهار در یک ردیف (Connect Four)؛ فقط کلاس‌های c4-* و cs-c4-view ─── */ .cs-c4-view{direction:rtl} .c4-board{display:flex;direction:ltr;gap:5px;width:min(100%,380px);margin:18px auto 13px;padding:9px;border-radius:20px;background:linear-gradient(145deg,#3f78d4,#2a56a8);box-shadow:0 10px 26px rgba(42,86,168,.28),inset 0 0 0 2px rgba(255,255,255,.18)} .c4-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px;padding:0;border:0;border-radius:12px;background:transparent;cursor:default;-webkit-tap-highlight-color:transparent} .c4-col:not(:disabled){cursor:pointer} .c4-col:not(:disabled):hover,.c4-col:not(:disabled):active{background:rgba(255,255,255,.16)} .c4-col:disabled{opacity:1} .c4-slot{position:relative;display:block;aspect-ratio:1;border-radius:50%;background:#e8f6f3;box-shadow:inset 0 3px 6px rgba(15,47,102,.38),inset 0 -1px 0 rgba(255,255,255,.55)} .c4-disc{position:absolute;inset:7%;border-radius:50%;background:transparent;transform:none} .c4-disc.is-p1{background:radial-gradient(circle at 34% 30%,#ff9aae,#ef4b6c 55%,#c92a4f);box-shadow:inset 0 -3px 5px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.25)} .c4-disc.is-p2{background:radial-gradient(circle at 34% 30%,#fff3a3,#ffd23f 55%,#e8aa12);box-shadow:inset 0 -3px 5px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.25)} .c4-disc.is-last{outline:3px solid rgba(255,255,255,.85);outline-offset:-3px} .c4-disc.is-win{outline:4px solid #fff;outline-offset:-4px;animation:c4Win .8s ease-in-out infinite alternate;z-index:2} .c4-disc.is-drop{animation:c4Drop .5s cubic-bezier(.45,0,.75,.55) both;z-index:3} @keyframes c4Drop{0%{transform:translateY(var(--c4-from,-300%))}70%{transform:translateY(0)}82%{transform:translateY(-9%)}100%{transform:translateY(0)}} @keyframes c4Win{from{transform:scale(1)}to{transform:scale(1.1)}} .c4-chip{display:inline-block;flex:none;width:21px;height:21px;border-radius:50%;vertical-align:middle} .c4-chip.p1{background:radial-gradient(circle at 34% 30%,#ff9aae,#ef4b6c 60%,#c92a4f)} .c4-chip.p2{background:radial-gradient(circle at 34% 30%,#fff3a3,#ffd23f 60%,#e8aa12)} .cs-c4-view .cs-xo-mark{display:grid;place-items:center} @media(prefers-reduced-motion:reduce){.c4-disc.is-drop,.c4-disc.is-win{animation:none}} /* لوگوی چهار در یک ردیف */ .cs-cover-four{gap:4px} .cs-cover-four .cs-c4-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-four .c4l-board{fill:rgba(31,127,131,.22);stroke:#1f7f83;stroke-width:3.4} .cs-cover-four .c4l-holes circle{fill:rgba(255,255,255,.7)} .cs-cover-four .c4l-r{fill:#ef4b6c;stroke:#c92a4f;stroke-width:1} .cs-cover-four .c4l-y{fill:#ffc928;stroke:#d99a00;stroke-width:1} .cs-cover-four .c4l-drop{transform-box:fill-box;animation:c4LogoDrop 3.2s ease-in-out infinite} .cs-cover-four .c4l-win{stroke:#fff;stroke-width:3.2;stroke-dasharray:1 2;stroke-dashoffset:1.02;animation:c4LogoLine 3.2s ease-in-out infinite} .cs-cover-four small{position:static!important;font-size:9px} @keyframes c4LogoDrop{0%{transform:translateY(-34px);opacity:0}10%{opacity:1}28%{transform:translateY(0)}32%{transform:translateY(-3px)}36%,86%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(0);opacity:0}} @keyframes c4LogoLine{0%,40%{stroke-dashoffset:1.02;opacity:1}62%,84%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}} #csC4Sound{min-width:118px} .cs-game-four .cs-game-card-copy>b{display:block;padding-top:18px} @media(prefers-reduced-motion:reduce){.cs-cover-four .c4l-drop,.cs-cover-four .c4l-win{animation:none}.cs-cover-four .c4l-win{stroke-dashoffset:0}} /* ─── فوتبال انگشتی ─── */ .cs-foot-view{direction:rtl} .ft-stage{display:flex;justify-content:center;margin:6px 0 2px} .ft-canvas{width:min(100%,340px);aspect-ratio:300/468;height:auto;border-radius:22px;border:3px solid #1f7a45;background:#1d4d36;box-shadow:0 10px 28px rgba(20,80,50,.35),0 0 0 4px rgba(120,230,160,.25);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab} .ft-canvas:active{cursor:grabbing} .cs-foot-view .dnb-count small{font-size:10px;opacity:.7} .ft-canvas.is-mine{border-color:#ffe066;animation:ftGlow 1.6s ease-in-out infinite} @keyframes ftGlow{0%,100%{box-shadow:0 10px 28px rgba(20,80,50,.35),0 0 0 4px rgba(255,224,102,.25)}50%{box-shadow:0 10px 28px rgba(20,80,50,.35),0 0 0 8px rgba(255,224,102,.5)}} /* ─── دوز: لوگو، خط برنده و افکت‌ها ─── */ .cs-cover-xo{gap:4px} .cs-cover-xo .cs-xo-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-xo .xl-grid{stroke:#1f7f83;stroke-width:3.4;opacity:.5} .cs-cover-xo .xl-x{stroke:#16787c;stroke-width:4.6} .cs-cover-xo .xl-o{stroke:#e29a00;stroke-width:4.6} .cs-cover-xo .xl-win{stroke:#ff5d8f;stroke-width:3.6;stroke-dasharray:1 2;stroke-dashoffset:1.02;animation:xoLogoLine 3.2s ease-in-out infinite} .cs-cover-xo small{position:static!important;font-size:9px} @keyframes xoLogoLine{0%,8%{stroke-dashoffset:1.02;opacity:1}38%,78%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}} .cs-xo-board{position:relative} .cs-xo-cell.is-new{animation:xoPop .34s cubic-bezier(.2,1.6,.4,1)} @keyframes xoPop{0%{transform:scale(.25);opacity:0}100%{transform:scale(1);opacity:1}} .cs-xo-cell.is-win{background:#fff6c8!important;box-shadow:0 0 0 2px rgba(255,93,143,.5),0 0 16px rgba(255,179,71,.6);animation:xoWinPulse .8s ease-in-out .45s 3} @keyframes xoWinPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .cs-xo-winline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3} .cs-xo-winline line{fill:none;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1.02;animation:xoLineDraw .6s cubic-bezier(.4,0,.2,1) .15s forwards} .cs-xo-winline .wl-glow{opacity:.25} @keyframes xoLineDraw{to{stroke-dashoffset:0}} .cs-xo-board.is-draw .cs-xo-cell{animation:xoShake .55s ease-in-out} @keyframes xoShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} .cs-xo-board.is-finale{box-shadow:0 0 0 3px rgba(255,93,143,.25),0 12px 32px rgba(255,179,71,.3)!important} #csXOSound{min-width:118px} @media(prefers-reduced-motion:reduce){.cs-xo-winline line{animation:none;stroke-dashoffset:0}.cs-xo-cell.is-new,.cs-xo-cell.is-win,.cs-xo-board.is-draw .cs-xo-cell,.cs-cover-xo .xl-win{animation:none}.cs-cover-xo .xl-win{stroke-dashoffset:0}} /* لوگوی دارت */ .cs-cover-darts{gap:4px} .cs-cover-darts .cs-dart-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-darts .dl-board circle{stroke:#1f7f83;stroke-width:3.2} .cs-cover-darts .dl-board circle:nth-child(2){stroke:#e29a00;stroke-width:3.6} .cs-cover-darts .dl-board circle:nth-child(1){opacity:.55} .cs-cover-darts .dl-bull{fill:#ff5d8f} .cs-cover-darts .dl-dart{transform-box:fill-box;animation:dtLogoDart 3.2s ease-in-out infinite} .cs-cover-darts .dl-barrel{stroke:#16787c;stroke-width:3.6;fill:none} .cs-cover-darts .dl-tip{stroke:#fff;stroke-width:2.4;fill:none} .cs-cover-darts .dl-flight{fill:#ff5d8f;stroke:#ff5d8f;stroke-width:1} .cs-cover-darts .dl-flight2{fill:#e29a00;stroke:#e29a00} .cs-cover-darts small{position:static!important;font-size:9px} @keyframes dtLogoDart{0%{transform:translate(14px,-14px);opacity:0}16%{opacity:1}30%{transform:translate(0,0)}34%{transform:translate(1.5px,-1.5px)}38%,82%{transform:translate(0,0);opacity:1}96%,100%{transform:translate(0,0);opacity:0}} @media(prefers-reduced-motion:reduce){.cs-cover-darts .dl-dart{animation:none}} /* توضیحات دارت */ .cs-dart-note{display:flex;flex-direction:column;gap:4px;max-width:420px;text-align:right;line-height:1.8;font-size:11px} .cs-dart-note b{display:block;margin-bottom:2px;text-align:center;color:#2f7f80;font-size:12.5px} .cs-dart-note span{display:block;position:relative;padding-right:14px} .cs-dart-note span::before{content:"●";position:absolute;right:0;top:.1em;font-size:7px;color:#e29a00} /* ─── بولینگ: لوگوی کارت، صحنه‌ی بازی و توضیحات ─── */ .cs-cover-bowl{gap:4px} .cs-cover-bowl .cs-bowl-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-bowl .bl-body{fill:#fff;stroke:#1f7f83;stroke-width:1.6;stroke-linejoin:round} .cs-cover-bowl .bl-stripe{fill:none;stroke:#ff5d8f;stroke-width:1.8;stroke-linecap:round} .cs-cover-bowl .bl-ball-body{fill:#1f7f83;stroke:#16787c;stroke-width:1.4} .cs-cover-bowl .bl-hole{fill:#e9fffb} .cs-cover-bowl .bl-shine{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-linecap:round} .cs-cover-bowl .bl-ball{transform-box:fill-box;animation:blBall 3.4s ease-in-out infinite} .cs-cover-bowl .bl-pin{transform-box:fill-box;transform-origin:50% 100%} .cs-cover-bowl .bl-pin1{animation:blPinMid 3.4s ease-in-out infinite} .cs-cover-bowl .bl-pin2{animation:blPinL 3.4s ease-in-out infinite} .cs-cover-bowl .bl-pin3{animation:blPinR 3.4s ease-in-out infinite} .cs-cover-bowl small{position:static!important;font-size:9px} @keyframes blBall{0%,10%{transform:translateY(0);opacity:1}36%{transform:translateY(-15px);opacity:1}42%,100%{transform:translateY(-15px);opacity:0}} @keyframes blPinMid{0%,36%{transform:none}46%{transform:translateY(-4px) rotate(-38deg)}60%,88%{transform:translate(-2px,2px) rotate(-78deg);opacity:.9}100%{transform:none}} @keyframes blPinL{0%,36%{transform:none}46%{transform:translateY(-3px) rotate(-30deg)}60%,88%{transform:translate(-4px,2px) rotate(-70deg);opacity:.9}100%{transform:none}} @keyframes blPinR{0%,36%{transform:none}46%{transform:translateY(-3px) rotate(34deg)}60%,88%{transform:translate(4px,2px) rotate(74deg);opacity:.9}100%{transform:none}} @media(prefers-reduced-motion:reduce){.cs-cover-bowl .bl-ball,.cs-cover-bowl .bl-pin{animation:none}} .cs-bowl-stage{background:#171040;border:2px solid #b9a6ff;box-shadow:0 14px 34px rgba(80,50,160,.35),0 0 0 4px rgba(185,166,255,.18)} .cs-bowl-stage canvas{will-change:contents;-webkit-tap-highlight-color:transparent} .cs-bowl-info span{padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.65);border:1px solid #c8eeea} .cs-bowl-rules{max-width:520px;text-align:right!important;font-size:11px!important;line-height:2!important;background:rgba(255,255,255,.62);border:1px solid #c8eeea;border-radius:16px;padding:12px 16px} .cs-bowl-rules>b{display:block;margin-bottom:4px;color:#188f91;font-size:13px} .cs-bowl-rules ul{margin:0;padding:0 18px 0 0;list-style:disc} .cs-bowl-rules li{margin:2px 0} .cs-bowl-rules li b{color:#087f7a} /* ─── کاپ پونگ: لوگوی کارت و توضیحات ─── */ .cs-cover-cup{gap:4px} .cs-cover-cup .cs-cup-logo{display:block;width:min(62px,80%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-cup .cl-shadow{fill:rgba(20,110,115,.2)} .cs-cover-cup .cl-body{fill:#ff7f9d;stroke:#1f7f83;stroke-width:1.5;stroke-linejoin:round} .cs-cover-cup .cl-c4 .cl-body{fill:#ffc928} .cs-cover-cup .cl-band{fill:rgba(255,255,255,.75)} .cs-cover-cup .cl-rim{fill:#fff6c9;stroke:#1f7f83;stroke-width:1.3} .cs-cover-cup .cl-ball circle{fill:#fff;stroke:#1f7f83;stroke-width:1.5} .cs-cover-cup .cl-shine{fill:none;stroke:rgba(31,127,131,.35);stroke-width:1.2;stroke-linecap:round} .cs-cover-cup .cl-ball{transform-box:fill-box;animation:clBall 3.2s ease-in-out infinite} .cs-cover-cup .cl-c4{transform-box:fill-box;transform-origin:50% 100%;animation:clCup 3.2s ease-in-out infinite} .cs-cover-cup small{position:static!important;font-size:9px} @keyframes clBall{0%{transform:translate(-24px,6px);opacity:0}8%{transform:translate(-24px,6px);opacity:1}32%{transform:translate(-10px,-8px)}52%{transform:translate(0,8px);opacity:1}60%,100%{transform:translate(0,10px) scale(.6);opacity:0}} @keyframes clCup{0%,50%{transform:none;opacity:1}58%{transform:translateY(-3px) scale(1.06)}72%,90%{transform:translateY(-6px) scale(.9);opacity:0}100%{transform:none;opacity:1}} @media(prefers-reduced-motion:reduce){.cs-cover-cup .cl-ball,.cs-cover-cup .cl-c4{animation:none}} .cs-cup-rules{margin-top:2px} /* ─── فوتبال انگشتی: لوگوی کارت ─── */ .cs-cover-foot{gap:4px} .cs-cover-foot .cs-foot-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-foot .fl-pitch{fill:#35a86a;stroke:#1f7f83;stroke-width:1.6} .cs-cover-foot .fl-line{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.5;stroke-linecap:round} .cs-cover-foot .fl-goal{fill:rgba(255,255,255,.35);stroke:#1f7f83;stroke-width:1.8;stroke-linejoin:round} .cs-cover-foot .fl-net{stroke:#1f7f83;stroke-width:.9;opacity:.6} .cs-cover-foot .fl-trail{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:2.5 3.5;stroke-linecap:round;opacity:.9} .cs-cover-foot .fl-ball-body{fill:#fff;stroke:#1f7f83;stroke-width:1.5} .cs-cover-foot .fl-ball-patch{fill:#1f7f83} .cs-cover-foot .fl-ball{transform-box:fill-box;animation:flBall 3s ease-in-out infinite} .cs-cover-foot small{position:static!important;font-size:9px} @keyframes flBall{0%,14%{transform:translateY(0);opacity:1}46%{transform:translateY(-32px);opacity:1}54%,100%{transform:translateY(-32px);opacity:0}} @media(prefers-reduced-motion:reduce){.cs-cover-foot .fl-ball{animation:none}} .cs-foot-view .cs-xo-note{text-align:right;line-height:1.95} /* ─── ریورسی: لوگو و صدا ─── */ .cs-cover-reversi{flex-direction:column!important;flex-wrap:nowrap!important;gap:4px} .cs-cover-reversi .cs-rv-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-reversi .rvl-board{fill:#2f9a78;stroke:#1f7f83;stroke-width:3} .cs-cover-reversi .rvl-grid{fill:none;stroke:rgba(0,40,30,.32);stroke-width:1.4;stroke-linecap:round} .cs-cover-reversi .rvl-w{fill:#fff;stroke:#c9d4d3;stroke-width:1} .cs-cover-reversi .rvl-b{fill:#232733;stroke:#0b0d13;stroke-width:1} .cs-cover-reversi .rvl-flip,.cs-cover-reversi .rvl-new{transform-box:fill-box;transform-origin:center} .cs-cover-reversi .rvl-flip{fill:#fff;stroke:#c9d4d3;stroke-width:1;animation:rvLogoFlip 3.2s ease-in-out infinite} .cs-cover-reversi .rvl-new{fill:#232733;stroke:#0b0d13;stroke-width:1;animation:rvLogoNew 3.2s ease-in-out infinite} .cs-cover-reversi small{position:static!important;font-size:9px} @keyframes rvLogoNew{0%,6%{transform:scale(0);opacity:0}16%{transform:scale(1.18);opacity:1}22%,86%{transform:scale(1);opacity:1}96%,100%{transform:scale(0);opacity:0}} @keyframes rvLogoFlip{0%,26%{transform:scaleX(1);fill:#fff;stroke:#c9d4d3}34%{transform:scaleX(.05);fill:#fff;stroke:#c9d4d3}35%{transform:scaleX(.05);fill:#232733;stroke:#0b0d13}44%,84%{transform:scaleX(1);fill:#232733;stroke:#0b0d13}92%{transform:scaleX(.05);fill:#232733;stroke:#0b0d13}93%{transform:scaleX(.05);fill:#fff;stroke:#c9d4d3}100%{transform:scaleX(1);fill:#fff;stroke:#c9d4d3}} #csRVSound{min-width:118px} @media(prefers-reduced-motion:reduce){.cs-cover-reversi .rvl-flip,.cs-cover-reversi .rvl-new{animation:none}.cs-cover-reversi .rvl-flip{fill:#232733;stroke:#0b0d13}} /* ═══════════ جفتش کن · طراحی تازه ═══════════ */ /* لوگوی کارت بازی */ .cs-cover-match{gap:4px} .cs-cover-match .cs-match-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-match small{position:static!important;font-size:9px} .cs-cover-match .ml-face{fill:#fffdf0;stroke:#1f7f83;stroke-width:3} .cs-cover-match .ml-back{fill:#35c7c0;stroke:#1f7f83;stroke-width:3} .cs-cover-match .ml-pat{fill:none;stroke:#fff3a0;stroke-width:3;stroke-linejoin:round} .cs-cover-match .ml-heart{fill:#ff5d8f} .cs-cover-match .ml-spark{fill:#ffc928;stroke:#fff;stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0;animation:mlSpark 3.6s ease-in-out infinite} .cs-cover-match .ml-bback,.cs-cover-match .ml-bfront{transform-box:fill-box;transform-origin:center} .cs-cover-match .ml-bback{animation:mlBack 3.6s ease-in-out infinite} .cs-cover-match .ml-bfront{transform:scaleX(0);animation:mlFront 3.6s ease-in-out infinite} @keyframes mlBack{0%,26%{transform:scaleX(1)}38%,88%{transform:scaleX(0)}98%,100%{transform:scaleX(1)}} @keyframes mlFront{0%,36%{transform:scaleX(0)}48%,84%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}} @keyframes mlSpark{0%,46%{opacity:0;transform:scale(.2) rotate(0)}58%{opacity:1;transform:scale(1.15) rotate(25deg)}80%{opacity:1;transform:scale(1) rotate(25deg)}92%,100%{opacity:0;transform:scale(.3) rotate(45deg)}} @media(prefers-reduced-motion:reduce){.cs-cover-match .ml-bback{animation:none;transform:scaleX(0)}.cs-cover-match .ml-bfront{animation:none;transform:scaleX(1)}.cs-cover-match .ml-spark{animation:none;opacity:1}} /* صفحه‌ی بازی */ .cs-match-view .cs-xo-hero{position:relative;overflow:hidden;padding:22px 14px 18px;border:1.5px solid #9fe3dc!important;border-radius:28px;background:radial-gradient(circle at 10% 0,#fff6a8 0,transparent 42%),radial-gradient(circle at 95% 100%,#bff6ee 0,transparent 50%),linear-gradient(150deg,#fffde8,#dffcf7)!important;box-shadow:0 14px 32px rgba(31,127,131,.13)} .cs-match-view .cs-xo-hero>*{position:relative;z-index:1} .cs-match-view .cs-xo-hero::before,.cs-match-view .cs-xo-hero::after{content:"♥";position:absolute;z-index:0;color:rgba(255,93,143,.2);pointer-events:none;animation:mtFloat 5s ease-in-out infinite} .cs-match-view .cs-xo-hero::before{left:14px;top:12px;font-size:26px} .cs-match-view .cs-xo-hero::after{right:16px;bottom:12px;font-size:20px;animation-delay:-2.2s} @keyframes mtFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(8deg)}} .cs-mp{display:flex;align-items:center;gap:9px;flex:1;min-width:0;max-width:240px;padding:10px 12px;border:1.5px solid #c8eeea;border-radius:20px;background:rgba(255,255,255,.9);text-align:right;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s} .cs-mp.is-turn{border-color:#f0c93a;background:#fffbe0;box-shadow:0 0 0 3px rgba(243,223,106,.4),0 10px 20px rgba(240,201,58,.25);transform:translateY(-2px)} .cs-mp-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#3fd0c6,#168f91);color:#fff;font-size:17px;font-weight:900;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)} .cs-mp.is-b .cs-mp-av{background:linear-gradient(145deg,#ff8fb3,#f0527f)} .cs-mp-info{display:grid;gap:3px;min-width:0;flex:1} .cs-mp-info b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2f6663;font-size:12px} .cs-mp-pips{display:flex;gap:4px} .cs-mp-pips i{width:10px;height:10px;border-radius:50%;background:#d6efec;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)} .cs-mp-pips i.on{background:#ffc928;box-shadow:0 0 0 2px #fff1a8} .cs-mp-info small{color:#6a928d;font-size:9.5px} .cs-mp strong{min-width:22px;color:#1f7f83;font-size:28px;font-weight:900;line-height:1;text-align:center} .cs-match-progress{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;margin:14px auto 0;color:#347e7b;font-size:11px;font-weight:800} .cs-match-progress[hidden]{display:none} .cs-mpg{display:flex;gap:3px;direction:ltr} .cs-mpg i{font-style:normal;font-size:15px;line-height:1;color:#c7e6e2;transition:color .3s,transform .3s} .cs-mpg i.on{color:#ff5d8f;animation:mcPop .5s} .cs-match-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px;max-width:420px;margin:14px auto 14px;padding:16px 14px 20px;border:1.5px solid #bfece6;border-radius:28px;direction:ltr;background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(207,255,247,.75));box-shadow:inset 0 2px 0 #fff,0 16px 34px rgba(31,127,131,.15)} .mcard{position:relative;display:block;min-width:0;aspect-ratio:4/5;margin:0;padding:0;border:0;background:none;font:inherit;cursor:pointer;perspective:700px;-webkit-tap-highlight-color:transparent} .mcard:disabled{cursor:default;opacity:1} .mcard:focus-visible{outline:3px solid #f0c93a;outline-offset:3px;border-radius:14px} .mc-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.3,.5,1)} .mcard.is-open .mc-inner,.mcard.is-matched .mc-inner{transform:rotateY(180deg)} .mcard:not(.is-open):not(:disabled):hover .mc-inner{transform:translateY(-3px) rotate(-1.5deg)} .mcard:not(.is-open):not(:disabled):active .mc-inner{transform:scale(.94)} .mc-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden} .mc-back{border:2.5px solid #fff;background:repeating-linear-gradient(45deg,rgba(255,255,255,.15) 0 6px,transparent 6px 12px),linear-gradient(150deg,#3fd0c6,#17898f);box-shadow:0 5px 0 #0f6f74,0 10px 16px rgba(15,111,116,.25)} .mc-back::after{content:"♥";color:#fff3a0;font-size:clamp(18px,5.4vw,26px);text-shadow:0 2px 0 rgba(0,0,0,.15)} .mc-front{transform:rotateY(180deg);border:2.5px solid #ffe26b;background:linear-gradient(160deg,#fffef2,#fff3b0);box-shadow:0 5px 0 #e6c43a,0 10px 16px rgba(180,140,20,.2);font-size:clamp(26px,8.4vw,40px)} .mcard.is-matched .mc-front{border-color:#6fd19a;background:linear-gradient(160deg,#f2fff6,#c9f6d7);box-shadow:0 0 0 3px rgba(111,209,154,.3),0 5px 0 #4bb27a;animation:mcPop .6s .35s both} .mcard.is-matched .mc-front::after{content:"✦";position:absolute;top:3px;left:6px;color:#ffc928;font-size:11px;animation:mlSpark 2.4s ease-in-out infinite} .mcard.is-miss .mc-inner{animation:mcShake .55s} .cs-match-board.is-wait .mcard:not(.is-open) .mc-back{filter:saturate(.75) brightness(1.05)} .cs-match-board.is-idle .mc-back{filter:saturate(.8)} .cs-match-board.is-deal .mcard{animation:mcDeal .5s both;animation-delay:calc(var(--i)*35ms)} @keyframes mcDeal{from{opacity:0;transform:translateY(-16px) scale(.8)}to{opacity:1;transform:none}} @keyframes mcPop{0%{transform:rotateY(180deg) scale(1)}45%{transform:rotateY(180deg) scale(1.14)}100%{transform:rotateY(180deg) scale(1)}} .cs-mpg i.on{animation-name:mcPopFlat} @keyframes mcPopFlat{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1)}} @keyframes mcShake{0%,100%{transform:rotateY(180deg)}20%{transform:rotateY(180deg) translateX(-6px)}40%{transform:rotateY(180deg) translateX(6px)}60%{transform:rotateY(180deg) translateX(-4px)}80%{transform:rotateY(180deg) translateX(3px)}} .cs-match-view .cs-xo-turn{display:block;width:fit-content;max-width:92%;min-height:0;margin:4px auto 0;padding:9px 20px;border:1.5px solid #c8eeea;border-radius:999px;background:#fff;box-shadow:0 6px 14px rgba(31,127,131,.1)} .cs-match-view .cs-xo-turn.is-mine{border-color:#f0c93a;background:linear-gradient(135deg,#fff7a8,#ffe35c);color:#6b4b00!important;animation:mtPulse 1.6s ease-in-out infinite} @keyframes mtPulse{0%,100%{box-shadow:0 6px 14px rgba(240,201,58,.25)}50%{box-shadow:0 0 0 6px rgba(240,201,58,.22),0 8px 18px rgba(240,201,58,.35)}} .cs-match-rules{display:grid;gap:7px;max-width:420px;margin:16px auto 10px;padding:0;list-style:none} .cs-match-rules li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #c8eeea;border-radius:14px;background:rgba(255,255,255,.75);color:#3d7773;font-size:11.5px;line-height:1.7;text-align:right} .cs-match-rules li b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,#fff28b,#ffd84a);color:#6b4b00;font-size:12px} @media(max-width:420px){.cs-match-board{gap:10px 8px;padding:12px 10px 16px;border-radius:22px}.mc-face{border-radius:11px}.cs-mp{padding:8px 9px;gap:7px}.cs-mp-av{width:34px;height:34px;font-size:15px}.cs-mp strong{font-size:23px}} @media(prefers-reduced-motion:reduce){.mc-inner{transition:none}.cs-match-board.is-deal .mcard,.mcard.is-miss .mc-inner,.cs-match-view .cs-xo-hero::before,.cs-match-view .cs-xo-hero::after,.cs-match-view .cs-xo-turn.is-mine,.mcard.is-matched .mc-front{animation:none}} /* لوگوی بسکتبال */ .cs-cover-basket{gap:4px} .cs-cover-basket .cs-bb-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-basket .bbl-board{fill:#fff;stroke:#1f7f83;stroke-width:2.4} .cs-cover-basket .bbl-square{fill:none;stroke:#ff5d8f;stroke-width:2} .cs-cover-basket .bbl-net{fill:none;stroke:#1f7f83;stroke-width:1.5;stroke-linecap:round;opacity:.75} .cs-cover-basket .bbl-rim{fill:none;stroke:#ff8a1f;stroke-width:3.2} .cs-cover-basket .bbl-ball-body{fill:#ff9a3d;stroke:#b4510d;stroke-width:1.6} .cs-cover-basket .bbl-seam{fill:none;stroke:#8a3d0a;stroke-width:1.3;stroke-linecap:round} .cs-cover-basket .bbl-ball{transform-box:fill-box;animation:bbLogoBall 3s ease-in-out infinite} .cs-cover-basket small{position:static!important;font-size:9px} @keyframes bbLogoBall{0%{transform:translate(0,-6px);opacity:0}12%{opacity:1}35%{transform:translate(0,0)}58%{transform:translate(0,15px)}72%,100%{transform:translate(0,22px);opacity:0}} @media(prefers-reduced-motion:reduce){.cs-cover-basket .bbl-ball{animation:none;transform:translate(0,4px)}} /* توضیحات بسکتبال */ .cs-bball-note{display:flex;flex-direction:column;gap:4px;max-width:420px;text-align:right;line-height:1.8;font-size:11px} .cs-bball-note b{display:block;margin-bottom:2px;text-align:center;color:#2f7f80;font-size:12.5px} .cs-bball-note span{display:block;position:relative;padding-right:14px} .cs-bball-note span::before{content:"●";position:absolute;right:0;top:.1em;font-size:7px;color:#ff8a1f} /* ─── لوگوی دیسک‌او ─── */ .cs-cover-disco .cs-disco-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.2))} .cs-cover-disco .dcl-r4{fill:#3a2466;stroke:#fff;stroke-opacity:.45;stroke-width:1.5} .cs-cover-disco .dcl-r3{fill:#4b2d85;stroke:#fff;stroke-opacity:.4;stroke-width:1.5} .cs-cover-disco .dcl-r2{fill:#6a3aa8;stroke:#fff;stroke-opacity:.4;stroke-width:1.5} .cs-cover-disco .dcl-r1{fill:#f7c948} .cs-cover-disco .dcl-trail path{fill:none;stroke:#f2679a;stroke-opacity:.55;stroke-width:3;stroke-linecap:round;animation:dclTrail 2.8s ease-in-out infinite} .cs-cover-disco .dcl-puck{transform-box:fill-box;transform-origin:center;animation:dclSlide 2.8s ease-in-out infinite} .cs-cover-disco .dcl-pk-a{fill:#f2679a;stroke:#fff;stroke-width:2} .cs-cover-disco .dcl-pk-in{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:1.4} .cs-cover-disco .dcl-puck-b{fill:#2f9fd8;stroke:#fff;stroke-width:2} .cs-cover-disco small{position:static!important;font-size:9px} @keyframes dclSlide{0%{transform:translate(-20px,22px);opacity:0}15%{opacity:1}55%,100%{transform:translate(0,0);opacity:1}} @keyframes dclTrail{0%{opacity:0}20%{opacity:1}60%,100%{opacity:0}} @media(prefers-reduced-motion:reduce){.cs-cover-disco .dcl-puck,.cs-cover-disco .dcl-trail path{animation:none}} /* ─── لوگوی کارت نقطه و خط ─── */ .cs-cover-dots .cs-dnb-logo{display:block;width:min(60px,78%);height:auto;overflow:visible;filter:drop-shadow(0 2px 3px rgba(20,100,100,.18))} .cs-cover-dots .dbl-box{transform-box:fill-box;transform-origin:center;fill:rgba(242,103,154,.28);opacity:0;animation:dblBox 4s ease-in-out infinite} .cs-cover-dots .dbl-heart{fill:#f2679a;opacity:0;transform-box:fill-box;transform-origin:center;animation:dblBox 4s ease-in-out infinite} .cs-cover-dots .dbl-l{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:dblLine 4s ease-in-out infinite} .cs-cover-dots .dbl-l1,.cs-cover-dots .dbl-l3,.cs-cover-dots .dbl-l5{stroke:#f2679a} .cs-cover-dots .dbl-l2,.cs-cover-dots .dbl-l4,.cs-cover-dots .dbl-l6{stroke:#1f2d6b} .cs-cover-dots .dbl-l1{animation-delay:0s}.cs-cover-dots .dbl-l2{animation-delay:.25s}.cs-cover-dots .dbl-l3{animation-delay:.5s}.cs-cover-dots .dbl-l4{animation-delay:.75s} .cs-cover-dots .dbl-l5{animation-delay:1.3s}.cs-cover-dots .dbl-l6{animation-delay:1.55s} .cs-cover-dots .dbl-dots circle{fill:#2f8f8c;stroke:#fff;stroke-width:1.2} .cs-cover-dots small{position:static!important;font-size:9px} @keyframes dblLine{0%,4%{stroke-dashoffset:20;opacity:1}16%,84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:20;opacity:0}} @keyframes dblBox{0%,22%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1.12)}38%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}} @media(prefers-reduced-motion:reduce){.cs-cover-dots .dbl-l{animation:none;stroke-dashoffset:0}.cs-cover-dots .dbl-box,.cs-cover-dots .dbl-heart{animation:none;opacity:1}} #csDnbSound{min-width:118px} /* قفل ۲۴ ساعته‌ی بازی‌های ویژه — صفحه‌ی شیشه‌ای روی کارت */ .cs-game-card.is-locked{cursor:pointer} .cs-game-card.is-locked>:not(.cs-game-lock){filter:blur(2.5px) saturate(.6);opacity:.75;pointer-events:none} .cs-game-lock{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;border-radius:inherit;color:#fff; background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(10,45,52,.42));-webkit-backdrop-filter:blur(8px) saturate(1.35);backdrop-filter:blur(8px) saturate(1.35); border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 26px rgba(255,255,255,.18);text-shadow:0 1px 6px rgba(0,30,40,.55)} .cs-lock-ico{font-size:22px;line-height:1} .cs-lock-note{font-size:10px;font-weight:700;opacity:.92} .cs-lock-time{font-size:19px;font-weight:900;line-height:1.1;letter-spacing:.5px;direction:ltr;font-variant-numeric:tabular-nums} .cs-lock-cta{margin-top:3px;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:800;color:#5b3300;text-shadow:none;background:linear-gradient(135deg,#ffe08a,#ffb347);box-shadow:0 3px 10px rgba(255,170,60,.45)} @media(max-width:480px){.cs-lock-ico{font-size:18px}.cs-lock-time{font-size:16px}.cs-lock-cta{font-size:9px;padding:4px 8px}} /* ===================================================================== بازی‌ها — رفع باگ لایه‌ی شیشه‌ای قفل + سبک‌سازی برای موبایل ===================================================================== */ /* لایه‌ی شیشه‌ای قفل فقط داخل خود کارت می‌ماند و هنگام اسکرول هرگز روی هدر/بالای صفحه نمی‌آید */ .cs-game-card{isolation:isolate;contain:paint} .cs-game-lock{z-index:1} .cq-head{z-index:30} /* روی گوشی backdrop-filter کلاً خاموش است؛ پس شیشه را با پس‌زمینه‌ی کمی مات‌تر شبیه‌سازی می‌کنیم */ @media(max-width:900px),(pointer:coarse){ .cs-game-lock{background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(10,45,52,.62))} /* blur روی ۱۴ کارت هنگام اسکرول گوشی را قفل می‌کرد */ .cs-game-card.is-locked>:not(.cs-game-lock){filter:none;opacity:.55} /* سایه‌ی غول‌پیکر پوسته‌ی بازی‌ها در هر فریم اسکرول دوباره رسم می‌شد */ .cq-shell{box-shadow:none;-webkit-overflow-scrolling:touch} /* لوگوی کارت‌ها روی گوشی هم متحرک می‌ماند؛ فقط وقتی کارت از صفحه بیرون است متوقف می‌شود (کلاس is-offscreen) */ .cs-game-card .cs-game-cover{transform:translateZ(0)} } /* ===================================================================== حال من / چرخه — رفع بریدگی پایین کادر روی گوشی کادر ستونی (flex) می‌شود؛ هدر و تب‌ها ثابت و فقط بخش محتوا اسکرول می‌خورد، پس متن‌های پایین هرگز زیر لبه‌ی کادر یا نوار آدرس نمی‌مانند. ===================================================================== */ .policy-modal .mood-box{display:flex;flex-direction:column;max-height:min(92vh,900px)!important;max-height:min(92dvh,900px)!important} .policy-modal .mood-box>.policy-head,.policy-modal .mood-box>.mood-tabs{flex:0 0 auto} .policy-modal .mood-box .policy-scroll.mood-scroll{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))} @media(max-width:700px){ #moodModal.policy-modal{padding:max(10px,env(safe-area-inset-top,0px)) 8px max(10px,env(safe-area-inset-bottom,0px))} .policy-modal .mood-box{max-height:calc(100vh - 20px)!important;max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px))!important;border-radius:22px} .policy-modal .mood-box .policy-head p{display:none} } .policy-modal .mood-box .policy-scroll.cycle-scroll{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))!important} .policy-modal .mood-box .policy-scroll.cycle-scroll[hidden],.policy-modal .mood-box .policy-scroll.mood-scroll[hidden]{display:none!important} #cycleTabPanel.cycle-view-male .cpc-ring-wrap{touch-action:pan-y} /* ===================================================================== گوشی: بخش بازی‌ها و نمای حمایتی — از هر جای صفحه باید بشود بالا/پایین اسکرول کرد کادرها تمام‌صفحه می‌شوند (حاشیه‌ی بی‌اسکرول حذف) و لمسِ عمودی در همه‌ی اجزا پذیرفته می‌شود. بوم‌های خودِ بازی (canvas) دست‌نخورده می‌مانند تا کشیدن در بازی کار کند. ===================================================================== */ @media(max-width:900px),(pointer:coarse){ .cq-overlay{padding:0!important;align-items:stretch!important;touch-action:pan-y} .cq-shell{width:100%!important;max-width:none!important;height:100vh;height:100dvh;max-height:100vh!important;max-height:100dvh!important;border-radius:0!important;border-left:0;border-right:0;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:env(safe-area-inset-bottom,0px)} .cq-shell *:not(canvas):not(input):not(textarea):not(select){touch-action:pan-y} .cq-shell canvas{touch-action:none} .cs-game-card,.cs-games-grid,.cs-special-section{touch-action:pan-y} #moodModal.policy-modal{padding:0!important;align-items:stretch!important} #moodModal .policy-back{touch-action:pan-y} .policy-modal .mood-box{width:100%!important;max-width:none!important;height:100vh;height:100dvh;max-height:100vh!important;max-height:100dvh!important;border-radius:0!important;border-left:0;border-right:0} #moodModal *{touch-action:pan-y} #moodModal button,#moodModal a{touch-action:manipulation} #cycleTabPanel,#cycleTabPanel *{touch-action:pan-y} #cycleTabPanel button{touch-action:manipulation} } /* feature slides that open their section when clicked */ .cp-feature-link{cursor:pointer;-webkit-tap-highlight-color:transparent} .cp-feature-link:focus-visible{outline:2px solid rgba(255,215,0,.55);outline-offset:-3px} .cp-feature-link .cp-feature-copy small:after{content:" · باز کردن بخش ‹";color:#ffd28f} /* Mood "save": no dark frame behind the button (the button itself stays opaque so chips don't show through) */ .mood-actions{background:none!important;box-shadow:none!important;border:0!important;pointer-events:none} .mood-actions>*{pointer-events:auto} .mood-save-btn:disabled{opacity:1!important;filter:saturate(.55) brightness(.62)} /* floating notification for a letter / time capsule from the partner */ .cp-letter-toast{position:fixed;top:max(14px,env(safe-area-inset-top,0px));left:50%;z-index:100000;width:min(420px,calc(100% - 20px));transform:translate(-50%,-140%);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.2,.9,.3,1.1),opacity .3s ease;direction:rtl} .cp-letter-toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto} .cp-letter-toast .cp-lt-body{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:20px;cursor:pointer;color:#fff;background:linear-gradient(135deg,rgba(60,24,18,.97),rgba(30,10,14,.97));border:1px solid rgba(255,215,0,.28);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 4px rgba(232,131,74,.08)} .cp-letter-toast .cp-lt-ico{font-size:26px;flex:0 0 auto} .cp-letter-toast b{display:block;font-size:13px;font-weight:800;margin-bottom:3px} .cp-letter-toast small{display:block;font-size:11px;line-height:1.6;color:#e0cbbf} .cp-letter-toast .cp-lt-x{position:absolute;top:-8px;left:-6px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,215,0,.3);background:#2a0f12;color:#fff;font-size:15px;line-height:1;cursor:pointer;z-index:2} /* ===== گل خیس: نوار ابزار (برگشت/جلو، اندازه‌ی قلم) و نشانگر زنده ===== */ .cp-drawing-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 9px 9px} .cp-tool-group{display:flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,218,166,.10)} .cp-tool-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,218,166,.12);background:rgba(255,255,255,.05);color:#e8cdb2;font-family:inherit;font-size:19px;font-weight:900;line-height:1;cursor:pointer;touch-action:manipulation;transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease} .cp-tool-btn:hover:not(:disabled){background:rgba(255,214,150,.10);color:#ffe0aa;transform:translateY(-1px)} .cp-tool-btn:active:not(:disabled){transform:scale(.94)} .cp-tool-btn:disabled{opacity:.32;cursor:default} .cp-size-preview{width:34px;height:34px;display:grid;place-items:center} .cp-size-preview i{display:block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#8b6a52,#2a1a12 72%);box-shadow:0 0 0 1px rgba(255,226,186,.28);transition:width .15s ease,height .15s ease} .cp-live{margin-inline-start:auto;display:flex;align-items:center;gap:6px;color:#cdb29f;font-size:10px;font-weight:800} .cp-live i{width:7px;height:7px;border-radius:50%;background:#8a7a6c} .cp-live.on i{background:#7fe0a0;box-shadow:0 0 8px rgba(127,224,160,.65)} .cp-live.busy{color:#ffe0aa} .cp-live.busy i{animation:cpLivePulse .9s ease-in-out infinite} @keyframes cpLivePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}} @media(max-width:640px){.cp-drawing-tools{padding:0 6px 7px;gap:6px}.cp-tool-btn,.cp-size-preview{width:32px;height:32px}.cp-live{font-size:9px}} /* ردِ دستِ پارتنر روی گل */ /* ─── بنر درون‌برنامه‌ای دعوت فیلم (مثل بنر بازی‌ها، بدون نوتیف مرورگر) ─── */ .cp-movie-banner{ position:fixed; top:max(12px, env(safe-area-inset-top, 0px)); left:50%; z-index:100000; width:min(460px, calc(100% - 20px)); transform:translate(-50%, -120%); opacity:0; pointer-events:none; transition:transform .4s cubic-bezier(.2,.9,.3,1.05), opacity .3s ease; direction:rtl; } .cp-movie-banner.show{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; } .cp-movie-banner .cp-mvb-inner{ display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border-radius:18px; color:#fff; cursor:pointer; background:linear-gradient(125deg, #2a101c 0%, #1a0c14 55%, #241018 100%); border:1px solid rgba(255,120,160,.35); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 3px rgba(255,70,120,.1), 0 0 28px rgba(255,60,100,.12); } .cp-movie-banner .cp-mvb-ico{ font-size:26px; flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(255,80,120,.4)); } .cp-movie-banner .cp-mvb-copy{flex:1;min-width:0} .cp-movie-banner .cp-mvb-copy b{ display:block; font-size:13.5px; font-weight:800; margin-bottom:3px; letter-spacing:-.01em; } .cp-movie-banner .cp-mvb-copy small{ display:block; font-size:11.5px; line-height:1.55; color:#f0c8d4; } .cp-movie-banner .cp-mvb-join{ flex:0 0 auto; border:0; border-radius:999px; padding:9px 14px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; color:#1a0a12; background:linear-gradient(135deg, #ff6b9d, #ffd166); box-shadow:0 6px 16px rgba(255,80,120,.35); white-space:nowrap; transition:transform .2s, filter .2s; } .cp-movie-banner .cp-mvb-join:hover{filter:brightness(1.08);transform:scale(1.04)} .cp-movie-banner .cp-mvb-x{ flex:0 0 auto; width:28px;height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; font-size:16px; line-height:1; cursor:pointer; } .cp-movie-banner .cp-mvb-x:hover{background:rgba(255,255,255,.12)} @media(max-width:480px){ .cp-movie-banner .cp-mvb-join{padding:8px 11px;font-size:11.5px} .cp-movie-banner .cp-mvb-ico{font-size:22px} .cp-movie-banner .cp-mvb-inner{gap:8px;padding:10px} } /* ---- QR Code آیدی (تنظیمات دنیای ما) ---- */ .settings-id-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px} .settings-id-actions .settings-share-id{margin-top:0} .qr-overlay{position:fixed;inset:0;z-index:620;display:grid;place-items:center;padding:16px;background:rgba(9,4,5,.82);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease} .qr-overlay.show{opacity:1;visibility:visible;pointer-events:auto} .qr-card{position:relative;width:min(360px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:26px 22px 20px;border-radius:24px;text-align:center;color:#ffe9cf;font-family:Estedad,Vazirmatn,Tahoma,sans-serif;background:linear-gradient(150deg,#7a3210 0%,#3b160c 55%,#150818 100%);border:1px solid rgba(255,215,0,.28);box-shadow:0 30px 80px rgba(0,0,0,.55)} .qr-card h3{margin:0 0 6px;font-size:16px} .qr-card p{margin:0 0 14px;font-size:10.5px;line-height:1.9;color:#e8cfc1} .qr-close{position:absolute;top:10px;left:12px;width:30px;height:30px;border:0;border-radius:50%;background:#ffffff14;color:#ffe9cf;font-size:20px;line-height:1;cursor:pointer} .qr-frame{display:inline-block;padding:10px;border-radius:18px;background:#fff8ee;box-shadow:0 10px 30px rgba(0,0,0,.35)} .qr-frame canvas{display:block;width:min(240px,62vw);height:auto;aspect-ratio:1;image-rendering:pixelated} .qr-id{margin:12px 0 14px;font:700 12px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:#ffd9ad} .qr-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .qr-actions button{flex:1 1 auto;padding:9px 12px;border:1px solid #ffd28f40;border-radius:12px;background:#e8834a1c;color:#ffe2bd;font:700 10.5px Estedad,Vazirmatn,Tahoma,sans-serif;cursor:pointer;transition:.2s} .qr-actions button:hover{background:#e8834a33;border-color:#e8834a88} .qr-note{min-height:18px;margin-top:10px;font-size:10.5px;color:#ffd9ad} /* ---- تاریخ تولد شمسی (چرخ‌های اسکرولی) + روزشمار ---- */ .settings-fields label:nth-child(2){grid-column:1/-1} .birth-field{grid-column:1/-1;display:flex;flex-direction:column;gap:10px} .birth-field .birth-head{display:flex;align-items:center;gap:8px;font-size:10px;color:#e8cfc1} .birth-field .birth-head em{font-style:normal;font-size:8.5px;padding:2px 7px;border-radius:99px;background:#e8834a22;color:#ffd9ad} .birth-field .birth-clear{margin-right:auto;border:0;background:none;color:#c9a690;font:600 9px Estedad,Vazirmatn,Tahoma,sans-serif;cursor:pointer;text-decoration:underline} .birth-wheels{display:flex;flex-direction:column;gap:2px;padding:8px 10px 6px;border:1px solid #ffd28f26;border-radius:16px;background:#ffffff08} .birth-labels,.birth-lists{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:8px} .birth-labels small{text-align:center;font-size:8.5px;color:#917c72} .birth-lists{position:relative} .birth-list{position:relative;z-index:1;width:100%;height:calc(36px * 5);overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:none;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)} .birth-list::-webkit-scrollbar{display:none} .birth-list:focus-visible{box-shadow:0 0 0 2px #e8834a77;border-radius:10px} .birth-pad{display:block;height:calc(36px * 2);scroll-snap-align:none} .birth-item{height:36px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font:600 13px Estedad,Vazirmatn,Tahoma,sans-serif;color:#917c72;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s,font-size .15s} .birth-item.on{color:#ffe2bd;font-weight:800;font-size:15px} .birth-band{position:absolute;left:0;right:0;top:calc(50% - 18px);height:36px;border-radius:11px;border:1px solid #e8834a66;background:#e8834a14;pointer-events:none;z-index:0} .birth-counter{padding:10px 13px;border-radius:13px;background:linear-gradient(135deg,#e8834a14,#ffd28f0a);border:1px solid #ffd28f26;font-size:10.5px;color:#e8cfc1;line-height:1.9} .birth-counter b{font-size:15px;color:#ffd9ad;font-weight:800} .birth-counter.bad{color:#ff9d8a;border-color:#ff9d8a55} /* ---- تولد ---- */ .mini-occasion.has-birthday{align-items:flex-start;background:linear-gradient(135deg,rgba(255,215,106,.2),rgba(255,122,156,.14));border-color:rgba(255,215,106,.4)} .mini-occasion-lines{display:flex;flex-direction:column;gap:2px;min-width:0} .mini-occasion .mini-bday{color:#fff0c9} .bday-party{position:fixed;inset:0;z-index:9000;display:grid;place-items:start center;padding:max(64px,12vh) 16px 16px;background:rgba(9,4,5,.35);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease} .bday-party.show{opacity:1;visibility:visible} .bday-canvas{position:fixed;inset:0;pointer-events:none} .bday-card{position:relative;width:min(340px,100%);padding:26px 22px 22px;border-radius:24px;direction:rtl;text-align:center;color:#ffe9cf;font-family:Estedad,Vazirmatn,Tahoma,sans-serif;background:linear-gradient(150deg,#7a3210 0%,#3b160c 55%,#150818 100%);border:1px solid rgba(255,215,0,.4);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(255,176,84,.25);transform:translateY(-24px) scale(.92);transition:transform .5s cubic-bezier(.2,1.3,.3,1)} .bday-party.show .bday-card{transform:none} .bday-card h3{margin:6px 0 8px;font-size:17px;line-height:1.7} .bday-card p{margin:0;font-size:11px;line-height:2;color:#f0d6c4} .bday-card p b{font-size:15px;color:#ffd9ad} .bday-cake{font-size:46px;line-height:1;animation:bdayBounce 1.4s ease-in-out infinite} .bday-close{position:absolute;top:10px;left:12px;width:30px;height:30px;border:0;border-radius:50%;background:#ffffff14;color:#ffe9cf;font-size:20px;line-height:1;cursor:pointer} @keyframes bdayBounce{50%{transform:translateY(-6px) rotate(-6deg)}} @media(prefers-reduced-motion:reduce){.bday-cake{animation:none}} /* ---- ماه‌گرد ---- */ .mon-card{border-color:rgba(255,122,156,.5);background:linear-gradient(150deg,#6b1d3a 0%,#3a1030 55%,#150818 100%);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 70px rgba(255,90,140,.3)} .mon-hearts{animation:monBeat 1.1s ease-in-out infinite} .mini-occasion .mini-bday small{font-size:inherit;opacity:.85;font-weight:600} @keyframes monBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}} @media(prefers-reduced-motion:reduce){.mon-hearts{animation:none}} /* ---- سالگرد (جشن بزرگ طلایی) ---- */ .ann-party{background:radial-gradient(ellipse at 50% 30%,rgba(90,40,10,.55),rgba(6,2,10,.9) 70%)} .ann-stars{position:fixed;inset:0;pointer-events:none} .ann-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff3c4;box-shadow:0 0 8px 2px rgba(255,215,106,.8);animation:annTwinkle 2.4s ease-in-out infinite} .ann-card{width:min(360px,100%);padding:30px 22px 24px;border:1px solid rgba(255,215,106,.7);background:linear-gradient(160deg,#4a1a2a 0%,#2b0f26 50%,#120a1c 100%);box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 90px rgba(255,200,90,.35),inset 0 0 40px rgba(255,215,106,.08)} .ann-crown{font-size:30px;line-height:1;margin-bottom:-14px;position:relative;z-index:2;filter:drop-shadow(0 4px 10px rgba(255,200,90,.6));animation:bdayBounce 2s ease-in-out infinite} .ann-medal{position:relative;width:118px;height:118px;margin:0 auto 12px;border-radius:50%;display:grid;place-content:center;color:#3a1a08;font-family:Estedad,Vazirmatn,Tahoma,sans-serif;background:radial-gradient(circle at 35% 30%,#fff6cf,#ffd76a 55%,#d99a2b);box-shadow:0 0 40px rgba(255,200,90,.65),inset 0 -6px 14px rgba(150,80,10,.35)} .ann-medal::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from 0deg,#ffd76a,#ff7a9c,#b78cff,#6fd3ff,#ffd76a);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:annSpin 5s linear infinite} .ann-medal span{font-size:48px;font-weight:900;line-height:1} .ann-medal small{font-size:12px;font-weight:800;letter-spacing:.1em} .ann-title{margin:6px 0 8px;font-size:20px;line-height:1.6;background:linear-gradient(90deg,#ffd76a,#fff6cf,#ff9ec0,#ffd76a);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:annShine 3.2s linear infinite} .ann-sub{margin:0 0 6px!important;font-size:12px!important;color:#ffe9cf!important} .ann-sub b{font-size:16px!important;color:#ffd76a!important} .ann-note{margin:0!important;font-size:10.5px!important;color:#e8cfc1!important} @keyframes annSpin{to{transform:rotate(360deg)}} @keyframes annShine{to{background-position:-250% 0}} @keyframes annTwinkle{50%{opacity:.15}} @media(prefers-reduced-motion:reduce){.ann-medal::before,.ann-title,.ann-stars i,.ann-crown{animation:none}} /* پاپ‌آپ خوش‌آمد: دکمهٔ بستن سمت راست است (RTL)؛ متن بالای کارت زیرش نره */ .welcome-popup .popup-topline{padding-left:0!important;padding-right:60px!important;min-height:40px;flex-wrap:wrap;row-gap:4px} @media(max-width:520px){.welcome-popup .popup-topline{padding-left:0!important;padding-right:56px!important}} /* Fix: terms/privacy modal box must fit the screen (no cut-off bottom) */ .policy-modal .policy-box:not(.mood-box){display:flex!important;flex-direction:column;max-height:calc(100vh - 36px)!important;max-height:calc(100dvh - 36px)!important;overflow:hidden} .policy-modal .policy-box:not(.mood-box)>.policy-head{flex:0 0 auto} .policy-modal .policy-box:not(.mood-box)>.policy-scroll{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))} .policy-scroll>.policy-note{margin-bottom:6px} @media(max-width:560px){.policy-modal:not(#moodModal){padding:max(10px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))}.policy-modal .policy-box:not(.mood-box){max-height:calc(100vh - 20px)!important;max-height:calc(100dvh - 20px)!important}} /* devices list */ .privacy-device{display:flex;align-items:center;gap:12px} .privacy-device .device-copy{flex:1;min-width:0} .privacy-device .device-copy span{display:block;overflow-wrap:anywhere;direction:ltr;text-align:right} .privacy-device.is-current{border-color:rgba(255,215,0,.3)} .privacy-device .device-current{font-style:normal;font-size:11px;color:#ffd36b;white-space:nowrap} .privacy-device .device-kick{flex:0 0 auto;border:1px solid rgba(255,120,120,.4);background:rgba(255,80,80,.1);color:#ff9d9d;border-radius:12px;padding:8px 12px;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap} .privacy-device .device-kick:disabled{opacity:.5} .devices-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} /* Tapped/selected nav item looks exactly like the others (no extra ring/glow/underline) */ .couplina-header .main-nav .nav-link.nav-png-only.active, .couplina-header .main-nav .nav-link.nav-png-only:focus, .couplina-header .main-nav .nav-link.nav-png-only:active{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transform:none!important;outline:none!important} .couplina-header .main-nav .nav-link.nav-png-only.active::before, .couplina-header .main-nav .nav-link.nav-png-only:active::before{ filter:none; box-shadow:inset -9px -8px 13px rgba(38,5,4,.62),inset 5px 4px 10px rgba(255,235,220,.32),0 0 0 1px rgba(255,130,94,.70),0 7px 16px rgba(0,0,0,.62),0 0 22px rgba(255,72,39,.28)} .couplina-header .main-nav .nav-link.nav-png-only.active::after, .couplina-header .main-nav .nav-link.nav-png-only:active::after{ width:58px;height:58px;border-color:rgba(255,120,91,.20);box-shadow:inset 0 0 13px rgba(255,116,88,.08),0 0 12px rgba(255,75,43,.08)} .couplina-header .main-nav .nav-png-only.active>img{transform:none!important} @media(max-width:900px){.couplina-header .main-nav .nav-link.nav-png-only.active::after,.couplina-header .main-nav .nav-link.nav-png-only:active::after{width:51px;height:51px}} /* XO board: identical square cells on iOS Safari (buttons ignore grid/aspect-ratio quirks) */ .cs-xo-board{grid-auto-rows:auto;align-items:stretch} .cs-xo-cell{-webkit-appearance:none;appearance:none;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-width:0;min-height:0;padding:0;margin:0;overflow:hidden;aspect-ratio:1/1;font-size:0;line-height:0} .cs-xo-cell .xo-mark{display:block;width:58%;height:58%;pointer-events:none}