:root{
--bg-top: radial-gradient(1200px 420px at 20% -10%, rgba(144,108,255,.35) 0%, rgba(40,18,86,.15) 45%, rgba(10,4,24,0) 90%);
--bg-body:
radial-gradient(900px 560px at 80% 0%, rgba(34,16,72,.65) 0%, rgba(12,6,24,0) 70%),
radial-gradient(700px 420px at 10% 100%, rgba(28,12,58,.55) 0%, rgba(10,5,24,0) 70%),
linear-gradient(160deg, #090415 0%, #140a2a 40%, #23124a 72%, #0b0618 100%);
--bottom-glow: radial-gradient(900px 380px at 50% 120%, rgba(120,70,240,.55) 0%, rgba(10,4,24,0) 80%);
--panel-surface: radial-gradient(circle at 20% 0%, rgba(60,20,120,.6) 0%, rgba(15,5,30,.95) 70%);
--surface-border: rgba(255,255,255,.3);
--muted: rgba(255,255,255,.75);
--text: #fff;
--accentB:#7edbff;
--accentB-hover:#9ee5ff;
--gold:#ddb034;
--gold-hover:#f5c84a;
--navH:86px;
--safe-bottom: env(safe-area-inset-bottom,0px);
--safe-top: env(safe-area-inset-top,0px);
--stroke-strong: rgba(184,134,255,.5);
--shadow-sm: 0 2px 8px rgba(0,0,0,.3);
--shadow-md: 0 8px 24px rgba(0,0,0,.5);
--shadow-lg: 0 16px 48px rgba(0,0,0,.7);
--shadow-xl: 0 24px 64px rgba(0,0,0,.9);
--shadow-glow: 0 0 40px rgba(174,122,255,.6);
--shadow-glow-strong: 0 0 60px rgba(174,122,255,.8);
font-family:'Montserrat',system-ui,Segoe UI,Arial,sans-serif;
color-scheme:dark;
}
*{box-sizing:border-box;min-width:0;}
html,body{height:100%}
body{
margin:0;
background:var(--bg-body);
color:var(--text);
-webkit-font-smoothing:antialiased;
}
.app{
min-height:100dvh;
padding-bottom:calc(var(--navH) + var(--safe-bottom) + 10px);
padding-top:var(--safe-top);
position:relative;
display:flex;
flex-direction:column;
isolation:isolate;
color:#fff;
}
/* === Anti-banding overlay (сглаживание швов фонового градиента) === */
.app::noise{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
opacity:.06; /* силу можно менять 0.03–0.08 */
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:soft-light;
}
/* === gradient seam smoothing (overlay overrides) === */
body::before{
content:"";
position:fixed; inset:0; pointer-events:none; z-index:-1;
opacity:.045;
background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
repeating-linear-gradient(135deg, rgba(255,255,255,.008) 0 3px, transparent 3px 7px);
mix-blend-mode:soft-light;
}
.app::before{
background:
radial-gradient(1000px 420px at 20% -10%, rgba(144,108,255,.22) 0%, rgba(40,18,86,.08) 55%, rgba(10,4,24,0) 92%),
radial-gradient(1200px 600px at 50% 40%, rgba(40,18,86,.06) 0%, rgba(10,4,24,0) 70%);
}
.app::after{
position:fixed;
left:0; right:0; top:0; bottom:0;
height:auto !important; /* убираем фиксированную высоту, чтобы не было границы */
background:
radial-gradient(1400px 720px at 50% 120%, rgba(120,70,240,.34) 0%, rgba(120,70,240,.12) 45%, rgba(10,4,24,0) 88%),
linear-gradient(to bottom, rgba(10,4,24,0) 46%, rgba(10,4,24,.06) 50%, rgba(10,4,24,0) 54%);
filter:blur(20px);
}
/* мягчее верхнее/нижнее свечение, чтобы не было резкой границы */
.app::before{
background:radial-gradient(circle at 20% 0%, rgba(120,80,255,.28) 0%, rgba(10,4,24,0) 75%);
animation: bgFlow 8s ease-in-out infinite alternate;
}
.app::after{
background:radial-gradient(circle at 50% 100%, rgba(98,55,214,.55) 0%, rgba(10,4,24,0) 75%);
filter:blur(16px);
animation: bgFlow 10s ease-in-out infinite alternate-reverse;
}
@keyframes bgFlow {
0% { opacity: 0.8; transform: scale(1); }
100% { opacity: 1; transform: scale(1.05); }
}
/* ===== TOPBAR (compact minimal) ===== */
.topbar{
position:sticky;
top:0;
z-index:60;
width:100%;
max-width:1280px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
gap:clamp(8px, 2vw, 12px);
flex-wrap:nowrap;
background:rgba(15,6,32,.5);
backdrop-filter:blur(16px) saturate(150%);
-webkit-backdrop-filter:blur(16px) saturate(150%);
border-bottom:1px solid rgba(255,255,255,.12);
box-shadow:0 20px 40px rgba(0,0,0,.75),0 0 30px rgba(168,109,255,.4);
color:#fff;
transition:all .3s ease;
}
.brand{
display:flex;
align-items:center;
gap:8px;
min-width:0;
color:#fff;
align-self:center;
}
.logo{
width:32px;
height:32px;
border-radius:50%;
display:grid;
place-items:center;
font-family:'Teko',sans-serif;
font-size:20px;
line-height:1;
text-transform:uppercase;
color:#230438;
background:radial-gradient(circle at 30% 30%, #fff 0%, #a86dff 55%, #42108f 100%);
box-shadow:
0 0 20px rgba(174,122,255,.6),
inset 0 0 4px rgba(255,255,255,.4);
}
.brand-text{
min-width:0;
}
.brand-text .name{
font-family:'Teko',sans-serif;
font-size:clamp(16px,2.5vw,18px);
letter-spacing:.2em;
text-transform:uppercase;
white-space:nowrap;
color:#fff;
text-shadow:0 0 8px rgba(174,122,255,.6);
line-height:1.1;
}
.brand-text .sub{
font-size:9px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--muted);
line-height:1.2;
}
/* right side badges compact row */
.badges{
display:flex;
flex-direction:row;
align-items:center;
flex-wrap:nowrap;
justify-content:flex-end;
gap:6px;
color:#fff;
}
.chip{
position:relative;
min-width:max-content;
padding:clamp(6px, 1.5vw, 8px) clamp(10px, 2vw, 14px);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(20,8,44,.5);
border:1px solid rgba(160,120,255,.4);
box-shadow:
0 12px 28px rgba(0,0,0,.75),
0 0 24px rgba(160,120,255,.5),
inset 0 0 20px rgba(126,40,255,.3);
color:#fff;
font-size:10px;
line-height:1.15;
text-align:right;
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
transition:all .25s ease;
}
.chip:hover{
border-color:rgba(160,120,255,.6);
box-shadow:
0 14px 32px rgba(0,0,0,.8),
0 0 28px rgba(160,120,255,.6),
inset 0 0 22px rgba(126,40,255,.35);
transform:translateY(-1px);
}
.chip.ghost{
background:rgba(0,0,0,.25);
box-shadow:0 12px 24px rgba(0,0,0,.7);
}
.chip-top{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
gap:2px;
}
.chip-label{
font-size:clamp(7px, 1.75vw, 8px);
letter-spacing:.25em;
text-transform:uppercase;
color:var(--muted);
line-height:1.1;
}
.chip-value{
font-family:'Teko',sans-serif;
display:flex;
align-items:center;
gap:clamp(3px, 0.75vw, 4px);
color:#fff;
text-shadow:0 0 8px rgba(255,255,255,.5);
letter-spacing:.1em;
line-height:1;
}
.chip-balance .chip-value{
font-size:clamp(16px, 4vw, 20px);
}
.chip-left .chip-value{
font-size:clamp(14px, 3.5vw, 16px);
}
.chip-shards .chip-value{
font-size:clamp(16px, 4vw, 18px);
}
.chip .m{
display:inline-grid;
place-items:center;
min-width:18px;
height:18px;
padding:0 4px;
border-radius:999px;
background:radial-gradient(circle at 40% 30%, #fff 0%, #ffcc5a 45%, #9f6519 100%);
color:#2c1500;
font-weight:700;
font-size:11px;
line-height:1;
}
.chip .m.eye{
background:radial-gradient(circle at 40% 30%, #fff 0%, #ffaf5a 45%, #6d2a00 100%);
}
.chip .m.eye.smallpill{
font-size:10px;
font-weight:600;
min-width:auto;
padding:2px 5px;
height:auto;
line-height:1.1;
}
/* ===== SCREENS WRAP ===== */
.screens{
padding:clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px) clamp(80px, 20vw, 90px);
width:100%;
max-width:clamp(320px, 100%, 1280px);
margin:0 auto;
flex:1 1 auto;
display:block;
color:#fff;
box-sizing:border-box;
}
@media(min-width:768px){
.screens{
padding-left:clamp(20px, 5vw, 24px);
padding-right:clamp(20px, 5vw, 24px);
}
}
@media(max-width:480px){
.screens{
padding:clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 12px) clamp(75px, 18.75vw, 85px);
}
}
.screen{display:block;}
.hidden{display:none!important;}
.screen-title{
font-family:'Teko',sans-serif;
font-size:clamp(24px,6vw,32px);
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
margin:clamp(16px,4vw,24px) 0 clamp(12px,3vw,20px);
text-shadow:0 0 20px rgba(174,122,255,.6), 0 2px 8px rgba(0,0,0,.5);
color:#fff;
text-shadow:0 0 12px rgba(174,122,255,.4);
}
.muted{
color:var(--muted);
font-size:clamp(13px,3.2vw,16px);
line-height:1.5;
opacity:.85;
}
.section-title{
margin:clamp(20px,5vw,32px) 0 clamp(12px,3vw,20px);
font-weight:800;
text-transform:uppercase;
display:flex;
align-items:center;
gap:clamp(8px,2vw,12px);
color:#fff;
text-shadow:0 0 16px rgba(174,122,255,.6), 0 2px 6px rgba(0,0,0,.5);
font-size:clamp(18px,4.5vw,24px);
letter-spacing:.1em;
}
.section-title::after{
content:"";
height:1px;
flex:1;
background:linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,0));
}
/* ===== HORIZONTAL CAROUSEL (new) ===== */
.h-carousel{
position:relative;
width:100%;
overflow:hidden;
border-radius:clamp(16px, 4vw, 20px);
border:clamp(1px, 0.25vw, 1px) solid rgba(255,255,255,.15);
background:radial-gradient(circle at 20% 0%, rgba(40,20,70,.4) 0%, rgba(0,0,0,0) 70%);
box-shadow:
0 clamp(32px, 8vw, 40px) clamp(50px, 12.5vw, 60px) rgba(0,0,0,.8),
0 0 clamp(50px, 12.5vw, 60px) rgba(174,122,255,.4);
padding:clamp(12px, 3vw, 16px) 0;
isolation:isolate;
color:#fff;
min-height:clamp(220px, 55vw, 260px);
box-sizing:border-box;
}
.h-carousel::before,
.h-carousel::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:80px !important;
z-index:3;
pointer-events:none;
backdrop-filter:blur(18px) brightness(1.08) !important;
-webkit-backdrop-filter:blur(18px) brightness(1.08) !important;
}
.h-carousel::before{
left:0;
background:linear-gradient(90deg,
rgba(18,12,36,.75) 0%,
rgba(18,12,36,.28) 35%,
rgba(18,12,36,.08) 65%,
rgba(18,12,36,0) 100%) !important;
}
.h-carousel::after{
right:0;
background:linear-gradient(270deg,
rgba(18,12,36,.75) 0%,
rgba(18,12,36,.28) 35%,
rgba(18,12,36,.08) 65%,
rgba(18,12,36,0) 100%) !important;
}
.h-carousel .track{
position:absolute;
left:16px;
right:auto;
top:16px;
bottom:16px;
display:flex;
flex-direction:row;
align-items:flex-start;
gap:16px;
animation:hmarquee 40s linear infinite;
will-change:transform;
overflow:visible;
padding-right:96px !important;
}
.h-carousel.pause .track{
animation-play-state:paused;
}
@keyframes hmarquee{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
/* карточка внутри карусели */
.vcard{
flex:0 0 auto;
width:clamp(150px,40vw,200px);
color:#fff;
}
.vcard-card{
position:relative;
width:100%;
border-radius:16px;
background:rgba(15,15,30,.4);
border:1px solid rgba(255,255,255,.18);
box-shadow:
0 24px 40px rgba(0,0,0,.8),
0 0 40px rgba(160,120,255,.4);
height:clamp(220px,60vw,300px);
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
color:#fff;
}
.vcard-img{
position:absolute;
inset:0;
background:#1a1a2a center/cover no-repeat;
}
.vcard-foot{
position:relative;
padding:12px;
font-size:14px;
line-height:1.3;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 60%);
display:flex;
justify-content:space-between;
align-items:flex-end;
color:#fff;
text-shadow:0 0 8px rgba(0,0,0,.8);
}
.vcard-name{
word-break:break-word;
}
.vcard-x{
font-size:16px;
line-height:1;
opacity:.6;
}
.v-empty{
text-align:center;
font-size:13px;
padding:40px 16px;
}
/* ===== PACK LIST ===== */
.pack-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(clamp(200px, 50vw, 240px),1fr));
gap:clamp(12px, 3vw, 16px);
margin-top:clamp(8px, 2vw, 10px);
color:#fff;
width:100%;
box-sizing:border-box;
}
@media(min-width:768px){
.pack-grid{
grid-template-columns:repeat(auto-fit,minmax(clamp(240px, 60vw, 260px),1fr));
gap:clamp(16px, 4vw, 20px);
}
}
@media(max-width:480px){
.pack-grid{
grid-template-columns:1fr;
gap:clamp(10px, 2.5vw, 14px);
}
}
.pack-card{
position:relative;
padding:clamp(14px, 3.5vw, 20px);
border-radius:clamp(16px, 4vw, 20px);
background:linear-gradient(135deg, rgba(60,20,120,.7) 0%, rgba(15,5,30,.98) 100%);
border:clamp(1.5px, 0.4vw, 2px) solid rgba(255,255,255,.25);
display:grid;
gap:clamp(8px, 2vw, 14px);
overflow:hidden;
box-shadow:
0 clamp(20px, 5vw, 24px) clamp(50px, 12.5vw, 60px) rgba(0,0,0,.85),
0 0 clamp(50px, 12.5vw, 60px) rgba(168,109,255,.65),
inset 0 0 clamp(24px, 6vw, 32px) rgba(168,109,255,.45);
transition:all .35s cubic-bezier(.4,0,.2,1);
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
width:100%;
box-sizing:border-box;
color:#fff;
cursor:pointer;
}
.pack-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.1) 0%, transparent 70%);
opacity:0;
transition:opacity .35s ease;
pointer-events:none;
}
.pack-card.highlight{
background:linear-gradient(135deg, rgba(80,30,160,.8) 0%, rgba(20,5,40,1) 100%);
border-color:rgba(174,122,255,.6);
box-shadow:
0 28px 70px rgba(0,0,0,.9),
0 0 90px rgba(174,122,255,.85),
inset 0 0 50px rgba(174,122,255,.55);
}
.pack-card.highlight::before{
opacity:0.3;
}
.pack-card:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:
0 36px 90px rgba(0,0,0,.95),
0 0 100px rgba(168,109,255,.9),
inset 0 0 50px rgba(168,109,255,.6);
border-color:rgba(255,255,255,.5);
}
.pack-card:hover::before{
opacity:0.5;
}
.pack-head{
display:flex;
justify-content:space-between;
align-items:center;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.35em;
font-size:clamp(8px, 2vw, 10px);
gap:clamp(8px, 2vw, 12px);
flex-wrap:wrap;
}
.pack-head .tier,
.pack-head .count{
font-size:clamp(8px, 2vw, 10px);
font-weight:600;
opacity:.9;
}
@media(max-width:480px){
.pack-head{
font-size:clamp(7px, 1.75vw, 9px);
}
.pack-head .tier,
.pack-head .count{
font-size:clamp(7px, 1.75vw, 9px);
}
}
.pack-card h3{
font-size:clamp(18px, 4.5vw, 22px);
font-weight:800;
margin:0;
color:#fff;
text-shadow:0 0 clamp(12px, 3vw, 16px) rgba(174,122,255,.6), 0 clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 8px) rgba(0,0,0,.5);
line-height:1.2;
word-wrap:break-word;
overflow-wrap:break-word;
}
.pack-card p{
font-size:clamp(12px, 3vw, 14px);
color:var(--muted);
margin:0;
line-height:1.4;
opacity:.85;
}
@media(max-width:480px){
.pack-card h3{
font-size:clamp(16px, 4vw, 20px);
}
.pack-card p{
font-size:clamp(11px, 2.75vw, 13px);
}
}
.pack-art{
height:clamp(100px, 25vw, 160px);
min-height:clamp(100px, 25vw, 140px);
border-radius:clamp(14px, 3.5vw, 16px);
border:clamp(1.5px, 0.4vw, 2px) solid rgba(163,112,255,.5);
display:grid;
place-items:center;
position:relative;
overflow:hidden;
box-sizing:border-box;
}
@media(max-width:480px){
.pack-art{
height:clamp(90px, 22.5vw, 120px);
min-height:clamp(90px, 22.5vw, 110px);
}
}
.pack-card:hover .pack-art{
border-color:rgba(163,112,255,.7);
box-shadow:inset 0 0 40px rgba(168,109,255,.5), 0 0 30px rgba(168,109,255,.4);
}
.pack-art .glow{
position:absolute;
inset:-30%;
background:radial-gradient(circle, rgba(168,109,255,.65), transparent 65%);
filter:blur(12px);
}
.pack-art span{
font-size:clamp(32px, 8vw, 44px);
text-shadow:0 0 clamp(18px, 4.5vw, 24px) rgba(200,150,255,.85);
z-index:2;
position:relative;
}
@media(max-width:480px){
.pack-art span{
font-size:clamp(28px, 7vw, 36px);
}
}
.pack-art::after{
content:"";
position:absolute;
inset:-30%;
background:radial-gradient(circle, rgba(255,255,255,.2), transparent 60%);
filter:blur(18px);
mix-blend-mode:screen;
animation:pulse 3.6s ease-in-out infinite;
}
@keyframes pulse{50%{transform:scale(1.15);}}
.pack-foot{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:clamp(8px, 2vw, 12px);
color:#fff;
margin-top:auto;
}
@media(max-width:480px){
.pack-foot{
flex-direction:column;
align-items:stretch;
gap:clamp(6px, 1.5vw, 10px);
}
.pack-foot .btn{
width:100%;
}
}
.price{
font-family:'Teko',sans-serif;
font-size:clamp(20px, 5vw, 32px);
font-weight:700;
color:#fff;
text-shadow:0 0 clamp(8px, 2vw, 12px) rgba(255,255,255,.5);
line-height:1;
display:flex;
align-items:center;
gap:clamp(4px, 1vw, 6px);
}
@media(max-width:480px){
.price{
font-size:clamp(18px, 4.5vw, 24px);
}
}
letter-spacing:.1em;
color:#fff;
text-shadow:0 0 16px rgba(255,255,255,.6), 0 2px 8px rgba(0,0,0,.5);
}
.btn{
position:relative;
padding:clamp(10px,2.5vw,14px) clamp(16px,4vw,24px);
border-radius:clamp(12px, 3vw, 14px);
border:clamp(1.5px, 0.4vw, 2px) solid rgba(255,255,255,.6);
background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(176,130,255,.12) 100%);
color:#fff;
text-transform:uppercase;
letter-spacing:.2em;
font-size:clamp(11px,2.7vw,13px);
font-weight:700;
cursor:pointer;
overflow:hidden;
white-space:nowrap;
transition:all .3s cubic-bezier(.4,0,.2,1);
backdrop-filter:blur(12px) saturate(140%);
-webkit-backdrop-filter:blur(12px) saturate(140%);
touch-action:manipulation;
box-sizing:border-box;
box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 20px rgba(174,122,255,.2);
}
@media(max-width:480px){
.btn{
padding:clamp(9px, 2.25vw, 12px) clamp(14px, 3.5vw, 18px);
font-size:clamp(10px, 2.5vw, 12px);
}
}
.btn::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(176,130,255,.2) 100%);
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.btn:hover:not([disabled]){
background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(176,130,255,.2) 100%);
border-color:rgba(255,255,255,.9);
transform:translateY(-2px) scale(1.02);
box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 30px rgba(174,122,255,.5);
}
.btn:hover:not([disabled])::before{
opacity:1;
}
.btn:active:not([disabled]){
transform:translateY(0) scale(0.98);
box-shadow:0 2px 8px rgba(0,0,0,.3), 0 0 15px rgba(174,122,255,.3);
}
.btn.solid{
border:none;
background:linear-gradient(135deg, rgba(126,219,255,.95) 0%, rgba(176,130,255,.95) 50%, rgba(66,33,142,.95) 100%);
color:#fff;
box-shadow:0 8px 24px rgba(126,219,255,.4), 0 0 40px rgba(174,122,255,.7), inset 0 1px 0 rgba(255,255,255,.3);
font-weight:800;
text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.btn.solid::before{
background:linear-gradient(135deg, rgba(158,229,255,1) 0%, rgba(200,160,255,1) 50%, rgba(100,50,200,1) 100%);
}
.btn.solid:hover:not([disabled]){
background:linear-gradient(135deg, rgba(158,229,255,1) 0%, rgba(200,160,255,1) 50%, rgba(100,50,200,1) 100%);
box-shadow:0 12px 32px rgba(126,219,255,.5), 0 0 50px rgba(174,122,255,.9), inset 0 1px 0 rgba(255,255,255,.4);
transform:translateY(-3px) scale(1.03);
}
.btn[disabled]{
opacity:.4;
cursor:not-allowed;
background:rgba(40,40,40,.3);
border-color:rgba(255,255,255,.15);
filter:grayscale(0.6);
box-shadow:none;
transform:none !important;
}
.btn::after{
content:"";
position:absolute;
left:-30%;
right:-30%;
bottom:-2px;
height:2px;
background:linear-gradient(90deg, transparent, #fff, transparent);
transform:translateX(-100%);
opacity:.35;
}
.btn:hover::after{animation:run 1s ease;}
@keyframes run{to{transform:translateX(100%);}}
/* ===== ROYAL PRISM PACK STYLES ===== */
.royal-prism-pack{
background:linear-gradient(135deg, rgba(221,176,52,.3) 0%, rgba(108,79,142,.4) 50%, rgba(15,5,30,.98) 100%);
border-color:rgba(221,176,52,.5);
box-shadow:
0 28px 70px rgba(0,0,0,.85),
0 0 80px rgba(221,176,52,.6),
inset 0 0 40px rgba(221,176,52,.3);
position:relative;
overflow:hidden;
}
.royal-prism-pack::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 50%, rgba(221,176,52,.15) 0%, transparent 70%);
animation:royalPulse 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes royalPulse{
0%, 100%{opacity:.5; transform:scale(1);}
50%{opacity:.8; transform:scale(1.1);}
}
.royal-prism-pack:hover{
transform:translateY(-8px) scale(1.03);
border-color:rgba(221,176,52,.8);
box-shadow:
0 36px 90px rgba(0,0,0,.9),
0 0 100px rgba(221,176,52,.8),
inset 0 0 50px rgba(221,176,52,.5);
}
.royal-prism-art{
border-color:rgba(221,176,52,.6);
background:radial-gradient(circle at 30% 20%, rgba(221,176,52,.4) 0%, rgba(108,79,142,.3) 50%, rgba(20,5,40,.95) 80%);
box-shadow:inset 0 0 40px rgba(221,176,52,.4), 0 0 40px rgba(221,176,52,.3);
}
.royal-prism-art .royal-glow{
background:radial-gradient(circle, rgba(221,176,52,.8), rgba(108,79,142,.5), transparent 70%);
filter:blur(16px);
animation:royalGlow 2.5s ease-in-out infinite;
}
@keyframes royalGlow{
0%, 100%{opacity:.6; transform:scale(1);}
50%{opacity:1; transform:scale(1.2);}
}
.royal-prism-art span{
font-size:52px;
filter:drop-shadow(0 0 20px rgba(221,176,52,.9)) drop-shadow(0 0 40px rgba(108,79,142,.6));
animation:royalSpin 4s linear infinite;
}
@keyframes royalSpin{
0%{transform:rotate(0deg) scale(1);}
50%{transform:rotate(180deg) scale(1.1);}
100%{transform:rotate(360deg) scale(1);}
}
.royal-price{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
font-size:clamp(18px,4.5vw,24px);
}
.royal-price .price-shards,
.royal-price .price-coins{
display:flex;
align-items:center;
gap:4px;
font-weight:700;
}
.royal-price .price-divider{
font-size:clamp(10px,2.5vw,12px);
opacity:.6;
font-weight:400;
margin-left:4px;
}
.royal-btn{
background:linear-gradient(135deg, rgba(221,176,52,.95) 0%, rgba(108,79,142,.95) 60%, rgba(66,33,142,.95) 100%);
color:#240542;
box-shadow:0 12px 32px rgba(221,176,52,.5),0 0 40px rgba(221,176,52,.7);
}
.royal-btn:hover:not([disabled]){
background:linear-gradient(135deg, rgba(221,176,52,1) 0%, rgba(108,79,142,1) 60%, rgba(66,33,142,1) 100%);
box-shadow:0 16px 40px rgba(221,176,52,.6),0 0 50px rgba(221,176,52,.9);
}
/* ===== FILTERS / GRID ALL CARDS ===== */
.filters{
display:flex;
gap:clamp(8px, 2vw, 10px);
align-items:center;
flex-wrap:wrap;
margin:clamp(6px, 1.5vw, 8px) 0 clamp(10px, 2.5vw, 12px);
color:#fff;
width:100%;
box-sizing:border-box;
}
@media(max-width:480px){
.filters{
flex-direction:column;
align-items:stretch;
}
.filters .input,
.filters select{
width:100%;
}
}
.input{
padding:clamp(10px,2.5vw,14px) clamp(12px,3vw,16px);
border-radius:clamp(10px, 2.5vw, 12px);
border:clamp(1.5px, 0.4vw, 2px) solid rgba(255,255,255,.25);
background:rgba(0,0,0,.5);
color:#fff;
min-width:0;
width:100%;
font-size:clamp(13px,3.2vw,16px);
transition:all .25s ease;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-sizing:border-box;
}
@media(max-width:480px){
.input{
padding:clamp(9px, 2.25vw, 12px) clamp(10px, 2.5vw, 14px);
font-size:clamp(12px, 3vw, 14px);
}
}
.input:focus{
outline:none;
border-color:rgba(126,219,255,.6);
background:rgba(0,0,0,.6);
box-shadow:0 0 20px rgba(126,219,255,.3), inset 0 0 20px rgba(126,219,255,.1);
}
.input::placeholder{
color:rgba(255,255,255,.5);
opacity:1;
}
.checkbox{
display:flex;
gap:clamp(6px, 1.5vw, 8px);
align-items:center;
color:#fff;
font-size:clamp(12px, 3vw, 13px);
cursor:pointer;
user-select:none;
}
.checkbox input[type="checkbox"]{
width:clamp(18px, 4.5vw, 20px);
height:clamp(18px, 4.5vw, 20px);
cursor:pointer;
accent-color:rgba(174,122,255,.8);
}
@media(max-width:480px){
.checkbox{
font-size:clamp(11px, 2.75vw, 12px);
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 25vw, 120px), 1fr));
gap: clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 14px);
justify-items: center;
align-items: start;
padding: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px) clamp(60px, 15vw, 70px);
width: 100%;
background: rgba(66,50,110,0.08);
border-radius: clamp(16px, 4vw, 20px);
box-sizing: border-box;
margin-bottom: clamp(40px, 10vw, 48px);
}
@media(max-width:480px){
.grid{
grid-template-columns: repeat(auto-fit, minmax(clamp(85px, 21.25vw, 100px), 1fr));
gap: clamp(10px, 2.5vw, 12px) clamp(8px, 2vw, 10px);
padding: clamp(6px, 1.5vw, 10px) clamp(6px, 1.5vw, 10px) clamp(50px, 12.5vw, 60px);
}
}
@media(max-width:360px){
.grid{
grid-template-columns: repeat(auto-fit, minmax(clamp(75px, 18.75vw, 90px), 1fr));
gap: clamp(8px, 2vw, 10px) clamp(6px, 1.5vw, 8px);
}
}
@media(min-width:768px){
.grid{
grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 27.5vw, 130px), 1fr));
gap: clamp(14px, 3.5vw, 18px) clamp(12px, 3vw, 16px);
}
}
@media(min-width:1024px){
.grid{
grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 140px), 1fr));
gap: clamp(16px, 4vw, 20px) clamp(14px, 3.5vw, 18px);
}
}
.card-preview {
width: 100%;
max-width: clamp(100px, 25vw, 116px);
aspect-ratio: 116/152;
border-radius: clamp(12px, 3vw, 14px);
border: clamp(1.5px, 0.4vw, 2px) solid rgba(255,255,255,0.15);
background: radial-gradient(circle at 60% 0%, rgba(55,40,85,0.28) 0%, rgba(20,6,32,0.98) 100%);
padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px) clamp(6px, 1.5vw, 8px) clamp(6px, 1.5vw, 8px);
display: flex;
flex-direction: column;
box-shadow: 0 clamp(6px, 1.5vw, 8px) clamp(20px, 5vw, 24px) rgba(0,0,0,.4), inset 0 0 clamp(8px, 2vw, 10px) rgba(86,70,200,.4);
transition:all .3s cubic-bezier(.4,0,.2,1);
cursor:pointer;
position:relative;
overflow:hidden;
}
.card-preview::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.05) 0%, transparent 70%);
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.card-preview:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 clamp(8px, 2vw, 12px) clamp(24px, 6vw, 32px) rgba(0,0,0,.5), inset 0 0 clamp(12px, 3vw, 16px) rgba(86,70,200,.5);
border-color:rgba(255,255,255,.25);
z-index:2;
}
.card-preview:hover::before{
opacity:1;
}
.card-preview .card-top {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 2px;
font-size: 11px;
color: #f7f7fa;
text-shadow: 0 1px 5px #12080c77;
}
.card-preview .card-number {
opacity:.8;
font-size:10px;
font-weight:600;
color:#c8c4d5;
background:rgba(30,20,50,0.09);
border-radius:5px;
padding:0 2px;
}
.card-preview .rarity{
font-weight:800;
border-radius:clamp(6px, 1.5vw, 8px);
padding:clamp(2px, 0.5vw, 3px) clamp(6px, 1.5vw, 8px);
font-size:clamp(9px, 2.25vw, 11px);
border:clamp(1px, 0.25vw, 1.5px) solid;
background:rgba(0,0,0,.4);
text-transform:uppercase;
letter-spacing:.1em;
text-shadow:0 0 clamp(6px, 1.5vw, 8px) currentColor, 0 1px 3px rgba(0,0,0,.8);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
box-shadow:0 0 clamp(8px, 2vw, 12px) currentColor, inset 0 0 clamp(4px, 1vw, 6px) rgba(255,255,255,.1);
transition:all .25s ease;
}
.card-preview .card-art {
width: calc(100% - clamp(8px, 2vw, 10px));
aspect-ratio: 116/152;
max-width: clamp(88px, 22vw, 98px);
border-radius: clamp(8px, 2vw, 10px);
border: clamp(1.5px, 0.4vw, 2px) solid;
margin: 0 0 clamp(4px, 1vw, 6px) 0;
box-shadow:0 clamp(4px, 1vw, 6px) clamp(12px, 3vw, 16px) rgba(0,0,0,.6);
background-color:#1f1a33;
display:flex;
align-items:center;
justify-content: center;
overflow: hidden;
transition:all .3s cubic-bezier(.4,0,.2,1);
position:relative;
}
.card-preview:hover .card-art {
transform:translateY(-2px) scale(1.02);
box-shadow:0 clamp(6px, 1.5vw, 8px) clamp(16px, 4vw, 20px) rgba(0,0,0,.7);
}
.card-preview .card-art {
background-size: cover !important;
background-position: center center !important;
}
.card-preview .card-footer {
margin-top: auto;
font-size: 11px;
text-align: center;
width: 98%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
line-height: 1.13;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 1px;
min-height: 28px;
}
.card-preview .card-name {
font-weight: 500;
color: #fff;
text-align: center;
font-size: 11px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
}
.card-preview .card-fraction{
font-size: 13px;
font-weight: 700;
color: #7edbff;
margin-top: 0;
margin-bottom: 0;
text-shadow: 0 1px 2px #0009;
}
.card-preview.missing .card-fraction{
color: #bc63e6;
}
@media (max-width: 600px) {
.grid {
grid-template-columns: repeat(2, minmax(clamp(90px, 22.5vw, 110px), 1fr));
gap: clamp(10px, 2.5vw, 14px) clamp(8px, 2vw, 12px);
}
.card-preview {
width: 100%;
max-width: clamp(100px, 25vw, 116px);
aspect-ratio: 116/152;
}
.card-preview .card-art{
width: calc(100% - clamp(8px, 2vw, 10px));
aspect-ratio: 116/152;
}
}
@media (max-width: 480px) {
.grid {
grid-template-columns: repeat(2, minmax(clamp(85px, 21.25vw, 100px), 1fr));
gap: clamp(8px, 2vw, 12px) clamp(6px, 1.5vw, 10px);
padding: clamp(6px, 1.5vw, 10px) clamp(6px, 1.5vw, 10px) clamp(50px, 12.5vw, 60px);
}
}
@media (max-width: 360px) {
.grid {
grid-template-columns: repeat(2, minmax(clamp(75px, 18.75vw, 90px), 1fr));
gap: clamp(6px, 1.5vw, 10px) clamp(4px, 1vw, 8px);
}
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 27.5vw, 130px), 1fr));
gap: clamp(14px, 3.5vw, 18px) clamp(12px, 3vw, 16px);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 140px), 1fr));
gap: clamp(16px, 4vw, 20px) clamp(14px, 3.5vw, 18px);
}
}
/* ===== PROFILE ===== */
.tg-notice{
padding:10px;
border:1px dashed rgba(255,255,255,.25);
border-radius:12px;
margin:6px 0 10px;
color:var(--muted);
background:rgba(255,255,255,.03);
font-size:13px;
}
/* === PROFILE readability & grouping (overrides) === */
/* общий контейнер профиля как "карточка" */
.profile{
display:grid !important;
grid-template-columns: auto 1fr !important;
align-items:flex-start !important;
gap:16px !important;
padding:16px 18px !important;
border-radius:18px !important;
border:1px solid rgba(255,255,255,.18) !important;
background:radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 100%), rgba(15,5,30,.72) !important;
backdrop-filter: blur(10px) saturate(140%) !important;
-webkit-backdrop-filter: blur(10px) saturate(140%) !important;
box-shadow: 0 18px 60px rgba(0,0,0,.7), inset 0 0 24px rgba(255,255,255,.04) !important;
}
.pf-left{ gap:14px !important; }
.avatar{ width:84px !important; height:84px !important; }
.info .name{ font-size:18px !important; font-weight:800 !important; }
.row{ font-size:13px !important; }
.copy-btn{ border-radius:10px !important; padding:6px 10px !important; }
.addfund-wrap{ margin-top:6px !important; }
/* блоки статистики – карточки одной сеткой */
.stats{
background:rgba(255,255,255,.02) !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:18px !important;
padding:12px !important;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
gap:12px !important;
box-shadow: 0 18px 60px rgba(0,0,0,.6) !important;
}
.stat{ min-height:88px !important; display:grid !important; align-content:space-between !important; }
.stat .label{ letter-spacing:.18em !important; font-size:10.5px !important; }
.stat .value{ font-size:34px !important; }
.stat.wide{ grid-column:1/-1 !important; }
/* прогресс – более заметный бар и подпись */
#statProgress{ font-weight:600; }
.progress{ height:10px !important; }
.progress span{ box-shadow:0 0 18px rgba(126,219,255,.55) !important; }
/* плитки-переходы снизу */
.tiles{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:10px; }
.tile{ border-radius:14px !important; }
.profile{
position:relative;
display:flex;
align-items:flex-start;
flex-wrap:wrap;
gap:clamp(12px, 3vw, 16px);
padding:clamp(12px, 3vw, 16px);
border-radius:clamp(14px, 3.5vw, 16px);
border:clamp(1px, 0.25vw, 1px) solid var(--surface-border);
background:var(--panel-surface);
box-shadow:
0 clamp(20px, 5vw, 24px) clamp(50px, 12.5vw, 60px) rgba(0,0,0,.8),
0 0 clamp(50px, 12.5vw, 60px) rgba(137,82,255,.6),
inset 0 0 clamp(32px, 8vw, 40px) rgba(137,82,255,.4);
color:#fff;
width:100%;
box-sizing:border-box;
}
@media(max-width:480px){
.profile{
flex-direction:column;
align-items:center;
text-align:center;
}
}
.pf-left{
display:flex;
align-items:flex-start;
gap:12px;
flex-shrink:0;
color:#fff;
}
.avatar{
width:clamp(64px, 16vw, 72px);
height:clamp(64px, 16vw, 72px);
border-radius:50%;
object-fit:cover;
border:clamp(1.5px, 0.4vw, 2px) solid rgba(255,255,255,.6);
box-shadow:0 clamp(12px, 3vw, 16px) clamp(32px, 8vw, 40px) rgba(0,0,0,.9),0 0 clamp(24px, 6vw, 32px) rgba(174,122,255,.6);
background:#200a4a;
flex-shrink:0;
}
.info{
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
color:#fff;
}
.info .name{
font-size:clamp(14px, 3.5vw, 16px);
font-weight:700;
color:#fff;
text-shadow:0 0 12px rgba(176,130,255,.6);
word-break:break-word;
overflow-wrap:break-word;
line-height:1.3;
}
.row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:clamp(5px, 1.25vw, 6px);
color:#fff;
font-size:clamp(12px, 3vw, 13px);
line-height:1.4;
width:100%;
box-sizing:border-box;
}
.row.small{
font-size:clamp(11px, 2.75vw, 12px);
}
@media(max-width:480px){
.row{
font-size:clamp(11px, 2.75vw, 12px);
gap:clamp(4px, 1vw, 5px);
}
.row.small{
font-size:clamp(10px, 2.5vw, 11px);
}
}
.idval{
font-weight:600;
color:#fff;
}
.copy-btn{
padding:6px 10px;
font-size:12px;
line-height:1.2;
border-radius:999px;
border:1px solid rgba(255,255,255,.35);
background:rgba(0,0,0,.4);
color:#fff;
cursor:pointer;
box-shadow:0 12px 24px rgba(0,0,0,.8),0 0 24px rgba(174,122,255,.4);
}
/* ===== STATS ===== */
.stats{
background:radial-gradient(circle at 80% 30%,#231d3d 0%,#150a26 90%);
border-radius:clamp(16px, 4vw, 18px);
box-shadow:0 clamp(10px, 2.5vw, 12px) clamp(32px, 8vw, 40px) #20195a66,inset 0 0 clamp(24px, 6vw, 30px) #684fff33;
padding:clamp(14px, 3.5vw, 18px) clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 10px) clamp(6px, 1.5vw, 8px);
margin-bottom:clamp(16px, 4vw, 20px);
gap:clamp(18px, 4.5vw, 22px) clamp(12px, 3vw, 14px);
display:grid;
grid-template-columns:repeat(auto-fit,minmax(clamp(140px, 35vw, 180px),1fr));
width:100%;
box-sizing:border-box;
}
@media(max-width:480px){
.stats{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(14px, 3.5vw, 18px) clamp(10px, 2.5vw, 12px);
padding:clamp(12px, 3vw, 14px) clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px) clamp(4px, 1vw, 6px);
}
}
@media(max-width:360px){
.stats{
grid-template-columns:1fr;
}
}
.stat{
padding:clamp(16px, 4vw, 20px) clamp(8px, 2vw, 10px)!important;
border-radius:clamp(16px, 4vw, 18px)!important;
background:rgba(25,12,54,.93)!important;
font-size:clamp(15px, 3.75vw, 17px);
box-shadow:0 clamp(2px, 0.5vw, 3px) clamp(14px, 3.5vw, 18px) #5646b833,inset 0 0 clamp(10px, 2.5vw, 12px) #725fff22;
border:clamp(1px, 0.4vw, 1.5px) solid #8c64f544!important;
box-sizing:border-box;
}
.stat .label{
font-size:clamp(10px, 2.5vw, 12px)!important;
color:#c1bbfa;
font-weight:600;
text-transform:uppercase;
letter-spacing:.13em;
}
.stat .value{
font-size:clamp(24px, 6vw, 30px)!important;
color:#fffef7;
text-shadow:0 0 clamp(14px, 3.5vw, 18px) #7edbff7c;
letter-spacing:.02em;
font-family:'Teko',sans-serif;
}
@media(max-width:480px){
.stat .value{
font-size:clamp(20px, 5vw, 26px)!important;
}
}
.stat.wide{
grid-column:1/-1;
}
.progress{
position:relative;
height:8px;
border-radius:999px;
background:rgba(255,255,255,.12);
overflow:hidden;
margin:6px 0;
}
.progress span{
position:absolute;
left:0;
top:0;
bottom:0;
background:linear-gradient(90deg, var(--accentB), #ff69e6);
box-shadow:0 0 20px rgba(126,219,255,.6),0 0 40px rgba(255,105,230,.4);
}
.stat-rare {
display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:16px;margin-bottom:4px;
background:none;
}
.stat-rare-art {
width:76px; height:104px; background:#201c46 center/cover no-repeat; border-radius:10px; border:2px solid #ddb034; box-shadow:0 6px 24px #0004,inset 0 0 16px #ddb03444;
margin-bottom:7px;
}
.stat-rare-name {
font-size:14px;color:#fff9ce;font-weight:700;text-align:center;
}
.stat-rare-rarity {
font-size:12px;font-weight:600;color:#ddb034;background:rgba(221,176,52,.08);padding:2px 10px;border-radius:7px;margin-top:3px;
}
.stat-missing-preview{display:flex;gap:6px;justify-content:center;margin-top:10px;}
.stat-missing-preview .stat-missing-mini{
width:44px; height:60px; border-radius:6px; background:#201c46 center/cover no-repeat; border:2px solid #bc63e6;box-shadow:0 1px 7px #0005;
display:flex; align-items:center; justify-content:center;position:relative;
}
.stat-missing-preview .stat-missing-mini .stat-missing-name{
position:absolute;bottom:-1.1em;left:50%;transform:translateX(-50%);font-size:10px;font-weight:500;text-align:center;width:max-content;color:#c9baff;text-shadow:0 0 6px #000a;
}
/* ===== TILES ===== */
.tiles{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(clamp(180px, 45vw, 220px),1fr));
gap:clamp(8px, 2vw, 10px);
color:#fff;
width:100%;
box-sizing:border-box;
}
.tile{
display:flex;
align-items:center;
gap:clamp(8px, 2vw, 10px);
padding:clamp(12px, 3vw, 14px) clamp(14px, 3.5vw, 16px);
border-radius:clamp(14px, 3.5vw, 16px);
border:clamp(1px, 0.25vw, 1px) solid var(--surface-border);
background:var(--panel-surface);
color:#fff;
text-align:left;
cursor:pointer;
box-shadow:
0 clamp(20px, 5vw, 24px) clamp(50px, 12.5vw, 60px) rgba(0,0,0,.8),
0 0 clamp(50px, 12.5vw, 60px) rgba(137,82,255,.6),
inset 0 0 clamp(24px, 6vw, 32px) rgba(137,82,255,.4);
transition:all .25s ease;
touch-action:manipulation;
box-sizing:border-box;
}
.tile:hover{
transform:translateY(-2px);
box-shadow:
0 clamp(24px, 6vw, 28px) clamp(60px, 15vw, 70px) rgba(0,0,0,.85),
0 0 clamp(70px, 17.5vw, 80px) rgba(137,82,255,.7),
inset 0 0 clamp(32px, 8vw, 40px) rgba(137,82,255,.5);
}
@media(max-width:480px){
.tiles{
grid-template-columns:repeat(auto-fit,minmax(clamp(150px, 37.5vw, 180px),1fr));
gap:clamp(6px, 1.5vw, 8px);
}
.tile{
padding:clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 14px);
font-size:clamp(13px, 3.25vw, 14px);
}
}
/* ===== PANELS ===== */
.panel{
position:fixed;
left:0;
right:0;
bottom:var(--navH);
max-height:calc(100dvh - 60px - var(--navH));
transform:translateY(110%);
transition:transform .28s ease;
background:radial-gradient(circle at 20% 0%, rgba(40,20,80,.98) 0%, rgba(10,5,20,.99) 70%);
border-top:1px solid rgba(255,255,255,.25);
box-shadow:0 -24px 60px rgba(0,0,0,.9),0 0 60px rgba(174,122,255,.4);
z-index:40;
color:#fff;
overflow:hidden;
display:flex;
flex-direction:column;
box-sizing:border-box;
}
.panel.open{
transform:translateY(0);
}
/* === Fullscreen panels - новая логика === */
.panel.fullscreen{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100vw !important;
width:100dvw !important;
height:100vh !important;
height:100dvh !important;
z-index:999999 !important;
display:flex !important;
flex-direction:column !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transition:opacity .3s ease, visibility .3s ease !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
background:rgba(5,0,20,.95) !important;
backdrop-filter:blur(20px) saturate(140%) !important;
-webkit-backdrop-filter:blur(20px) saturate(140%) !important;
}
/* Блокировка скролла когда открыта fullscreen панель */
html.fullscreen-panel-open,
body.fullscreen-panel-open{
overflow:hidden !important;
position:fixed !important;
width:100% !important;
height:100% !important;
top:0 !important;
left:0 !important;
}
html.fullscreen-panel-open .topbar,
html.fullscreen-panel-open .nav,
body.fullscreen-panel-open .topbar,
body.fullscreen-panel-open .nav{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
z-index:-1 !important;
}
.panel.fullscreen.open{
z-index:999999 !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100vw !important;
height:100vh !important;
transform:none !important;
}
.fullscreen-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
background:rgba(5,0,20,.5);
backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
z-index:0;
}
/* === Бустеры fullscreen === */
.boosters-fullscreen{
display:flex;
flex-direction:column;
padding:clamp(8px, 2vw, 12px);
padding-top:calc(clamp(40px, 10vw, 50px) + env(safe-area-inset-top));
padding-bottom:calc(clamp(10px, 2.5vw, 14px) + env(safe-area-inset-bottom));
gap:clamp(10px, 2.5vw, 14px);
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
height:100%;
min-height:100vh;
min-height:100dvh;
max-height:100vh;
max-height:100dvh;
width:100%;
box-sizing:border-box;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(180deg, rgba(20,10,40,.98) 0%, rgba(10,5,25,.99) 100%);
}
.boosters-header{
text-align:center;
flex-shrink:0;
padding:clamp(8px, 2vw, 16px) 0;
}
.boosters-header h2{
font-size:clamp(22px, 5.5vw, 30px);
font-weight:800;
margin:0 0 clamp(8px, 2vw, 12px) 0;
color:#fff;
text-shadow:0 0 20px rgba(126,219,255,.6);
}
.boosters-header p{
font-size:clamp(13px, 3.25vw, 16px);
color:rgba(255,255,255,.7);
margin:0;
}
.boosters-list{
display:flex;
flex-direction:column;
gap:clamp(12px, 3vw, 20px);
flex:1;
min-height:0;
overflow-y:auto;
padding:clamp(4px, 1vw, 8px) 0;
}
.fullscreen-content{
position:relative;
z-index:1;
flex:1;
display:flex;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
width:100%;
height:100%;
min-height:100vh;
min-height:100dvh;
max-height:100vh;
max-height:100dvh;
overscroll-behavior:contain;
}
.btn-close-fullscreen{
position:fixed;
top:clamp(8px, 2vw, 12px);
top:calc(clamp(8px, 2vw, 12px) + env(safe-area-inset-top));
right:clamp(8px, 2vw, 12px);
z-index:100002;
width:clamp(30px, 7.5vw, 36px);
height:clamp(30px, 7.5vw, 36px);
min-width:28px;
min-height:28px;
border-radius:50%;
border:1px solid rgba(255,255,255,.25);
background:rgba(20,8,44,.9);
color:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.5);
transition:all .2s ease;
font-size:clamp(14px, 3.5vw, 18px);
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
padding:0;
touch-action:manipulation;
}
.btn-close-fullscreen:hover{
background:rgba(255,80,80,.95);
border-color:rgba(255,255,255,.6);
transform:scale(1.15);
box-shadow:0 6px 24px rgba(255,80,80,.5), inset 0 0 20px rgba(255,255,255,.1);
}
.btn-close-fullscreen:active{
transform:scale(0.95);
}
@media (max-width: 480px){
.btn-close-fullscreen{
top:clamp(10px, 2.5vw, 12px);
right:clamp(10px, 2.5vw, 12px);
width:clamp(32px, 8vw, 36px);
height:clamp(32px, 8vw, 36px);
min-width:32px;
min-height:32px;
font-size:clamp(16px, 4vw, 20px);
}
}
@media (max-width: 360px){
.btn-close-fullscreen{
top:8px;
right:8px;
width:30px;
height:30px;
min-width:30px;
min-height:30px;
font-size:16px;
}
}
.panel-head{
position:sticky;
top:0;
background:inherit;
display:flex;
align-items:center;
gap:clamp(8px, 2vw, 10px);
padding:clamp(8px, 2vw, 10px);
border-bottom:clamp(1px, 0.25vw, 1px) solid rgba(255,255,255,.2);
color:#fff;
font-size:clamp(13px, 3.25vw, 14px);
flex-wrap:wrap;
z-index:10;
}
.panel-body{
padding:clamp(8px, 2vw, 10px);
display:grid;
gap:clamp(6px, 1.5vw, 8px);
color:#fff;
font-size:clamp(13px, 3.25vw, 14px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
@media(max-width:480px){
.panel-head{
padding:clamp(6px, 1.5vw, 8px);
gap:clamp(6px, 1.5vw, 8px);
}
.panel-body{
padding:clamp(6px, 1.5vw, 8px);
gap:clamp(5px, 1.25vw, 6px);
}
}
.upgrade-fullscreen{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:clamp(8px, 2vw, 12px);
padding:clamp(8px, 2vw, 12px);
padding-top:calc(clamp(40px, 10vw, 50px) + env(safe-area-inset-top));
padding-bottom:calc(clamp(12px, 3vw, 16px) + env(safe-area-inset-bottom));
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
height:100%;
min-height:100vh;
min-height:100dvh;
max-height:100vh;
max-height:100dvh;
overscroll-behavior:contain;
touch-action:pan-y;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
box-sizing:border-box;
margin:0;
background:linear-gradient(180deg, rgba(15,8,35,.98) 0%, rgba(5,2,15,.99) 100%);
}
.upgrade-fullscreen::before{
content:'';
display:none;
}
.upgrade-fullscreen::after{
content:'';
display:none;
min-height:0;
max-height:clamp(20px, 5vw, 40px);
}
@media (max-width: 480px){
.upgrade-fullscreen{
padding:3px;
padding-top:calc(20px + env(safe-area-inset-top));
padding-bottom:calc(8px + env(safe-area-inset-bottom));
gap:4px;
justify-content:flex-start;
}
.upgrade-card-container{
max-width:100px;
}
.upgrade-nav-btn{
width:28px;
height:28px;
font-size:clamp(14px, 3.5vw, 16px);
}
}
@media (max-width: 360px){
.upgrade-fullscreen{
padding:clamp(4px, 1vw, 8px);
padding-top:calc(clamp(35px, 8.75vw, 45px) + env(safe-area-inset-top));
padding-bottom:calc(clamp(8px, 2vw, 12px) + env(safe-area-inset-bottom));
gap:clamp(6px, 1.5vw, 10px);
justify-content:center;
}
.upgrade-card-container{
max-width:85px;
}
}
@media (min-width: 768px){
.upgrade-fullscreen{
padding:clamp(12px, 3vw, 20px);
padding-top:calc(clamp(50px, 6.25vw, 70px) + env(safe-area-inset-top));
padding-bottom:calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-bottom));
gap:clamp(12px, 3vw, 20px);
justify-content:center;
}
}
@media (min-width: 1024px){
.upgrade-fullscreen{
padding:clamp(16px, 4vw, 28px);
padding-top:calc(clamp(60px, 7.5vw, 80px) + env(safe-area-inset-top));
padding-bottom:calc(clamp(20px, 5vw, 32px) + env(safe-area-inset-bottom));
gap:clamp(16px, 4vw, 24px);
justify-content:center;
}
}
.upgrade-carousel-wrapper{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(8px, 2vw, 16px);
width:100%;
max-width:clamp(320px, 90vw, 500px);
position:relative;
flex-wrap:nowrap;
margin:0 auto;
padding:0;
flex-shrink:0;
box-sizing:border-box;
}
@media (max-width: 480px){
.upgrade-carousel-wrapper{
gap:clamp(6px, 1.5vw, 12px);
max-width:100%;
}
}
@media (max-width: 360px){
.upgrade-carousel-wrapper{
gap:4px;
}
}
.upgrade-nav-btn{
width:clamp(28px, 7vw, 36px);
height:clamp(28px, 7vw, 36px);
min-width:28px;
min-height:28px;
border-radius:50%;
border:1px solid rgba(255,255,255,.2);
background:rgba(15,8,35,.85);
color:#fff;
font-size:clamp(12px, 3vw, 16px);
font-weight:600;
cursor:pointer;
transition:all .2s ease;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.3);
touch-action:manipulation;
}
@media (max-width: 480px){
.upgrade-nav-btn{
width:clamp(32px, 8vw, 36px);
height:clamp(32px, 8vw, 36px);
min-width:32px;
min-height:32px;
font-size:clamp(14px, 3.5vw, 16px);
}
}
@media (max-width: 360px){
.upgrade-nav-btn{
width:30px;
height:30px;
min-width:30px;
min-height:30px;
font-size:14px;
}
}
.upgrade-nav-btn:hover:not(:disabled){
background:rgba(126,219,255,.25);
border-color:rgba(126,219,255,.6);
transform:scale(1.15);
box-shadow:0 6px 24px rgba(126,219,255,.4), inset 0 0 20px rgba(126,219,255,.15);
}
.upgrade-nav-btn:disabled{
opacity:.3;
cursor:not-allowed;
}
.upgrade-card-display{
flex:0 0 auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:clamp(6px, 1.5vw, 10px);
min-width:0;
width:100%;
max-width:100%;
box-sizing:border-box;
margin:0 auto;
padding:0;
position:relative;
}
@media (max-width: 480px){
.upgrade-card-display{
gap:clamp(10px, 2.5vw, 16px);
}
}
.upgrade-card-container{
width:100%;
max-width:clamp(100px, 28vw, 140px);
min-width:80px;
aspect-ratio:116/152;
position:relative;
transition:transform .3s ease;
margin:0 auto;
flex-shrink:0;
}
@media (max-width: 480px){
.upgrade-card-container{
max-width:clamp(90px, 25vw, 120px);
min-width:80px;
}
}
@media (max-width: 360px){
.upgrade-card-container{
max-width:90px;
min-width:70px;
}
}
@media (min-width: 768px){
.upgrade-card-container{
max-width:clamp(120px, 20vw, 160px);
}
}
@media (min-width: 1024px){
.upgrade-card-container{
max-width:clamp(140px, 15vw, 180px);
}
}
.upgrade-card-large{
width:100%;
height:100%;
border-radius:12px;
overflow:hidden;
border:2px solid rgba(255,255,255,.3);
box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 30px rgba(160,120,255,.3);
background:rgba(20,8,44,.95);
position:relative;
transition:all .2s ease;
}
.upgrade-card-large:hover{
transform:scale(1.02);
}
.upgrade-card-large img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.upgrade-card-info{
width:100%;
max-width:clamp(260px, 75vw, 320px);
display:flex;
flex-direction:column;
gap:clamp(4px, 1vw, 6px);
align-items:stretch;
text-align:center;
padding:clamp(8px, 2vw, 10px);
background:rgba(20,10,40,.9);
border-radius:10px;
border:1px solid rgba(174,122,255,.2);
box-sizing:border-box;
margin:0 auto;
flex-shrink:0;
}
@media (max-width: 480px){
.upgrade-card-info{
padding:clamp(12px, 3vw, 16px);
gap:clamp(10px, 2.5vw, 14px);
}
}
@media (max-width: 360px){
.upgrade-card-info{
padding:10px;
gap:8px;
}
}
.upgrade-card-title{
font-size:clamp(13px, 3.2vw, 16px);
font-weight:700;
color:#fff;
margin-bottom:0;
line-height:1.2;
}
.upgrade-card-rarity{
font-size:clamp(9px, 2.2vw, 11px);
font-weight:600;
text-transform:uppercase;
letter-spacing:.08em;
padding:clamp(3px, 0.8vw, 5px) clamp(8px, 2vw, 10px);
background:rgba(0,0,0,.25);
border-radius:6px;
border:1px solid rgba(255,255,255,.15);
}
@media (max-width: 480px){
.upgrade-card-title{
font-size:12px;
}
.upgrade-card-rarity{
font-size:9px;
padding:3px 8px;
}
}
@media (max-width: 360px){
.upgrade-card-title{
font-size:11px;
}
.upgrade-card-rarity{
font-size:8px;
padding:2px 6px;
}
}
.upgrade-card-stats{
width:100%;
max-width:500px;
padding:0;
}
.upgrade-stats-grid{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(4px, 1vw, 6px);
padding:clamp(5px, 1.2vw, 8px);
background:rgba(0,0,0,.2);
border-radius:8px;
border:1px solid rgba(255,255,255,.08);
width:100%;
box-sizing:border-box;
}
@media (max-width: 480px){
.upgrade-stats-grid{
gap:clamp(6px, 1.5vw, 10px);
padding:clamp(10px, 2.5vw, 14px);
}
}
@media (max-width: 360px){
.upgrade-stats-grid{
gap:6px;
padding:10px;
}
}
.upgrade-stat-item{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
flex:1;
min-width:0;
}
.upgrade-stat-icon{
font-size:clamp(12px, 3vw, 14px);
line-height:1;
}
.upgrade-stat-value{
font-size:clamp(14px, 3.5vw, 18px);
font-weight:700;
color:#fff;
line-height:1;
}
.upgrade-stat-label{
font-size:clamp(7px, 1.8vw, 9px);
text-transform:uppercase;
letter-spacing:.03em;
opacity:.6;
color:#fff;
}
.upgrade-stat-divider{
width:1px;
height:clamp(40px, 10vw, 50px);
background:linear-gradient(180deg, transparent, rgba(255,255,255,.3), transparent);
opacity:.5;
flex-shrink:0;
}
@media (max-width: 480px){
.upgrade-stat-icon{
font-size:clamp(16px, 4vw, 20px);
}
.upgrade-stat-value{
font-size:clamp(18px, 4.5vw, 24px);
}
.upgrade-stat-label{
font-size:clamp(8px, 2vw, 10px);
}
.upgrade-stat-divider{
height:clamp(35px, 8.75vw, 40px);
}
}
@media (max-width: 360px){
.upgrade-stat-icon{
font-size:16px;
}
.upgrade-stat-value{
font-size:18px;
}
.upgrade-stat-label{
font-size:8px;
}
.upgrade-stat-divider{
height:32px;
}
}
.upgrade-card-counter{
font-size:clamp(11px, 2.5vw, 13px);
opacity:.8;
font-weight:600;
text-align:center;
padding:clamp(3px, 0.8vw, 5px) clamp(8px, 2vw, 12px);
background:rgba(0,0,0,.2);
border-radius:6px;
border:1px solid rgba(255,255,255,.08);
color:#fff;
margin:0;
width:auto;
flex-shrink:0;
box-sizing:border-box;
}
@media (max-width: 480px){
.upgrade-card-counter{
padding:clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
font-size:clamp(11px, 2.75vw, 14px);
}
}
@media (max-width: 360px){
.upgrade-card-counter{
padding:6px 12px;
font-size:12px;
}
}
@media (max-width: 480px){
.upgrade-carousel-wrapper{
gap:8px;
}
.upgrade-nav-btn{
width:36px;
height:36px;
font-size:16px;
}
.upgrade-card-container{
max-width:140px;
}
.upgrade-card-title{
font-size:14px;
}
.upgrade-card-info{
padding:16px;
gap:16px;
}
.upgrade-stats-grid{
gap:8px;
padding:12px;
}
.upgrade-stat-icon{
font-size:20px;
}
.upgrade-stat-value{
font-size:24px;
}
.upgrade-stat-label{
font-size:10px;
}
.upgrade-stat-divider{
height:40px;
}
.upgrade-chance,
.upgrade-cost{
padding:12px 16px;
font-size:14px;
}
.upgrade-btn{
padding:14px 20px;
font-size:14px;
}
}
.panel .row{
display:flex;
align-items:center;
justify-content:space-between;
padding:clamp(8px, 2vw, 10px);
border-radius:clamp(10px, 2.5vw, 12px);
background:rgba(0,0,0,.4);
border:clamp(1px, 0.25vw, 1px) solid rgba(255,255,255,.25);
color:#fff;
box-shadow:0 clamp(10px, 2.5vw, 12px) clamp(28px, 7vw, 32px) rgba(0,0,0,.8),0 0 clamp(28px, 7vw, 32px) rgba(174,122,255,.4);
gap:clamp(8px, 2vw, 12px);
flex-wrap:wrap;
box-sizing:border-box;
}
@media(max-width:480px){
.panel .row{
padding:clamp(6px, 1.5vw, 8px);
flex-direction:column;
align-items:flex-start;
gap:clamp(6px, 1.5vw, 8px);
}
}
.empty{
opacity:.7;
padding:clamp(12px, 3vw, 16px);
border:clamp(1px, 0.25vw, 1px) dashed rgba(255,255,255,.4);
border-radius:clamp(10px, 2.5vw, 12px);
text-align:center;
color:#fff;
font-size:clamp(13px, 3.25vw, 14px);
line-height:1.5;
width:100%;
box-sizing:border-box;
}
@media(max-width:480px){
.empty{
padding:clamp(10px, 2.5vw, 12px);
font-size:clamp(12px, 3vw, 13px);
}
}
/* ===== NAV BAR BOTTOM ===== */
.nav{
position:fixed;
left:clamp(12px, 3vw, 16px);
right:clamp(12px, 3vw, 16px);
bottom:calc(clamp(10px, 2.5vw, 12px) + var(--safe-bottom));
height:var(--navH);
display:grid;
grid-template-columns:repeat(5,1fr);
align-items:center;
gap:clamp(4px, 1vw, 6px);
padding:clamp(10px, 2.5vw, 14px) clamp(8px, 2vw, 12px);
box-sizing:border-box;
z-index:50;
background:rgba(15,6,32,.7);
border-radius:clamp(18px, 4.5vw, 22px);
border:clamp(1px, 0.25vw, 1px) solid rgba(255,255,255,.3);
box-shadow:
0 clamp(20px, 5vw, 24px) clamp(60px, 15vw, 65px) rgba(0,0,0,.95),
0 0 clamp(50px, 12.5vw, 60px) rgba(174,122,255,.5),
inset 0 0 clamp(20px, 5vw, 24px) rgba(137,82,255,.5);
backdrop-filter:blur(20px) saturate(150%);
-webkit-backdrop-filter:blur(20px) saturate(150%);
overflow:hidden;
color:#fff;
transition:all .3s ease;
}
@media(max-width:480px){
.nav{
left:clamp(8px, 2vw, 12px);
right:clamp(8px, 2vw, 12px);
bottom:calc(clamp(8px, 2vw, 10px) + var(--safe-bottom));
padding:clamp(8px, 2vw, 10px) clamp(6px, 1.5vw, 8px);
}
}
@media(max-width:360px){
.nav{
left:clamp(6px, 1.5vw, 8px);
right:clamp(6px, 1.5vw, 8px);
padding:clamp(6px, 1.5vw, 8px) clamp(4px, 1vw, 6px);
}
}
.nav-item{
position:relative;
display:grid;
justify-items:center;
text-align:center;
gap:clamp(4px, 1vw, 6px);
color:rgba(255,255,255,.75);
text-transform:uppercase;
letter-spacing:.2em;
font-size:clamp(8px, 2vw, 10px);
cursor:pointer;
touch-action:manipulation;
transition:all .2s ease;
}
@media(max-width:480px){
.nav-item{
gap:clamp(3px, 0.75vw, 4px);
font-size:clamp(7px, 1.75vw, 9px);
}
}
.nav-item.active{
color:#fff !important;
}
.nav-item.active::after{display:none!important;}
.nav-item .liquid-glass {
position:absolute;left:50%;bottom:9px;transform:translateX(-50%) scale(0.3);width:32px;height:10px;z-index:1;pointer-events:none;transition:all .28s cubic-bezier(.5,1.8,.38,1.1), filter .19s;
border-radius:7px;background:rgba(245,245,255,.19);
box-shadow:0 0 32px #7edbff95,0 4px 20px #ffffff33,0 0 24px #8c54fe77;
filter:blur(2px) saturate(2);
opacity:0;
}
.nav-item.active .liquid-glass {
opacity:1;
transform:translateX(-50%) scale(1.15);
background:linear-gradient(90deg, #a7e2ffad 0%, #c7beff8a 100%),rgba(240,240,255,0.23);
filter:blur(4px) saturate(2.2);
transition:all .41s cubic-bezier(.6,1.64,.38,1.12), filter .25s;
}
.nav-item {
position:relative;
}
.nav-item.center{
display:grid;
place-items:center;
transform:translateY(-16px);
/* wrapper no bg now, just holds the icon */
}
.nav-item.center .m-logo{
width:clamp(54px,6.5vh,64px);
height:clamp(54px,6.5vh,64px);
object-fit:contain;
filter:drop-shadow(0 0 20px rgba(183,149,255,.8)) drop-shadow(0 20px 30px rgba(0,0,0,.9));
border-radius:50%;
}
.ico{
width:clamp(22px, 5.5vw, 26px);
height:clamp(22px, 5.5vw, 26px);
border-radius:clamp(6px, 1.5vw, 8px);
position:relative;
display:inline-block;
flex-shrink:0;
}
@media(max-width:480px){
.ico{
width:clamp(20px, 5vw, 24px);
height:clamp(20px, 5vw, 24px);
}
}
.ico{
color:#fff;
}
.ico::before{
content:"";
position:absolute;
inset:0;
background:currentColor;
mask-repeat:no-repeat;
mask-position:center;
mask-size:70%;
}
.ico.home::before{
mask-image:url('data:image/svg+xml,');
}
.ico.pack::before{
mask-image:url('data:image/svg+xml,');
}
.ico.star::before{
mask-image:url('data:image/svg+xml,');
}
.ico.user::before{
mask-image:url('data:image/svg+xml,');
}
@media (max-width:520px){
.nav{left:8px; right:8px;}
.nav-item.center{
display:grid;
place-items:center;
transform:translateY(-16px);
/* wrapper no bg now, just holds the icon */
}
.nav-item.center .m-logo{
width:clamp(54px,6.5vh,64px);
height:clamp(54px,6.5vh,64px);
object-fit:contain;
filter:drop-shadow(0 0 20px rgba(183,149,255,.8)) drop-shadow(0 20px 30px rgba(0,0,0,.9));
border-radius:50%;
}
}
/* ===== PACK OPEN OVERLAY (SWIPE SHEET) ===== */
.overlay{
position:fixed;
inset:0;
z-index:100;
display:block;
pointer-events:none;
color:#fff;
}
.overlay.hidden{display:none;}
.overlay-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
pointer-events:auto;
}
.pack-sheet{
position:absolute;
left:0;
right:0;
bottom:0;
transform:translateY(25%);
transition:transform .4s cubic-bezier(.2,.8,.2,1);
border-radius:24px 24px 0 0;
background:radial-gradient(circle at 50% 0%, rgba(80,30,160,.9) 0%, rgba(10,2,24,.98) 70%);
border:1px solid rgba(200,160,255,.4);
box-shadow:
0 -24px 60px rgba(0,0,0,.9),
0 0 80px rgba(174,122,255,.6),
inset 0 0 40px rgba(93,42,197,.6);
max-height:90dvh;
min-height:70dvh;
display:flex;
flex-direction:column;
align-items:center;
padding:24px 16px 80px;
pointer-events:auto;
color:#fff;
}
.pack-sheet.open{
transform:translateY(0);
}
.sheet-glow{
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
mix-blend-mode:screen;
opacity:.4;
pointer-events:none;
}
.sheet-handle{
position:absolute;
top:8px;
left:50%;
width:48px;
height:4px;
border-radius:999px;
background:rgba(255,255,255,.4);
box-shadow:0 0 8px rgba(255,255,255,.8);
transform:translateX(-50%);
}
.sheet-section{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
color:#fff;
text-align:center;
}
.envelope-closed{
width:min(320px,80vw);
aspect-ratio:4/3;
background-image:url('envelope.png');
background-size:cover;
background-position:center;
filter:drop-shadow(0 30px 60px rgba(0,0,0,.8))
drop-shadow(0 0 40px rgba(174,122,255,.6));
border-radius:16px;
cursor:pointer;
transition:transform .3s ease, filter .3s ease;
}
.envelope-closed:hover{
transform:scale(1.05);
filter:drop-shadow(0 35px 70px rgba(0,0,0,.9))
drop-shadow(0 0 50px rgba(174,122,255,.8));
}
.envelope-closed:focus-visible{
outline:3px solid rgba(174,122,255,.9);
outline-offset:4px;
border-radius:20px;
}
.swipe-hint{
font-size:clamp(13px,3.2vw,16px);
letter-spacing:.15em;
text-transform:uppercase;
color:var(--muted);
text-shadow:0 0 12px rgba(255,255,255,.5);
line-height:1.6;
margin-top:20px;
animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{
0%, 100%{opacity:.85;}
50%{opacity:1;}
}
.envelope-open{
position:relative;
width:min(360px,85vw);
aspect-ratio:4/3;
border-radius:18px;
background:radial-gradient(80% 60% at 50% 20%, rgba(30,10,60,.98), rgba(8,2,20,.98));
border:1px solid rgba(200,160,255,.35);
box-shadow:
0 50px 120px rgba(0,0,0,.85),
0 0 60px rgba(174,122,255,.5),
inset 0 0 40px rgba(93,42,197,.5);
overflow:hidden;
perspective:1200px;
color:#fff;
}
.env-back{
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 0%, rgba(80,30,160,.4) 0%, rgba(20,5,40,0) 60%);
}
.env-flap{
position:absolute;
left:50%;
top:0%;
width:160%;
height:88%;
background-image:url('envelope.png');
background-size:cover;
background-position:center;
transform:translateX(-50%) rotateX(0deg);
clip-path:polygon(0 0,100% 0, 88% 32%, 50% 60%, 12% 32%);
transform-origin:50% 0%;
animation:flap-open 900ms cubic-bezier(.2,.7,.2,1) forwards .2s;
filter:drop-shadow(0 14px 20px rgba(0,0,0,.8));
}
@keyframes flap-open{
to{
transform:translateX(-50%) rotateX(150deg);
}
}
/* карты вылетают вверх */
.rise-zone{
position:absolute;
inset:0;
overflow:visible;
pointer-events:none;
}
.card-rise{
position:absolute;
left:50%;
bottom:30%;
width:clamp(90px, 24vw, 140px);
height:clamp(130px, 32vw, 190px);
margin-left:-70px;
border-radius:14px;
background:#121226;
border:2px solid rgba(255,212,147,.5);
opacity:0;
transform-origin:50% 100%;
animation:rise 1.3s cubic-bezier(.2,.8,.2,1) forwards;
box-shadow:
0 24px 60px rgba(0,0,0,.9),
0 0 60px rgba(174,122,255,.7),
inset 0 0 24px rgba(255,255,255,.15);
color:#fff;
transition:all .3s ease;
}
.card-rise:hover{
transform:scale(1.1) !important;
box-shadow:
0 32px 80px rgba(0,0,0,.95),
0 0 80px rgba(174,122,255,.9),
inset 0 0 32px rgba(255,255,255,.2);
}
@keyframes rise{
0%{
opacity:0;
transform:translate3d(-50%,40px,0) rotate(0deg) scale(.8);
filter:blur(8px);
}
30%{
opacity:.8;
transform:translate3d(-50%,-40px,0) rotate(-5deg) scale(.95);
filter:blur(4px);
}
60%{
opacity:1;
transform:translate3d(-50%,-100px,0) rotate(-8deg) scale(1);
filter:blur(2px);
}
100%{
opacity:1;
transform:translate3d(-50%,-180px,0) rotate(-2deg) scale(1.05);
filter:blur(0);
}
}
#sparkles{
position:absolute;
inset:0;
pointer-events:none;
}
/* мини-результат */
.result{
margin-top:4px;
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:center;
color:#fff;
text-align:center;
}
.result .mini{
width:110px;
border-radius:10px;
border:1px solid rgba(255,255,255,.35);
padding:6px;
background:rgba(0,0,0,.4);
box-shadow:0 12px 32px rgba(0,0,0,.8),0 0 32px rgba(174,122,255,.4);
font-size:12px;
color:#fff;
}
/* финальный веер */
.reveal{
display:grid;
gap:12px;
justify-items:center;
margin-top:8px;
color:#fff;
}
.reveal.hidden{display:none;}
.fan{
position:relative;
width:min(520px, 90vw);
height:clamp(160px, 34vw, 220px);
perspective:900px;
display:grid;
place-items:center;
}
.card-reveal{
position:absolute;
width:clamp(112px, 22vw, 160px);
height:clamp(150px, 30vw, 210px);
border-radius:16px;
border:3px solid rgba(255,255,255,.5);
background:#0f0f1e center/cover no-repeat;
transform-origin:50% 100%;
box-shadow:
0 28px 80px rgba(0,0,0,.95),
0 0 80px rgba(174,122,255,.7),
inset 0 0 28px rgba(255,255,255,.15);
opacity:0;
transform:translateY(40px) rotate(0deg) scale(.96);
color:#fff;
transition:all .3s cubic-bezier(.4,0,.2,1);
cursor:pointer;
}
.card-reveal:hover{
transform:translateY(-8px) rotate(var(--r,0deg)) scale(1.08) !important;
box-shadow:
0 36px 100px rgba(0,0,0,.98),
0 0 100px rgba(174,122,255,.9),
inset 0 0 36px rgba(255,255,255,.2);
z-index:10;
}
.card-reveal.show{
animation:revealPop .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.card-reveal:nth-child(1){
transform:translate(-34%,16px) rotate(-12deg);
}
.card-reveal:nth-child(2){
transform:translate(0%,0) rotate(0deg);
z-index:2;
}
.card-reveal:nth-child(3){
transform:translate(34%,16px) rotate(12deg);
}
@keyframes revealPop{
0%{
opacity:0;
transform:translateY(60px) rotate(var(--r,0deg)) scale(.7);
filter:blur(10px) brightness(.5);
}
50%{
opacity:.9;
transform:translateY(-10px) rotate(var(--r,0deg)) scale(1.05);
filter:blur(2px) brightness(1.1);
}
100%{
opacity:1;
transform:translateY(0) rotate(var(--r,0deg)) scale(1);
filter:blur(0) brightness(1);
}
}
.reveal-cta{
margin-top:6px;
}
.reveal-cta .btn{
padding:.9rem 1.2rem;
font-weight:700;
white-space:nowrap;
}
/* ===== custom coin + brand 'm' ===== */
.chip-value{
display:flex;
align-items:center;
gap:6px;
}
.coin--m{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #fff 0%, #e8dfff 40%, #b58bff 100%);
box-shadow:0 0 8px rgba(183,149,255,.8),0 8px 16px rgba(0,0,0,.6);
border:1px solid rgba(255,255,255,.4);
}
.coin-img{
width:70%;
height:70%;
object-fit:contain;
filter:drop-shadow(0 0 4px rgba(183,149,255,.8));
}
.nav-item.center{
display:grid;
place-items:center;
transform:translateY(-16px);
/* wrapper no bg now, just holds the icon */
}
.nav-item.center .m-logo{
width:clamp(54px,6.5vh,64px);
height:clamp(54px,6.5vh,64px);
object-fit:contain;
filter:drop-shadow(0 0 20px rgba(183,149,255,.8)) drop-shadow(0 20px 30px rgba(0,0,0,.9));
border-radius:50%;
}
/* override coin--m: use pure SVG bubble, no extra bg */
.coin--m{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:50%;
background:transparent;
box-shadow:none;
border:0;
padding:0;
}
.coin-img{
width:100%;
height:100%;
object-fit:contain;
filter:drop-shadow(0 0 4px rgba(183,149,255,.8));
}
/* === GTM metal logo in header === */
.logo{
width:40px;
height:40px;
border-radius:0;
background:none;
box-shadow:none;
place-items:center;
}
.logo-gtm{
width:40px;
height:40px;
object-fit:contain;
image-rendering:auto;
mix-blend-mode:screen; /* убирает черный фон у логотипа */
filter: drop-shadow(0 0 12px rgba(255,255,255,.25));
}
.brand .name{
letter-spacing:.22em;
}
/* === header GTM tweaks (bigger logo / no season) === */
.logo{
width:52px;
height:52px;
border-radius:0;
background:none;
box-shadow:none;
place-items:center;
}
.logo-gtm{
width:52px;
height:52px;
object-fit:contain;
mix-blend-mode:screen;
filter: drop-shadow(0 0 16px rgba(255,255,255,.3));
}
.brand-text{
display:flex;
flex-direction:column;
justify-content:center;
}
.brand-text .name{
font-size:clamp(18px,2.8vw,20px);
letter-spacing:.24em;
text-shadow:0 0 10px rgba(174,122,255,.7);
}
/* funds button in profile */
.addfund-wrap{
margin-top:8px;
}
.addfund-btn{
font-size:14px;
line-height:1.2;
padding:6px 10px;
}
/* === OVERRIDE: bigger GTM logo & title === */
.logo{
width:64px !important;
height:64px !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
place-items:center !important;
}
.logo-gtm{
width:64px !important;
height:64px !important;
object-fit:contain !important;
mix-blend-mode:screen !important;
filter: drop-shadow(0 0 20px rgba(255,255,255,.35)) !important;
}
.brand-text .name{
font-size:clamp(20px,3vw,22px) !important;
letter-spacing:.28em !important;
text-shadow:0 0 14px rgba(174,122,255,.8) !important;
line-height:1.2 !important;
}
/* === header layout: big logo on top, GTM under === */
.brand.brand-vertical{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:4px;
min-width:72px;
}
.logo{
width:72px !important;
height:72px !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
display:flex;
align-items:center;
justify-content:center;
}
.logo-gtm{
width:72px !important;
height:72px !important;
object-fit:contain !important;
mix-blend-mode:screen !important;
filter: drop-shadow(0 0 24px rgba(255,255,255,.4)) !important;
}
.brand-text{
display:flex;
flex-direction:column;
line-height:1.1;
}
.brand-text .name{
font-size:clamp(22px,3.5vw,24px) !important;
letter-spacing:.28em !important;
text-shadow:0 0 16px rgba(174,122,255,.85) !important;
line-height:1.1 !important;
}
/* === Bigger card tiles === */
.grid{
grid-template-columns:repeat(auto-fit,minmax(clamp(200px,40vw,260px),1fr)) !important;
}
.card-art{
height:clamp(200px,40vw,260px) !important;
}
/* === OVERRIDE v10: huge logo only, no fallback GTM text === */
/* если есть вертикальный бренд-блок */
.brand.brand-vertical{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:0;
min-width:128px;
}
/* сам контейнер лого */
.logo{
width:128px !important;
height:128px !important;
background:none !important;
box-shadow:none !important;
border-radius:0 !important;
display:flex;
align-items:center;
justify-content:center;
}
/* сам значок GTM */
.logo-gtm{
width:128px !important;
height:128px !important;
object-fit:contain !important;
filter:
drop-shadow(0 0 32px rgba(255,255,255,.8))
drop-shadow(0 0 60px rgba(174,122,255,.5))
!important;
}
/* скрываем любые подписи с текстом GTM в шапке */
.brand-text,
.brand-text .name,
.top-bar .brand .name {
display:none !important;
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
text-shadow:none !important;
}
/* === OVERRIDE v11: smaller logo, bigger chips === */
/* лого меньше чем 128, но всё ещё заметное */
.brand.brand-vertical{
min-width:88px;
gap:0;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
}
.logo{
width:88px !important;
height:88px !important;
background:none !important;
box-shadow:none !important;
border-radius:0 !important;
display:flex;
align-items:center;
justify-content:center;
}
.logo-gtm{
width:88px !important;
height:88px !important;
object-fit:contain !important;
filter:
drop-shadow(0 0 24px rgba(255,255,255,.8))
drop-shadow(0 0 40px rgba(174,122,255,.5))
!important;
}
/* текст бренда не показываем */
.brand-text,
.brand-text .name,
.topbar .brand .name{
display:none !important;
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
text-shadow:none !important;
}
/* делаем баланс/лимит крупнее и жирнее */
.chip{
padding:8px 14px !important;
border-radius:12px !important;
font-size:12px !important;
}
.chip-value{
gap:6px !important;
}
.chip-balance .chip-value{
font-size:24px !important;
line-height:1 !important;
font-family:'Teko',sans-serif !important;
font-weight:600 !important;
}
.chip-left .chip-value{
font-size:20px !important;
line-height:1 !important;
font-family:'Teko',sans-serif !important;
font-weight:600 !important;
}
.chip .m{
min-width:20px !important;
height:20px !important;
padding:0 6px !important;
font-size:12px !important;
font-weight:600 !important;
}
/* === v15 bottom nav fix === */
.nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(
circle at 50% -20%,
rgba(180,120,255,.28) 0%,
rgba(20,0,40,.9) 60%
);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,.12);
box-shadow:
0 -24px 48px rgba(0,0,0,.9),
0 0 80px rgba(176,130,255,.4);
z-index: 9999;
--tabbar-h: 88px;
min-height: var(--tabbar-h);
border-radius: 20px 20px 0 0;
margin: 0 auto;
max-width: 480px;
}
body {
padding-bottom: calc(88px + 24px);
background-color: #0a0514;
}
/* === v15 fullscreen stat panel === */
.panel {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.panel::before {
content: '';
position: absolute;
inset: 0;
background: rgba(5,0,20,.6);
backdrop-filter: blur(16px);
}
.panel-main {
position: relative;
background:
radial-gradient(
circle at 30% 0%,
rgba(200,160,255,.12) 0%,
rgba(10,0,30,.9) 60%
);
border: 1px solid rgba(255,255,255,.12);
box-shadow:
0 -24px 48px rgba(0,0,0,.9),
0 0 80px rgba(176,130,255,.4);
border-radius: 24px 24px 0 0;
max-height: 80vh;
min-height: 60vh;
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 16px 16px 32px 16px;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
color:#fff;
font-family: 'Inter', system-ui, sans-serif;
}
.panel-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:clamp(10px, 2.5vw, 12px);
margin-bottom:clamp(12px, 3vw, 16px);
color:#fff;
font-weight:600;
letter-spacing:.05em;
font-size:clamp(12px, 3vw, 14px);
text-transform:uppercase;
flex-wrap:wrap;
}
@media(max-width:480px){
.panel-head{
gap:clamp(8px, 2vw, 10px);
margin-bottom:clamp(10px, 2.5vw, 12px);
font-size:clamp(11px, 2.75vw, 12px);
}
}
.panel-back {
appearance:none;
background:rgba(255,255,255,.07);
border:clamp(1px, 0.25vw, 1px) solid rgba(255,255,255,.18);
border-radius:clamp(8px, 2vw, 10px);
padding:clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 12px);
font-size:clamp(12px, 3vw, 13px);
font-weight:500;
color:#fff;
line-height:1;
text-shadow:0 0 8px rgba(176,130,255,.6);
cursor:pointer;
touch-action:manipulation;
transition:all .2s ease;
}
.panel-back:hover{
background:rgba(255,255,255,.12);
transform:translateX(-2px);
}
@media(max-width:480px){
.panel-back{
padding:clamp(5px, 1.25vw, 6px) clamp(8px, 2vw, 10px);
font-size:clamp(11px, 2.75vw, 12px);
}
}
.panel-body {
font-size:clamp(13px, 3.25vw, 14px);
line-height:1.4;
color:#cfc7f9;
flex:1;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
padding:clamp(12px, 3vw, 16px);
min-height:0;
box-sizing:border-box;
overscroll-behavior:contain;
position:relative;
}
@media(max-width:480px){
.panel-body{
padding:clamp(10px, 2.5vw, 12px);
font-size:clamp(12px, 3vw, 13px);
}
}
#panel-achv .panel-body{
padding-top:clamp(4px, 1vw, 8px);
padding-bottom:calc(clamp(20px, 5vw, 28px) + env(safe-area-inset-bottom));
padding-left:clamp(10px, 2.5vw, 14px);
padding-right:clamp(10px, 2.5vw, 14px);
margin-bottom:0;
flex:1;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
scroll-padding-top:0;
}
.panel.open {
opacity:1;
pointer-events:auto;
}
.panel.open .panel-main {
transform: translateY(0);
}
/* === v16 panel safari-friendly & above tabbar === */
.panel{
position:fixed;
inset:0;
z-index:999999; /* выше таббара */
opacity:0;
pointer-events:none;
transition:opacity .25s ease;
}
.panel::before{
content:'';
position:absolute;
inset:0;
background:rgba(5,0,20,.6);
backdrop-filter:blur(16px);
}
/* сам лист теперь позиционируем через bottom:0,
задаём фиксированную высоту, а не min-height для iOS */
.panel-main{
position:absolute;
left:0;
right:0;
bottom:0;
height:85vh;
max-height:85vh;
min-height:60vh;
background:
radial-gradient(
circle at 30% 0%,
rgba(200,160,255,.12) 0%,
rgba(10,0,30,.9) 60%
);
border:1px solid rgba(255,255,255,.12);
display:flex;
flex-direction:column;
overflow:hidden;
box-sizing:border-box;
box-shadow:
0 -24px 48px rgba(0,0,0,.9),
0 0 80px rgba(176,130,255,.4);
border-radius:24px 24px 0 0;
padding:16px 16px calc(16px + env(safe-area-inset-bottom));
display:flex;
flex-direction:column;
overflow:hidden; /* Убираем overflow-y отсюда, переносим в panel-body */
color:#fff;
font-family:'Inter',system-ui,sans-serif;
transform:translateY(100%);
transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
color:#fff;
font-weight:600;
letter-spacing:.05em;
font-size:14px;
text-transform:uppercase;
}
.panel-back{
appearance:none;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.18);
border-radius:10px;
padding:8px 12px;
font-size:13px;
font-weight:500;
color:#fff;
line-height:1;
text-shadow:0 0 8px rgba(176,130,255,.6);
}
.panel-body{
font-size:14px;
line-height:1.4;
color:#cfc7f9;
}
.panel.open{
opacity:1;
pointer-events:auto;
}
.panel.open .panel-main{
transform:translateY(0);
}
/* === stats panel extras (auto-added) === */
#panel-stats .extra { margin-top:16px; }
#panel-stats .sub { margin-top:8px; color:var(--muted); font-size:0.9rem; }
#panel-stats .progress {
margin-top:8px;
height:10px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
overflow:hidden;
}
#panel-stats .progress .bar {
height:100%;
width:0%;
background:linear-gradient(90deg, #a78bfa, #c084fc);
}
/* === end stats panel extras === */
.card-modal-overlay{
position:fixed;
z-index:999999;
inset:0;
background:rgba(5,0,20,.95);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
display:flex;
align-items:center;
justify-content:center;
pointer-events:auto;
opacity:0;
transition:opacity .3s ease;
}
.card-modal-overlay.open{
opacity:1;
}
.card-modal-content{
position:relative;
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:clamp(20px, 5vw, 40px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.card-modal-content.fullscreen-card-modal{
max-width:100%;
max-height:100%;
}
.card-modal-wrapper{
width:100%;
max-width:clamp(320px, 90vw, 600px);
display:flex;
flex-direction:column;
align-items:center;
gap:clamp(24px, 6vw, 40px);
position:relative;
}
.card-modal-image-container{
position:relative;
width:100%;
max-width:clamp(280px, 70vw, 500px);
aspect-ratio:116/152;
display:flex;
align-items:center;
justify-content:center;
}
.card-modal-bigart{
width:100%;
height:100%;
border-radius:clamp(20px, 5vw, 28px);
background:#222 center/cover no-repeat;
border:clamp(3px, 0.8vw, 4px) solid rgba(255,255,255,.3);
box-shadow:
0 20px 60px rgba(0,0,0,.8),
0 0 80px rgba(174,122,255,.4),
inset 0 0 40px rgba(255,255,255,.1);
position:relative;
z-index:2;
transition:transform .3s ease;
}
.card-modal-overlay.open .card-modal-bigart{
animation:cardModalAppear .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes cardModalAppear{
0%{
opacity:0;
transform:scale(0.8) rotateY(-10deg);
}
100%{
opacity:1;
transform:scale(1) rotateY(0deg);
}
}
.card-modal-glow{
position:absolute;
inset:-20%;
border-radius:50%;
filter:blur(40px);
opacity:0.6;
z-index:1;
animation:cardGlowPulse 3s ease-in-out infinite;
}
@keyframes cardGlowPulse{
0%, 100%{
opacity:0.6;
transform:scale(1);
}
50%{
opacity:0.9;
transform:scale(1.1);
}
}
.card-modal-details{
text-align:center;
color:#fff;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:clamp(12px, 3vw, 20px);
}
.card-modal-title{
font-size:clamp(24px, 6vw, 36px);
font-weight:800;
letter-spacing:.05em;
text-shadow:0 0 20px rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.5);
line-height:1.2;
}
.card-modal-rarity{
margin-top:4px;
padding:clamp(8px, 2vw, 12px) clamp(16px, 4vw, 24px);
border-radius:12px;
font-size:clamp(12px, 3vw, 16px);
font-weight:700;
display:inline-block;
text-transform:uppercase;
letter-spacing:.15em;
border:2px solid;
box-shadow:0 0 20px rgba(0,0,0,.4), inset 0 0 20px rgba(255,255,255,.1);
text-shadow:0 0 12px currentColor;
}
.card-modal-id{
font-size:clamp(14px, 3.5vw, 18px);
opacity:.7;
margin-top:4px;
font-weight:600;
}
.card-modal-stats{
display:flex;
gap:clamp(16px, 4vw, 24px);
margin-top:clamp(16px, 4vw, 24px);
padding:clamp(16px, 4vw, 24px);
background:rgba(0,0,0,.4);
border-radius:16px;
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(10px);
width:100%;
max-width:400px;
justify-content:space-around;
}
.card-stat-item{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
flex:1;
}
.card-stat-icon{
font-size:clamp(24px, 6vw, 32px);
filter:drop-shadow(0 0 8px rgba(255,255,255,.5));
}
.card-stat-value{
font-size:clamp(20px, 5vw, 28px);
font-weight:800;
font-family:'Teko',sans-serif;
color:#fff;
text-shadow:0 0 12px rgba(174,122,255,.8);
}
.card-stat-label{
font-size:clamp(10px, 2.5vw, 12px);
text-transform:uppercase;
letter-spacing:.1em;
opacity:.8;
color:#fff;
}
.card-modal-close{
position:fixed;
top:clamp(16px, 4vw, 24px);
right:clamp(16px, 4vw, 24px);
font-size:clamp(36px, 9vw, 48px);
line-height:1;
width:clamp(48px, 12vw, 64px);
height:clamp(48px, 12vw, 64px);
padding:0;
background:rgba(0,0,0,.5);
border:2px solid rgba(255,255,255,.2);
border-radius:50%;
color:#fff;
cursor:pointer;
z-index:999999;
opacity:.9;
transition:all .2s ease;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(10px);
box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.card-modal-close:hover{
opacity:1;
background:rgba(255,80,80,.8);
border-color:rgba(255,255,255,.4);
transform:scale(1.1) rotate(90deg);
}
@media (max-width: 600px){
.card-modal-wrapper{
gap:20px;
}
.card-modal-stats{
flex-direction:column;
gap:12px;
}
.card-stat-item{
flex-direction:row;
justify-content:space-between;
width:100%;
}
}
.card-preview[data-rarity="gray"] {
border-color: #8a847e;
box-shadow:0 0 clamp(12px, 3vw, 16px) #8a847e66, 0 clamp(4px, 1vw, 6px) clamp(12px, 3vw, 16px) rgba(0,0,0,.4);
}
.card-preview[data-rarity="blue"] {
border-color: #5b9baf;
box-shadow:0 0 clamp(12px, 3vw, 16px) #5b9baf66, 0 clamp(4px, 1vw, 6px) clamp(12px, 3vw, 16px) rgba(0,0,0,.4);
}
.card-preview[data-rarity="dark_blue"] {
border-color: #45518e;
box-shadow:0 0 clamp(14px, 3.5vw, 18px) #45518e77, 0 clamp(4px, 1vw, 6px) clamp(12px, 3vw, 16px) rgba(0,0,0,.4);
}
.card-preview[data-rarity="green"] {
border-color: #406e34;
box-shadow:0 0 clamp(14px, 3.5vw, 18px) #406e3477, 0 clamp(4px, 1vw, 6px) clamp(12px, 3vw, 16px) rgba(0,0,0,.4);
}
.card-preview[data-rarity="purple"] {
border-color: #6c4f8e;
box-shadow:0 0 clamp(16px, 4vw, 20px) #6c4f8e88, 0 clamp(4px, 1vw, 6px) clamp(12px, 3vw, 16px) rgba(0,0,0,.4);
}
.card-preview[data-rarity="gold"] {
border-color: #ddb034;
box-shadow:0 0 clamp(18px, 4.5vw, 24px) #ddb03499, 0 clamp(6px, 1.5vw, 8px) clamp(16px, 4vw, 20px) rgba(0,0,0,.5);
}
.card-preview .rarity[data-rarity="gray"] {
background:linear-gradient(135deg, rgba(138,132,126,.3), rgba(138,132,126,.15));
color:#8a847e;
border-color:#8a847e66;
}
.card-preview .rarity[data-rarity="blue"] {
background:linear-gradient(135deg, rgba(91,155,175,.3), rgba(91,155,175,.15));
color:#5b9baf;
border-color:#5b9baf66;
}
.card-preview .rarity[data-rarity="dark_blue"] {
background:linear-gradient(135deg, rgba(69,81,142,.35), rgba(69,81,142,.2));
color:#45518e;
border-color:#45518e77;
}
.card-preview .rarity[data-rarity="green"] {
background:linear-gradient(135deg, rgba(64,110,52,.35), rgba(64,110,52,.2));
color:#406e34;
border-color:#406e3477;
}
.card-preview .rarity[data-rarity="purple"] {
background:linear-gradient(135deg, rgba(108,79,142,.4), rgba(108,79,142,.25));
color:#6c4f8e;
border-color:#6c4f8e88;
}
.card-preview .rarity[data-rarity="gold"] {
background:linear-gradient(135deg, rgba(221,176,52,.45), rgba(221,176,52,.3));
color:#ddb034;
border-color:#ddb03499;
text-shadow:0 0 clamp(8px, 2vw, 12px) #ddb034, 0 1px 3px rgba(0,0,0,.8);
}
.card-preview{
background:linear-gradient(140deg,#0e0a15 60%,#211a33 100%);
border-width:3px;
box-sizing:border-box;
margin-bottom:4px;
min-width:116px; max-width:128px; min-height:148px; max-height:178px;
width:124px; height:164px;
display:flex; flex-direction:column;align-items:center; justify-content:flex-start;
overflow:hidden;
}
.card-preview .card-art{
width:92px;height:92px;
border-radius:10px;
margin:6px 0 4px 0;
background-size:cover !important;
background-position:center !important;
background-color:#181429;
border:1.5px solid #fff4;
box-shadow:0 3px 12px #01020525;
}
.card-preview .card-top{
width:100%; display:flex; justify-content:space-between;align-items:center;padding:2px 2px 0 2px;font-size:12px;line-height:1;}
.card-preview .card-number{font-size:10px;font-weight:600;color:#dad8df;background:none;text-shadow:0 1px 4px #110a1b77;}
.card-preview .rarity{
padding:0 8px;
font-size:11px;
border-radius:8px;
font-weight:700;
background:rgba(59,39,81,.08);
margin-left:auto;
margin-bottom:1px;
transition:background .18s;
}
.card-preview .card-footer{margin-top:auto; font-size:11.3px; text-align:center; width:100%; color:#fff;line-height:1.12;}
.card-preview .card-name{font-weight:600;color:#fff;text-align:center;font-size:12px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0;}
.grid{gap:24px 19px; padding-bottom:82px;}
@media (max-width:600px){
.card-preview{width:90vw;max-width:128px;min-width:80px;height:22vw;max-height:174px;}
.grid{gap:15px 8px;}
}
/* === Seamless gradients across screens === */
.screens{ background:transparent !important; }
.screen{ background:transparent !important; }
/* strengthen global fixed layers to avoid seams */
.app::before{ left:0; right:0; top:0; height:340px; }
.app::after{ left:0; right:0; bottom:0; top:auto; height:520px; }
/* Remove any visible top seams on panels */
.panel{ border-top:0 !important; }
.panel-head{ border-bottom:1px solid rgba(255,255,255,.08) !important; }
/* Stats readability tweaks */
#panel-stats .panel-body{ padding:14px 14px 18px 14px !important; }
#panel-stats .row{ background:rgba(0,0,0,.32) !important; border-color:rgba(255,255,255,.14) !important; }
#panel-stats .progress{ background:rgba(255,255,255,.10) !important; }
#panel-stats .progress span, #pStatBar{ box-shadow:0 0 18px rgba(167,139,250,.45) !important; }
/* === Bottom nav: active tab animated pill glow === */
.nav-item{ position:relative; }
.nav-item .liquid-glass{ display:none; } /* retire previous blob */
.nav-item::after{
content:"";
position:absolute; left:50%; bottom:8px; transform:translateX(-50%) scale(.6);
width:44px; height:18px; border-radius:999px; opacity:0; pointer-events:none;
background:radial-gradient(circle at 50% 30%, rgba(190,160,255,.35) 0%, rgba(140,100,255,.18) 60%, rgba(140,100,255,0) 100%);
box-shadow:0 0 24px rgba(174,122,255,.65), 0 8px 24px rgba(0,0,0,.6);
transition:opacity .22s ease, transform .22s ease;
}
.nav-item.active::after{ opacity:1; transform:translateX(-50%) scale(1); }
/* keep the center m aligned */
.nav-item.center{ display:flex; align-items:center; justify-content:center; }
.nav-item.center .m-logo{ display:block; margin:0 auto; }
/* === Seam killer: stronger mid-blend === */
.app{ isolation:isolate; }
.app::before{ z-index:-2; }
.app::after{ z-index:-2; }
/* extra central blend layer */
.app::marker{ content:""; display:none; }
.app::selection{ background:transparent; }
.app::shadow{ content:""; display:none; }
/* Use an additional overlay via body:after for middle blend */
body::after{
content:"";
position:fixed; inset:0; pointer-events:none; z-index:-2;
background:
radial-gradient(1200px 800px at 50% 48%, rgba(25,10,40,.16) 0%, rgba(25,10,40,.08) 35%, rgba(25,10,40,0) 70%),
linear-gradient(to bottom, rgba(0,0,0,0) 49%, rgba(10,4,24,.05) 50%, rgba(0,0,0,0) 51%);
filter:blur(22px);
}
/* === Bottom nav active: glow + animated shimmer === */
@keyframes tabShine{ 0%{transform:translateX(-120%) scaleX(.6);} 100%{transform:translateX(120%) scaleX(1);} }
.nav-item{ position:relative; overflow:visible; }
.nav-item.active::after{
content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
width:54px; height:20px; border-radius:999px; pointer-events:none;
background:radial-gradient(circle at 50% 40%, rgba(190,160,255,.45) 0%, rgba(140,100,255,.20) 60%, rgba(140,100,255,0) 100%);
box-shadow:0 0 24px rgba(174,122,255,.6), 0 8px 26px rgba(0,0,0,.6);
}
.nav-item.active::before{
content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
width:54px; height:20px; border-radius:999px; overflow:hidden; pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
filter:blur(4px); opacity:.65; animation:tabShine 1.6s ease-in-out infinite;
}
/* === Nav active: красивая рамка и подсветка === */
.nav-item.active::after{
display:none; /* Убираем старый эффект снизу */
}
/* === Bottom nav: Liquid Glass effect for active tab === */
.nav-item.active::after{
content:"";
position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
width:56px; height:22px; border-radius:999px; pointer-events:none;
background:
radial-gradient(80% 120% at 30% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border:1px solid rgba(255,255,255,.24);
box-shadow: 0 0 26px rgba(174,122,255,.55), 0 10px 26px rgba(0,0,0,.65), inset 0 0 24px rgba(255,255,255,.08);
}
/* === Rarity filter - glassy select === */
#rarityFilter{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding:10px 38px 10px 12px !important;
border-radius:12px !important;
border:1px solid rgba(255,255,255,.28) !important;
background:
radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0) 100%),
rgba(10,0,30,.45) !important;
color:#fff !important;
box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 0 18px rgba(255,255,255,.06);
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
outline:none;
cursor:pointer;
position:relative;
}
#rarityFilter:focus{
border-color:rgba(170,140,255,.65) !important;
box-shadow:0 0 0 2px rgba(170,140,255,.35), 0 14px 30px rgba(0,0,0,.6), inset 0 0 20px rgba(170,140,255,.12);
}
/* custom arrow */
#rarityFilter{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:18px 18px;
}
/* hide default chevron in IE/Edge */
#rarityFilter::-ms-expand{ display:none; }
/* Option colors (support varies, but safe for text color) */
#rarityFilter option{ background:#1a0f2e; color:#e9e6ff; }
#rarityFilter option[value="gray"]{ color:#8a847e; }
#rarityFilter option[value="blue"]{ color:#5b9baf; }
#rarityFilter option[value="green"]{ color:#406e34; }
#rarityFilter option[value="dark_blue"]{ color:#45518e; }
#rarityFilter option[value="purple"]{ color:#6c4f8e; }
#rarityFilter option[value="gold"]{ color:#ddb034; }
/* hide Stats/Achievements tiles per request */
.tiles{ display:none !important; }
/* === PROFILE: tidy layout + subtle animated background shimmer === */
.profile{
position:relative !important;
overflow:hidden !important;
}
.profile::after{
content:"";
position:absolute; inset:-20%; z-index:-1; pointer-events:none;
background:
radial-gradient(50% 40% at 20% 20%, rgba(167,139,250,.12) 0%, rgba(167,139,250,0) 60%),
radial-gradient(60% 50% at 80% 70%, rgba(126,219,255,.10) 0%, rgba(126,219,255,0) 60%);
animation:profileShimmer 9s ease-in-out infinite alternate;
filter: blur(12px);
}
@keyframes profileShimmer{
0%{ transform:translate3d(-4%, -2%, 0) scale(1); opacity:.65; }
50%{ transform:translate3d(2%, 1%, 0) scale(1.03); opacity:.85; }
100%{ transform:translate3d(4%, 3%, 0) scale(1.06); opacity:.7; }
}
/* tidy spacing in profile right info */
.info{ gap:8px !important; }
.info .name{ margin-bottom:2px !important; }
.row{ gap:8px !important; }
#btnAddFunds{ margin-top:4px !important; }
/* stat cards tighter vertical rhythm */
.stats{ padding:14px !important; gap:14px !important; }
.stat{ padding:16px !important; }
/* progress bar crisp */
.progress{ height:10px !important; border-radius:999px !important; }
.progress span{ border-radius:999px !important; }
/* === PROFILE animated background visibility fix === */
.profile{ position:relative !important; overflow:hidden !important; z-index:0; }
.profile::after{
content:""; position:absolute; inset:-25%; pointer-events:none; z-index:0;
background:
radial-gradient(50% 40% at 20% 20%, rgba(167,139,250,.12) 0%, rgba(167,139,250,0) 60%),
radial-gradient(60% 50% at 80% 70%, rgba(126,219,255,.10) 0%, rgba(126,219,255,0) 60%);
animation:profileShimmer 10s ease-in-out infinite alternate;
filter: blur(14px);
opacity:.9;
}
.profile > *{ position:relative; z-index:1; }
/* === Custom glass select (replaces native select) === */
.c-select{ position:relative; display:inline-block; }
.c-select__btn{
display:flex; align-items:center; gap:8px;
padding:10px 12px; min-width:160px;
border-radius:12px; border:1px solid rgba(255,255,255,.28);
background:radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0) 100%), rgba(10,0,30,.45);
box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 0 18px rgba(255,255,255,.06);
backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
color:#fff; cursor:pointer; user-select:none;
}
.c-select__btn .arrow{ margin-left:auto; width:16px; height:16px; opacity:.8; }
.c-select__menu{
position:absolute; left:0; right:auto; top:calc(100% + 6px);
background:radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0) 100%), rgba(10,0,30,.65);
border:1px solid rgba(255,255,255,.24); border-radius:12px;
box-shadow:0 20px 40px rgba(0,0,0,.65), inset 0 0 18px rgba(255,255,255,.06);
color:#fff; padding:6px; display:none; min-width:180px; z-index:20;
backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.c-select.open .c-select__menu{ display:block; }
.c-select__item{ padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.c-select__item:hover{ background:rgba(255,255,255,.08); }
.c-select__dot{ width:10px; height:10px; border-radius:50%; }
/* rarity colors for dots/text */
.csel-gray{ color:#8a847e; } .csel-gray .c-select__dot{ background:#8a847e; }
.csel-blue{ color:#5b9baf; } .csel-blue .c-select__dot{ background:#5b9baf; }
.csel-green{ color:#406e34; } .csel-green .c-select__dot{ background:#406e34; }
.csel-dark_blue{ color:#45518e; } .csel-dark_blue .c-select__dot{ background:#45518e; }
.csel-purple{ color:#6c4f8e; } .csel-purple .c-select__dot{ background:#6c4f8e; }
.csel-gold{ color:#ddb034; } .csel-gold .c-select__dot{ background:#ddb034; }
/* === Global animated gradient flow (subtle) === */
@keyframes gradFlow{
0%{ transform:translate3d(-2%, -1%, 0) scale(1); opacity:.85; }
50%{ transform:translate3d(1%, 1%, 0) scale(1.02); opacity:.92; }
100%{ transform:translate3d(2%, 2%, 0) scale(1.04); opacity:.88; }
}
.app::before,
.app::after{
will-change:transform, opacity;
animation:gradFlow 38s ease-in-out infinite alternate;
}
@keyframes spinGrad{ to{ transform:rotate(360deg) scale(1.02); } }
.app::before{
background:
var(--bg-top),
conic-gradient(from 0deg at 50% 50%,
rgba(167,139,250,.10) 0deg,
rgba(126,219,255,.08) 90deg,
rgba(221,176,52,.07) 180deg,
rgba(108,79,142,.08) 270deg,
rgba(167,139,250,.10) 360deg);
mix-blend-mode:screen;
animation: gradFlow 36s ease-in-out infinite alternate, spinGrad 120s linear infinite;
will-change: transform, opacity;
opacity:.9;
}
/* === Visible animated gradient background (always-on) === */
@keyframes bgShift{
0%{ transform:translate3d(-3%, -2%, 0) rotate(0deg) scale(1.02); opacity:.35; }
50%{ transform:translate3d(2%, 1%, 0) rotate(90deg) scale(1.05); opacity:.45; }
100%{ transform:translate3d(3%, 3%, 0) rotate(180deg) scale(1.08); opacity:.38; }
}
body::before{
content:""; position:fixed; inset:-20%; pointer-events:none; z-index:-1;
background:
radial-gradient(60% 40% at 20% 10%, rgba(126,219,255,.18) 0%, rgba(126,219,255,0) 70%),
radial-gradient(50% 40% at 85% 80%, rgba(167,139,250,.16) 0%, rgba(167,139,250,0) 70%),
conic-gradient(from 0deg at 50% 50%,
rgba(167,139,250,.12) 0deg,
rgba(221,176,52,.10) 120deg,
rgba(91,155,175,.10) 240deg,
rgba(167,139,250,.12) 360deg);
filter: blur(26px);
mix-blend-mode: screen;
animation: bgShift 48s ease-in-out infinite alternate;
}
/* === Profile tidy rows and values === */
.stats{ gap:12px !important; }
.stat{ display:grid !important; grid-template-rows:auto 1fr !important; }
.stat .label{ opacity:.85 !important; }
.stat .value{ font-size:36px !important; font-weight:800 !important; }
/* profile header box spacing */
.profile{ grid-template-columns: auto 1fr !important; gap:18px !important; }
.info{ gap:8px !important; }
.info .name{ font-size:20px !important; font-weight:800 !important; }
.row{ justify-content:flex-start !important; }
/* === Responsive tweaks === */
@media (max-width: 480px){
.screens{ padding-left:12px; padding-right:12px; padding-bottom:calc(var(--navH) + var(--safe-bottom) + 14px); }
.grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.card-preview{ width:100%; height:168px; }
.card-preview .card-art{ width:calc(100% - 22px); height:112px; }
.card-preview .card-top{ font-size:10px; }
.card-preview .card-name{ font-size:12px; }
.card-preview .card-fraction{ font-size:13px; }
.h-carousel{ min-height:220px; }
.nav{ --tabbar-h: 82px; min-height:var(--tabbar-h); }
/* Адаптивность topbar */
.topbar{
padding:6px 8px;
gap:4px 6px;
flex-wrap:wrap;
align-items:center;
}
.badges{
flex-wrap:wrap;
gap:4px;
width:100%;
justify-content:flex-end;
}
.chip{
padding:4px 8px;
font-size:9px;
}
.chip-balance .chip-value{ font-size:16px; }
.chip-shards .chip-value{ font-size:14px; }
.chip-left .chip-value{ font-size:14px; }
/* Адаптивность апгрейдов */
#upgradeCardList{
grid-template-columns:1fr !important;
gap:12px;
justify-items:stretch;
}
.upgrade-card{
border-radius:16px;
max-width:100%;
}
.upgrade-card .card-info{
padding:12px;
gap:8px;
align-items:center;
}
.upgrade-card .card-name{ font-size:16px; text-align:center; }
.upgrade-card .card-rarity{
font-size:10px;
padding:3px 8px;
margin:0 auto;
text-align:center;
}
.upgrade-card .card-stats{
font-size:11px;
padding:6px 8px;
text-align:center;
}
.upgrade-chance{
font-size:12px;
padding:6px 10px;
width:100%;
justify-content:center;
}
.upgrade-cost{
font-size:12px;
padding:5px 8px;
width:100%;
justify-content:center;
}
.upgrade-btn{
padding:10px 12px;
font-size:13px;
width:100%;
}
/* Адаптивность панелей */
.panel-body{ padding:12px; }
.booster-item{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.booster-action{
width:100%;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
}
@media (max-width: 360px){
.grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.card-preview{ height:154px; }
.card-preview .card-art{ height:100px; }
.chip-balance .chip-value{ font-size:16px; }
.chip-shards .chip-value{ font-size:13px; }
.chip-left .chip-value{ font-size:13px; }
.chip-label{ font-size:7px; }
.topbar{ padding:4px 6px; }
.brand-text .name{ font-size:14px; }
}
@media (min-width: 481px) and (max-width: 767px){
#upgradeCardList{
grid-template-columns:repeat(2, 1fr) !important;
gap:14px;
}
.badges{ gap:6px; }
.chip-shards .chip-value{ font-size:16px; }
}
@media (min-width: 768px){
.grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#upgradeCardList{
grid-template-columns:repeat(2, 1fr) !important;
gap:20px;
justify-items:center;
}
.upgrade-card{ max-width:100%; }
.topbar{ padding:10px 16px; }
.badges{ gap:8px; }
.chip-shards .chip-value{ font-size:17px; }
}
@media (min-width: 1024px){
.grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
#upgradeCardList{
grid-template-columns:repeat(3, 1fr) !important;
gap:24px;
justify-items:center;
}
.upgrade-card{ max-width:100%; }
.topbar{ max-width:1400px; }
.chip-shards .chip-value{ font-size:18px; }
}
/* === Force 2 cards per row on small screens (All Cards) === */
@media (max-width: 520px){
#allGrid{ display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; }
#allGrid .card-preview{ width:auto !important; }
#allGrid .card-art{ width:100% !important; }
}
/* show Stats/Achievements tiles back */
.tiles{ display:grid !important; }
.tile.profile-tile[data-open="stats"]{ display:none !important; }
/* ===== Missing Cards Carousel — Full-Fit & Smooth ===== */
.h-carousel{
overflow: hidden;
position: relative;
border-radius: 20px;
/* edge fading so cards appear from one side gracefully */
-webkit-mask-image: linear-gradient(90deg, transparent 0% 4%, #000 10% 90%, transparent 96% 100%);
mask-image: linear-gradient(90deg, transparent 0% 4%, #000 10% 90%, transparent 96% 100%);
}
.h-carousel .track{
animation: hmarquee var(--spd, 36s) linear infinite;
will-change: transform;
display: flex;
gap: 16px;
padding-right: 96px !important;
}
@keyframes hmarquee{
0%{ transform: translate3d(0,0,0); }
100%{ transform: translate3d(-50%,0,0); }
}
/* Card sizing with true card aspect ratio (116x152 like grid) */
.vcard{
flex: 0 0 auto;
width: clamp(132px, 32vw, 176px);
}
.vcard-card{
width: 100%;
aspect-ratio: 116 / 152;
height: auto;
display: block;
border-radius: 16px;
overflow: hidden;
position: relative;
}
/* Image must fully fit (no cropping) */
.vcard-img{
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: #1a1a2a;
}
.vcard-img .vci{
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px; /* small inner gap so whole card is visible */
display: block;
}
/* Keep subtle foot overlay but make it lighter to not hide image */
.vcard-foot{
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%);
padding: 10px;
}
/* ===== NAV BAR — Polished Glass Redesign (Overrides) ===== */
.nav{
position: fixed;
left: 16px;
right: 16px;
bottom: calc(12px + var(--safe-bottom));
height: var(--navH);
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
padding: 14px 18px;
border-radius: 22px;
background: rgba(22, 10, 40, 0.60);
border: 1px solid rgba(255,255,255,0.20);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
box-shadow:
0 -10px 30px rgba(0,0,0,.55),
0 0 40px rgba(168,109,255,.35),
inset 0 0 32px rgba(255,255,255,.05);
color: #fff;
z-index: 50;
isolation: isolate;
}
.nav::before{
content:"";
position:absolute;
inset: 1px;
border-radius: 21px;
background: radial-gradient(100% 120% at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
pointer-events:none;
}
.nav::after{
content:"";
position:absolute;
left: 50%;
transform: translateX(-50%);
bottom: -22px;
width: 70%;
height: 46px;
background: radial-gradient(60% 100% at 50% 0%, rgba(140,90,255,.35) 0%, rgba(10,4,24,0) 70%);
filter: blur(12px);
pointer-events:none;
z-index:-1;
}
.nav-item{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
height: 100%;
text-align: center;
color: rgba(255,255,255,.78);
text-decoration: none;
text-transform: uppercase;
letter-spacing: .18em;
font-size: 10px;
font-weight: 700;
transition: transform .18s ease, color .18s ease, filter .18s ease;
will-change: transform, filter;
}
.nav-item:hover{ color:#fff; transform: translateY(-2px); }
.nav-item.active{
color:#fff !important;
font-weight: 700;
text-shadow: 0 0 8px rgba(255,255,255,.5);
}
/* Убираем голубой цвет для всех элементов навигации */
.nav-item,
.nav-item span{
color: rgba(255,255,255,.75) !important;
}
.nav-item.active,
.nav-item.active span{
color: #fff !important;
}
.nav-item .ico{
width: 22px; height: 22px;
display: inline-block;
opacity: .92;
filter: drop-shadow(0 0 6px rgba(174,122,255,.45));
transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.nav-item:hover .ico,
.nav-item.active .ico{
transform: translateY(-1px) scale(1.08);
opacity: 1;
filter: drop-shadow(0 0 10px rgba(255,255,255,.6)) drop-shadow(0 0 15px rgba(174,122,255,.4));
}
.nav-item.active::before{
content:"";
position:absolute;
inset: 4px 6px;
border-radius: 16px;
background: linear-gradient(135deg,
rgba(174,122,255,.2) 0%,
rgba(126,219,255,.15) 30%,
rgba(108,79,142,.2) 60%,
rgba(174,122,255,.15) 100%);
background-size: 200% 200%;
animation: navGradientFlow 4s ease infinite;
box-shadow:
0 0 30px rgba(174,122,255,.25),
inset 0 0 25px rgba(255,255,255,.08);
z-index: -1;
pointer-events:none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Убираем обводку полностью */
border: none;
outline: none;
}
/* Убираем все возможные обводки */
.nav-item.active{
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.nav-item.active::after{
display: none !important;
}
@keyframes navGradientFlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Падающие частицы для активного элемента */
.nav-item.active::after{
content:"";
position:absolute;
inset: 0;
border-radius: 16px;
background-image:
radial-gradient(circle at 20% 30%, rgba(174,122,255,.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(126,219,255,.25) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(108,79,142,.2) 0%, transparent 50%);
background-size: 100% 100%, 100% 100%, 100% 100%;
animation: navParticles 3s ease-in-out infinite;
z-index: -2;
pointer-events:none;
opacity: 0.6;
}
@keyframes navParticles {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.6;
}
50% {
transform: translateY(-10px) scale(1.1);
opacity: 0.8;
}
}
.nav-item.center{
transform: translateY(-12px);
}
.nav-item.center .m-logo{
width: 54px; height: 54px;
border-radius: 999px;
padding: 0;
display: grid;
place-items: center;
background: radial-gradient(circle at 40% 30%, #fff 0%, #c9b3ff 55%, #5a2bb3 100%);
border: 1px solid rgba(255,255,255,.75);
box-shadow:
0 10px 25px rgba(0,0,0,.45),
0 0 24px rgba(174,122,255,.85),
inset 0 0 10px rgba(255,255,255,.65);
}
.nav-item.center::after{
content:"";
position:absolute;
left:50%; transform:translateX(-50%);
bottom: -4px;
width: 46px; height: 12px;
background: radial-gradient(50% 100% at 50% 0%, rgba(174,122,255,.55) 0%, rgba(0,0,0,0) 80%);
filter: blur(8px);
pointer-events:none;
}
.nav-item span:last-child{
line-height: 1;
text-shadow: 0 0 8px rgba(0,0,0,.6);
}
@media (max-width: 380px){
.nav{ padding: 12px 14px; }
.nav-item{ letter-spacing: .12em; font-size: 9.5px; gap: 4px; }
.nav-item .ico{ width: 20px; height: 20px; }
.nav-item.center .m-logo{ width: 50px; height: 50px; }
}
/* ===== Carousel — Crisp Edge, One-Side Entrance ===== */
.h-carousel{
position: relative;
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.15);
background: radial-gradient(circle at 20% 0%, rgba(40,20,70,.35) 0%, rgba(0,0,0,0) 70%);
}
.h-carousel::before,
.h-carousel::after{ display:none !important; }
.h-carousel .track{
position: absolute;
left: 0; top: 10px; right: auto; bottom: 10px;
display: flex;
align-items: flex-start;
gap: 16px;
will-change: transform;
transform: translateX(0); /* JS updates */
}
.vcard{ flex: 0 0 auto; width: clamp(132px, 32vw, 176px); }
.vcard-card{
width: 100%;
aspect-ratio: 116/152;
border-radius: 16px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,.18);
background: rgba(15,15,30,.45);
box-shadow: 0 20px 40px rgba(0,0,0,.75), 0 0 40px rgba(160,120,255,.35);
}
.vcard-img{
position:absolute; inset:0; display:grid; place-items:center; background:#201c46;
}
.vcard-img .vci{ width:100%; height:100%; object-fit:contain; padding:6px; }
.vcard-foot{ background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 75%); padding:10px; }
/* === Carousel final smooth control === */
.h-carousel .track{ animation-play-state: paused; } /* default paused until ready */
.h-carousel.ready .track{ animation-play-state: running; }
.h-carousel .track{ animation-duration: var(--spd, 40s) !important; }
.vcard{ width: var(--cardW, 160px); flex:0 0 auto; }
.vcard-card{ aspect-ratio:116/152; height:auto; }
.vcard-img .vci{ width:100%; height:100%; object-fit:contain; padding:6px; display:block; }
/* === Achievements === */
#panel-achv .panel-main{
background:
radial-gradient(circle at 20% 30%, rgba(174,122,255,.25) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(126,219,255,.2) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(108,79,142,.15) 0%, transparent 60%),
linear-gradient(135deg,
rgba(20,10,40,.95) 0%,
rgba(15,5,30,.98) 30%,
rgba(10,0,20,.98) 60%,
rgba(20,10,40,.95) 100%);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
#panel-achv .panel-main::before{
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 30% 20%, rgba(174,122,255,.1) 0%, transparent 40%),
radial-gradient(circle at 70% 80%, rgba(126,219,255,.08) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(108,79,142,.06) 0%, transparent 50%);
animation: achvBgFlow 8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes achvBgFlow {
0%, 100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.8;
transform: scale(1.1) rotate(5deg);
}
}
#panel-achv .panel-head,
#panel-achv .panel-body{
position: relative;
z-index: 1;
}
#panel-achv .panel-body{
padding-top: clamp(4px, 1vw, 8px);
padding-bottom: calc(clamp(20px, 5vw, 28px) + env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
min-height: 0;
scroll-padding-top:0;
}
.achv-item{
display:flex;
gap:12px;
align-items:flex-start;
padding:14px;
border-radius:12px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
margin-bottom:12px;
transition: all .2s ease;
}
.achv-item:last-child{
margin-bottom: 0;
}
.achv-item:hover{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.12);
transform: translateY(-2px);
}
.achv-item.done{
background:linear-gradient(135deg, rgba(120,255,160,.08) 0%, rgba(120,255,160,.03) 100%);
border-color:rgba(120,255,160,.2);
box-shadow:0 0 20px rgba(120,255,160,.1) inset, 0 4px 12px rgba(0,0,0,.2);
}
.achv-ico{
width:40px;
height:40px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
border-radius:50%;
background:rgba(255,255,255,.08);
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.achv-item.done .achv-ico{
background:linear-gradient(135deg, rgba(120,255,160,.2) 0%, rgba(120,255,160,.1) 100%);
box-shadow: 0 0 20px rgba(120,255,160,.3);
}
.achv-main{
flex:1;
min-width:0;
}
.achv-title{
font-weight:700;
letter-spacing:.2px;
margin-bottom:4px;
font-size:14px;
color:#fff;
}
.achv-desc{
font-size:12px;
opacity:.75;
margin-bottom:8px;
line-height:1.4;
}
.achv-progress{
font-size:11px;
opacity:.8;
margin-top:6px;
}
.achv-item .progress{
height:6px;
background:rgba(255,255,255,.1);
border-radius:999px;
overflow:hidden;
margin-top:8px;
margin-bottom:4px;
}
.achv-item .progress span{
display:block;
height:100%;
background:linear-gradient(90deg, rgba(174,122,255,.8) 0%, rgba(126,219,255,.8) 100%);
border-radius:999px;
transition: width .3s ease;
box-shadow: 0 0 8px rgba(174,122,255,.5);
}
.achv-item.done .progress span{
background:linear-gradient(90deg, rgba(120,255,160,.9) 0%, rgba(100,255,140,.9) 100%);
box-shadow: 0 0 10px rgba(120,255,160,.6);
}
/* === Осколки (Shards) === */
.chip-shards{
background:linear-gradient(135deg, rgba(100,50,200,.4) 0%, rgba(60,30,120,.3) 100%);
border:1px solid rgba(150,100,255,.3);
}
.chip-shards .chip-value{
color:#b082ff;
font-size:18px;
}
.coin--shard{
width:18px;
height:18px;
display:inline-block;
vertical-align:middle;
object-fit:contain;
}
.coin-img{ width:100%; height:100%; object-fit:contain; }
/* === Апгрейд карт === */
#upgradeCardList{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:16px;
margin-top:16px;
justify-items:center;
align-items:start;
}
@media (max-width: 767px){
#upgradeCardList{
grid-template-columns:1fr;
justify-items:stretch;
}
}
.upgrade-card{
display:flex;
flex-direction:column;
border:1px solid rgba(255,255,255,.2);
border-radius:20px;
overflow:hidden;
background:linear-gradient(180deg, rgba(30,15,60,.8) 0%, rgba(20,8,44,.9) 100%);
backdrop-filter:blur(12px);
transition:all .3s ease;
position:relative;
box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05) inset;
width:100%;
max-width:320px;
margin:0 auto;
}
.upgrade-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 32px rgba(0,0,0,.6), 0 0 30px rgba(160,120,255,.3);
border-color:rgba(255,255,255,.3);
}
.upgrade-card .card-img{
width:100%;
aspect-ratio:116/152;
overflow:hidden;
position:relative;
background:linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.2) 100%);
border-bottom:3px solid rgba(255,255,255,.1);
}
.upgrade-card .card-img::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0,0,0,.6) 100%);
pointer-events:none;
z-index:1;
}
.upgrade-card .card-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
position:relative;
z-index:0;
}
.upgrade-card .card-info{
padding:16px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
background:linear-gradient(180deg, rgba(15,6,32,.6) 0%, rgba(10,4,20,.8) 100%);
align-items:center;
}
.upgrade-card .card-name{
font-weight:800;
font-size:18px;
color:#fff;
text-shadow:0 2px 8px rgba(0,0,0,.5);
margin-bottom:4px;
text-align:center;
}
.upgrade-card .card-rarity{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.15em;
padding:4px 10px;
background:rgba(0,0,0,.3);
border-radius:6px;
display:block;
width:fit-content;
margin:0 auto;
text-align:center;
}
.upgrade-card .card-stats{
font-size:12px;
opacity:.8;
padding:8px 10px;
background:rgba(0,0,0,.25);
border-radius:8px;
border:1px solid rgba(255,255,255,.05);
font-family:'Courier New', monospace;
line-height:1.6;
text-align:center;
}
.upgrade-chance{
font-weight:600;
color:#7edbff;
font-size:clamp(11px, 2.8vw, 13px);
padding:clamp(5px, 1.2vw, 7px) clamp(8px, 2vw, 12px);
background:rgba(126,219,255,.1);
border:1px solid rgba(126,219,255,.3);
border-radius:8px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
gap:clamp(6px, 1.5vw, 10px);
width:100%;
box-sizing:border-box;
margin:0;
justify-content:center;
gap:clamp(6px, 1.5vw, 10px);
width:100%;
max-width:clamp(250px, 62.5vw, 350px);
text-shadow:0 0 12px rgba(126,219,255,.8);
box-shadow:0 0 20px rgba(126,219,255,.3), inset 0 0 20px rgba(126,219,255,.1);
box-sizing:border-box;
}
.upgrade-chance::before{
content:'🎲';
font-size:clamp(16px, 4vw, 20px);
filter:drop-shadow(0 0 8px rgba(126,219,255,.8));
flex-shrink:0;
}
@media (max-width: 480px){
.upgrade-chance{
padding:clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
font-size:clamp(12px, 3vw, 16px);
}
.upgrade-chance::before{
font-size:clamp(14px, 3.5vw, 18px);
}
}
@media (max-width: 360px){
.upgrade-chance{
padding:8px 12px;
font-size:13px;
}
.upgrade-chance::before{
font-size:14px;
}
}
.upgrade-cost{
font-size:clamp(11px, 2.8vw, 13px);
display:flex;
align-items:center;
justify-content:center;
gap:clamp(3px, 0.8vw, 5px);
color:#b082ff;
font-weight:600;
padding:clamp(5px, 1.2vw, 7px) clamp(8px, 2vw, 12px);
background:rgba(176,130,255,.1);
border:1px solid rgba(176,130,255,.3);
border-radius:8px;
width:100%;
box-sizing:border-box;
margin:0;
}
.upgrade-cost img{
width:clamp(16px, 4vw, 18px);
height:clamp(16px, 4vw, 18px);
filter:drop-shadow(0 0 4px rgba(176,130,255,.5));
flex-shrink:0;
}
@media (max-width: 480px){
.upgrade-cost{
padding:clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
font-size:clamp(12px, 3vw, 16px);
gap:clamp(5px, 1.25vw, 8px);
}
.upgrade-cost img{
width:clamp(14px, 3.5vw, 16px);
height:clamp(14px, 3.5vw, 16px);
}
}
@media (max-width: 360px){
.upgrade-cost{
padding:8px 12px;
font-size:13px;
gap:6px;
}
.upgrade-cost img{
width:14px;
height:14px;
}
}
.upgrade-btn{
margin-top:clamp(2px, 0.5vw, 4px);
margin-left:auto;
margin-right:auto;
width:100%;
padding:clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px);
font-weight:700;
font-size:clamp(11px, 2.8vw, 14px);
border-radius:8px;
background:rgba(126,219,255,.15);
border:1px solid rgba(126,219,255,.35);
color:#7edbff;
box-sizing:border-box;
text-transform:uppercase;
letter-spacing:.15em;
transition:all .25s cubic-bezier(.4,0,.2,1);
cursor:pointer;
box-shadow:0 6px 24px rgba(126,219,255,.4), inset 0 0 24px rgba(126,219,255,.15);
text-shadow:0 0 16px rgba(126,219,255,.8);
position:relative;
overflow:hidden;
box-sizing:border-box;
touch-action:manipulation;
}
@media (max-width: 480px){
.upgrade-btn{
padding:clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 20px);
font-size:clamp(13px, 3.25vw, 16px);
border-radius:clamp(10px, 2.5vw, 12px);
}
}
@media (max-width: 360px){
.upgrade-btn{
padding:10px 16px;
font-size:13px;
border-radius:10px;
}
}
.upgrade-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(255,255,255,.1), transparent);
opacity:0;
transition:opacity .25s;
}
.upgrade-btn:hover:not(:disabled)::before{
opacity:1;
}
.upgrade-btn:hover:not(:disabled){
background:linear-gradient(135deg, rgba(126,219,255,.35) 0%, rgba(91,155,175,.35) 100%);
border-color:rgba(126,219,255,.7);
box-shadow:0 8px 32px rgba(126,219,255,.5), inset 0 0 32px rgba(126,219,255,.2);
transform:translateY(-2px) scale(1.02);
}
.upgrade-btn:active:not(:disabled){
transform:translateY(0) scale(1);
box-shadow:0 4px 16px rgba(126,219,255,.3), inset 0 0 20px rgba(126,219,255,.1);
}
.upgrade-btn:disabled{
opacity:.4;
cursor:not-allowed;
background:rgba(60,60,60,.2);
border-color:rgba(255,255,255,.15);
color:rgba(255,255,255,.4);
box-shadow:none;
text-shadow:none;
}
/* === Контракты === */
.contract-fullscreen{
display:flex;
flex-direction:column;
padding:clamp(10px, 2.5vw, 16px);
padding-top:calc(clamp(40px, 10vw, 50px) + env(safe-area-inset-top));
padding-bottom:calc(clamp(12px, 3vw, 16px) + env(safe-area-inset-bottom));
gap:clamp(8px, 2vw, 12px);
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
min-height:0;
height:100%;
min-height:100vh;
min-height:100dvh;
max-height:100vh;
max-height:100dvh;
justify-content:flex-start;
align-items:stretch;
overscroll-behavior:contain;
touch-action:pan-y;
width:100%;
box-sizing:border-box;
margin:0;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(180deg, rgba(15,8,35,.98) 0%, rgba(5,2,15,.99) 100%);
}
.contract-fullscreen > *{
flex-shrink:0;
width:100%;
box-sizing:border-box;
}
.contract-fullscreen .contract-header{
flex-shrink:0;
order:1;
}
.contract-fullscreen .contract-filters{
flex-shrink:0;
order:2;
}
.contract-fullscreen #contractCardList{
flex:1;
min-height:0;
order:3;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.contract-fullscreen .contract-footer{
margin-top:auto;
flex-shrink:0;
order:4;
}
@media(max-width:480px){
.contract-fullscreen{
padding:3px;
padding-top:calc(20px + env(safe-area-inset-top));
padding-bottom:calc(8px + env(safe-area-inset-bottom));
gap:4px;
}
}
.contract-header{
text-align:center;
margin-bottom:clamp(4px, 1vw, 6px);
flex-shrink:0;
padding:0;
}
.contract-header h2{
font-size:clamp(14px, 3.5vw, 18px);
font-weight:700;
margin:0;
color:#fff;
line-height:1.2;
}
.contract-header p{
font-size:clamp(10px, 2.5vw, 12px);
line-height:1.3;
margin:0;
color:rgba(255,255,255,.6);
}
.contract-filters{
display:flex;
justify-content:space-between;
align-items:center;
gap:clamp(6px, 1.5vw, 10px);
margin-bottom:clamp(6px, 1.5vw, 10px);
flex-wrap:wrap;
flex-shrink:0;
padding:0;
}
.contract-filters .input{
flex:1;
min-width:clamp(150px, 37.5vw, 200px);
font-size:clamp(13px, 3.25vw, 14px);
padding:clamp(10px, 2.5vw, 12px) clamp(14px, 3.5vw, 16px);
}
.contract-selected-info{
font-weight:600;
color:#7edbff;
white-space:nowrap;
font-size:clamp(12px, 3vw, 14px);
}
.contract-rarity-section{
margin-bottom:30px;
}
.contract-rarity-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
background:rgba(0,0,0,.3);
border-left:4px solid;
border-radius:8px;
margin-bottom:16px;
}
.contract-rarity-header h3{
margin:0;
font-size:18px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.1em;
}
.contract-rarity-count{
font-size:14px;
opacity:.7;
}
.contract-cards-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(clamp(80px, 22vw, 100px), 1fr));
gap:clamp(8px, 2vw, 10px);
width:100%;
box-sizing:border-box;
}
@media (max-width: 480px){
.contract-cards-grid{
grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
gap:8px;
}
}
@media (min-width: 768px){
.contract-cards-grid{
grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
gap:10px;
}
}
@media (min-width: 1024px){
.contract-cards-grid{
grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
}
}
.contract-card{
position:relative;
cursor:pointer;
transition:all .2s;
border:1px solid rgba(255,255,255,.2);
border-radius:10px;
overflow:hidden;
background:rgba(20,8,44,.6);
backdrop-filter:blur(8px);
}
.contract-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 20px rgba(160,120,255,.2);
border-color:rgba(255,255,255,.4);
}
.contract-card.selected{
border-color:#7edbff;
box-shadow:0 0 30px rgba(126,219,255,.5), 0 8px 24px rgba(0,0,0,.5);
background:rgba(126,219,255,.1);
}
.contract-card.max-selected{
opacity:0.6;
cursor:not-allowed;
}
.contract-card.max-selected:hover{
transform:none;
}
.contract-card-selected-count{
position:absolute;
bottom:8px;
left:8px;
right:8px;
background:rgba(126,219,255,.9);
color:#000;
padding:4px 8px;
border-radius:8px;
font-size:11px;
font-weight:700;
text-align:center;
border:1px solid rgba(255,255,255,.5);
}
.contract-card-img{
width:100%;
aspect-ratio:116/152;
overflow:hidden;
position:relative;
}
.contract-card-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.contract-card-name{
padding:clamp(6px, 1.5vw, 8px);
text-align:center;
font-size:clamp(10px, 2.5vw, 12px);
font-weight:600;
color:#fff;
background:rgba(0,0,0,.4);
word-wrap:break-word;
overflow-wrap:break-word;
}
.contract-card-count{
position:absolute;
top:8px;
right:8px;
background:rgba(0,0,0,.8);
color:#fff;
padding:4px 8px;
border-radius:12px;
font-size:11px;
font-weight:700;
border:1px solid rgba(255,255,255,.3);
}
.contract-card-check{
position:absolute;
top:8px;
left:8px;
width:28px;
height:28px;
border-radius:50%;
background:#7edbff;
color:#000;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:18px;
box-shadow:0 0 12px rgba(126,219,255,.6);
border:2px solid #fff;
}
.contract-footer{
margin-top:auto;
padding-top:clamp(16px, 4vw, 20px);
border-top:clamp(1px, 0.25vw, 1px) solid rgba(255,255,255,.1);
display:flex;
flex-direction:column;
gap:clamp(12px, 3vw, 16px);
}
.contract-selected-details{
padding:16px;
background:rgba(126,219,255,.1);
border-radius:12px;
border:1px solid rgba(126,219,255,.3);
text-align:center;
min-height:60px;
display:flex;
align-items:center;
justify-content:center;
}
.contract-selected-preview{
display:flex;
flex-direction:column;
gap:8px;
}
.contract-create-btn{
width:100%;
padding:clamp(12px, 3vw, 16px);
font-size:clamp(14px, 3.5vw, 16px);
font-weight:700;
text-transform:uppercase;
letter-spacing:.1em;
border-radius:clamp(12px, 3vw, 14px);
touch-action:manipulation;
}
.contract-create-btn:disabled{
opacity:.5;
cursor:not-allowed;
}
@media (max-width: 480px){
.contract-fullscreen{
padding:16px;
gap:16px;
}
.contract-header h2{
font-size:22px;
}
.contract-filters{
flex-direction:column;
align-items:stretch;
gap:12px;
}
.contract-selected-info{
text-align:center;
font-size:13px;
}
.contract-rarity-header{
padding:10px 12px;
}
.contract-rarity-header h3{
font-size:16px;
}
.contract-card-name{
font-size:11px;
padding:6px;
}
.contract-footer{
padding-top:16px;
}
}
@media (min-width: 481px) and (max-width: 767px){
.contract-cards-grid{
grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
gap:14px;
}
}
/* === Анимация апгрейда === */
.upgrade-animation-overlay{
position:fixed;
inset:0;
z-index:20001;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}
.upgrade-animation-overlay:not(.hidden){
opacity:1;
pointer-events:auto;
}
.upgrade-animation-backdrop{
position:absolute;
inset:0;
background:rgba(5,0,20,.95);
backdrop-filter:blur(25px);
}
.upgrade-animation-container{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
padding:40px;
max-width:600px;
width:90%;
}
.upgrade-particles{
position:absolute;
inset:0;
pointer-events:none;
overflow:visible;
}
.upgrade-particle{
position:absolute;
width:6px;
height:6px;
border-radius:50%;
box-shadow:0 0 10px currentColor, 0 0 20px currentColor;
animation:upgrade-particle-burst 1.2s ease-out forwards;
opacity:0;
}
@keyframes upgrade-particle-burst{
0%{
opacity:0;
transform:scale(0) translate(0,0);
}
20%{
opacity:1;
transform:scale(1.5) translate(0,0);
}
100%{
opacity:0;
transform:scale(0) translate(var(--particle-x, 0), var(--particle-y, 0));
}
}
.upgrade-card-before,
.upgrade-card-after{
position:relative;
width:240px;
height:340px;
border-radius:20px;
border:3px solid;
background:#121226;
overflow:hidden;
box-shadow:0 0 60px rgba(176,130,255,.6), 0 20px 80px rgba(0,0,0,.8);
}
.upgrade-card-before{
transform:scale(1) rotate(0deg);
opacity:1;
transition:all .5s ease;
}
.upgrade-card-after{
transform:scale(0) rotate(180deg);
opacity:0;
transition:all .6s cubic-bezier(.34,1.56,.64,1);
}
.upgrade-card-after.upgrade-card-visible{
transform:scale(1) rotate(0deg);
opacity:1;
}
.upgrade-card-glow{
position:absolute;
inset:-50%;
background:radial-gradient(circle, rgba(176,130,255,.5), transparent 70%);
filter:blur(40px);
animation:upgrade-glow-pulse 2s ease-in-out infinite;
}
@keyframes upgrade-glow-pulse{
0%, 100%{
opacity:0.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.3);
}
}
.upgrade-card-art{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.upgrade-card-info{
position:absolute;
bottom:0;
left:0;
right:0;
padding:20px;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 100%);
display:flex;
flex-direction:column;
gap:8px;
}
.upgrade-card-name{
font-size:18px;
font-weight:700;
color:#fff;
text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.upgrade-card-rarity{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.1em;
text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.upgrade-arrow{
font-size:48px;
animation:upgrade-arrow-bounce 1s ease-in-out infinite;
filter:drop-shadow(0 0 20px rgba(176,130,255,.8));
}
@keyframes upgrade-arrow-bounce{
0%, 100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}
.upgrade-result-text{
text-align:center;
color:#fff;
min-height:80px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
}
.upgrade-result-text h2{
font-size:36px;
font-weight:800;
margin:0;
text-shadow:0 0 30px currentColor;
}
.upgrade-result-text p{
font-size:18px;
opacity:.9;
margin:0;
}
.upgrade-animation-close{
padding:16px 32px;
font-size:18px;
font-weight:700;
border-radius:16px;
background:linear-gradient(135deg, rgba(126,219,255,.3) 0%, rgba(91,155,175,.3) 100%);
border:2px solid rgba(126,219,255,.5);
color:#7edbff;
text-transform:uppercase;
letter-spacing:.1em;
transition:all .2s;
box-shadow:0 4px 20px rgba(126,219,255,.3);
}
.upgrade-animation-close:hover{
background:linear-gradient(135deg, rgba(126,219,255,.4) 0%, rgba(91,155,175,.4) 100%);
border-color:rgba(126,219,255,.7);
box-shadow:0 6px 30px rgba(126,219,255,.5);
transform:translateY(-2px);
}
@media (max-width: 480px){
.upgrade-animation-container{
padding:clamp(16px, 4vw, 20px);
gap:clamp(16px, 4vw, 20px);
}
.upgrade-card-before,
.upgrade-card-after{
width:clamp(180px, 45vw, 200px);
height:clamp(250px, 62.5vw, 280px);
}
.upgrade-arrow{
font-size:clamp(28px, 7vw, 36px);
}
.upgrade-result-text h2{
font-size:clamp(24px, 6vw, 28px);
}
.upgrade-result-text p{
font-size:clamp(14px, 3.5vw, 18px);
}
}
/* Улучшения для очень маленьких экранов */
@media (max-width: 360px){
.upgrade-card-before,
.upgrade-card-after{
width:clamp(160px, 44vw, 180px);
height:clamp(220px, 61vw, 250px);
}
}
/* === Анимация награды контракта === */
.contract-reward-overlay{
position:fixed;
inset:0;
z-index:20000;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}
.contract-reward-overlay:not(.hidden){
opacity:1;
pointer-events:auto;
}
.contract-reward-backdrop{
position:absolute;
inset:0;
background:rgba(5,0,20,.9);
backdrop-filter:blur(20px);
}
.contract-reward-container{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
padding:40px;
max-width:500px;
width:90%;
}
.contract-stars{
position:absolute;
inset:0;
pointer-events:none;
overflow:visible;
}
.contract-star{
position:absolute;
width:6px;
height:6px;
background:#fff;
border-radius:50%;
box-shadow:0 0 12px currentColor, 0 0 24px currentColor;
animation:contract-star-burst 1.2s ease-out forwards;
opacity:0;
}
@keyframes contract-star-burst{
0%{
opacity:0;
transform:scale(0) translate(0,0) rotate(0deg);
}
20%{
opacity:1;
transform:scale(1.5) translate(0,0) rotate(90deg);
}
40%{
opacity:1;
transform:scale(2.5) translate(0,0) rotate(180deg);
}
60%{
opacity:.8;
transform:scale(2) translate(var(--star-x, 0), var(--star-y, 0)) rotate(270deg);
}
100%{
opacity:0;
transform:scale(0) translate(var(--star-x, 0), var(--star-y, 0)) rotate(360deg);
}
}
.contract-ray{
position:absolute;
left:50%;
top:50%;
width:4px;
height:200px;
background:linear-gradient(180deg, rgba(176,130,255,.8) 0%, transparent 100%);
transform-origin:50% 0%;
animation:contract-ray-expand 1s ease-out forwards;
opacity:0;
box-shadow:0 0 20px rgba(176,130,255,.6);
}
@keyframes contract-ray-expand{
0%{
opacity:0;
transform:scale(0) rotate(var(--ray-angle, 0deg));
height:0;
}
50%{
opacity:1;
transform:scale(1) rotate(var(--ray-angle, 0deg));
height:200px;
}
100%{
opacity:0;
transform:scale(1.5) rotate(var(--ray-angle, 0deg));
height:300px;
}
}
.contract-reward-card{
position:relative;
width:280px;
height:400px;
border-radius:20px;
border:3px solid;
background:#121226;
overflow:hidden;
transform:scale(0) rotate(180deg) translateY(100px);
opacity:0;
transition:all .8s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 0 60px rgba(176,130,255,.6), 0 20px 80px rgba(0,0,0,.8);
animation:contract-card-enter .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes contract-card-enter{
0%{
transform:scale(0) rotate(180deg) translateY(100px);
opacity:0;
filter: blur(20px);
}
40%{
transform:scale(1.15) rotate(-10deg) translateY(-20px);
opacity:.8;
filter: blur(10px);
}
60%{
transform:scale(1.05) rotate(5deg) translateY(-5px);
opacity:1;
filter: blur(5px);
}
80%{
transform:scale(.98) rotate(-2deg) translateY(2px);
opacity:1;
filter: blur(0);
}
100%{
transform:scale(1) rotate(0deg) translateY(0);
opacity:1;
filter: blur(0);
}
}
.contract-reward-card-visible{
transform:scale(1) rotate(0deg) translateY(0);
opacity:1;
}
.contract-card-glow{
position:absolute;
inset:-50%;
background:radial-gradient(circle, rgba(176,130,255,.4), transparent 70%);
filter:blur(30px);
animation:contract-glow-pulse 2s ease-in-out infinite;
}
@keyframes contract-glow-pulse{
0%, 100%{
opacity:0.6;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.2);
}
}
.contract-card-art{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.contract-card-info{
position:absolute;
bottom:0;
left:0;
right:0;
padding:20px;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 100%);
display:flex;
flex-direction:column;
gap:8px;
}
.contract-card-name{
font-size:20px;
font-weight:700;
color:#fff;
text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.contract-card-rarity{
font-size:14px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.1em;
text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.contract-reward-text{
text-align:center;
color:#fff;
}
.contract-reward-text h2{
font-size:32px;
font-weight:800;
margin:0 0 12px 0;
background:linear-gradient(135deg, #fff 0%, #b082ff 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:0 0 30px rgba(176,130,255,.5);
}
.contract-reward-text p{
font-size:18px;
opacity:.9;
margin:0;
}
.contract-reward-btn{
padding:16px 32px;
font-size:18px;
font-weight:700;
border-radius:16px;
background:linear-gradient(135deg, rgba(126,219,255,.3) 0%, rgba(91,155,175,.3) 100%);
border:2px solid rgba(126,219,255,.5);
color:#7edbff;
text-transform:uppercase;
letter-spacing:.1em;
transition:all .2s;
box-shadow:0 4px 20px rgba(126,219,255,.3);
}
.contract-reward-btn:hover{
background:linear-gradient(135deg, rgba(126,219,255,.4) 0%, rgba(91,155,175,.4) 100%);
border-color:rgba(126,219,255,.7);
box-shadow:0 6px 30px rgba(126,219,255,.5);
transform:translateY(-2px);
}
.contract-shards-display{
display:none;
flex-direction:column;
align-items:center;
gap:16px;
transform:scale(0) rotate(180deg);
opacity:0;
transition:all .6s cubic-bezier(.34,1.56,.64,1);
}
.contract-shards-display.contract-shards-visible{
transform:scale(1) rotate(0deg);
opacity:1;
}
.contract-shards-icon{
position:relative;
width:120px;
height:120px;
display:flex;
align-items:center;
justify-content:center;
animation:contract-shards-rotate 2s ease-in-out infinite;
}
@keyframes contract-shards-rotate{
0%, 100%{
transform:rotate(0deg) scale(1);
}
50%{
transform:rotate(10deg) scale(1.1);
}
}
.contract-shards-amount{
font-size:48px;
font-weight:800;
color:#b082ff;
text-shadow:0 0 20px rgba(176,130,255,.8), 0 0 40px rgba(176,130,255,.5);
font-family:'Teko',sans-serif;
letter-spacing:.1em;
}
@media (max-width: 480px){
.contract-reward-container{
padding:20px;
gap:20px;
}
.contract-reward-card{
width:240px;
height:340px;
}
.contract-reward-text h2{
font-size:24px;
}
.contract-reward-text p{
font-size:16px;
}
}
/* === Бустеры === */
.booster-item{ display:flex; justify-content:space-between; align-items:center; padding:clamp(10px, 2.5vw, 14px); border:1px solid rgba(255,255,255,.1); border-radius:10px; margin-bottom:8px; background:rgba(255,255,255,.02); }
.booster-item.active{ border-color:#7edbff; background:rgba(126,219,255,.05); }
.booster-info{ flex:1; }
.booster-info h4{ margin:0 0 2px 0; font-size:clamp(12px, 3vw, 14px); }
.booster-info p{ margin:0 0 4px 0; font-size:clamp(11px, 2.8vw, 12px); opacity:.8; }
.booster-duration{ font-size:clamp(10px, 2.5vw, 11px); opacity:.6; }
.booster-action{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.booster-cost{ font-weight:600; color:#b082ff; font-size:clamp(11px, 2.8vw, 13px); }
.booster-active{ color:#7edbff; font-weight:600; font-size:clamp(10px, 2.5vw, 12px); }
/* === История операций === */
.history-item{ padding:12px; border-bottom:1px solid rgba(255,255,255,.05); }
.history-time{ font-size:12px; opacity:.6; margin-bottom:4px; }
.history-content{ font-size:14px; }
/* === Премиум пак === */
.pack-card.premium{ border:2px solid #ddb034; box-shadow:0 0 30px rgba(221,176,52,.3); }
.pack-card.premium .pack-art{ background:radial-gradient(circle, rgba(221,176,52,.2) 0%, transparent 70%); }
/* === Красивые уведомления === */
.notification{
animation:notificationSlideIn .3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes notificationSlideIn{
0%{
opacity:0;
transform:translateX(-50%) translateY(-20px) scale(.9);
}
100%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
}
.notification-success{
background:linear-gradient(135deg, rgba(76,175,80,.95), rgba(56,142,60,.95)) !important;
box-shadow:0 8px 32px rgba(0,0,0,.6), 0 0 40px rgba(76,175,80,.4) !important;
}
.notification-error{
background:linear-gradient(135deg, rgba(255,80,80,.95), rgba(200,40,40,.95)) !important;
box-shadow:0 8px 32px rgba(0,0,0,.6), 0 0 40px rgba(255,80,80,.4) !important;
}
.notification-info{
background:linear-gradient(135deg, rgba(126,219,255,.95), rgba(91,155,175,.95)) !important;
box-shadow:0 8px 32px rgba(0,0,0,.6), 0 0 40px rgba(126,219,255,.4) !important;
}
/* ========================================
УЛУЧШЕННАЯ АДАПТИВНОСТЬ И АНИМАЦИЯ АПГРЕЙДА
======================================== */
/* === Полностью адаптивный логотип GTM === */
.brand.brand-vertical{
min-width: clamp(60px, 12vw, 100px);
gap: 0;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.logo{
width: clamp(60px, 12vw, 100px) !important;
height: clamp(60px, 12vw, 100px) !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.logo:hover{
transform: scale(1.05);
}
.logo-gtm{
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
mix-blend-mode: screen !important;
filter:
drop-shadow(0 0 clamp(8px, 2vw, 16px) rgba(255,255,255,.8))
drop-shadow(0 0 clamp(16px, 3vw, 32px) rgba(174,122,255,.5))
!important;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Скрываем текст бренда */
.brand-text,
.brand-text .name,
.topbar .brand .name{
display: none !important;
}
/* === Улучшенная адаптивность topbar === */
.topbar{
padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 16px);
gap: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
flex-wrap: wrap;
}
.badges{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: clamp(4px, 1vw, 8px);
min-width: 0;
}
.chip{
padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 14px);
font-size: clamp(9px, 2vw, 12px);
min-width: max-content;
}
.chip-label{
font-size: clamp(8px, 1.8vw, 11px);
white-space: nowrap;
}
.chip-value{
font-size: clamp(14px, 3.5vw, 24px);
line-height: 1;
font-family: 'Teko', sans-serif;
font-weight: 600;
display: flex;
align-items: center;
gap: clamp(4px, 1vw, 6px);
}
.chip-shards .chip-value{
font-size: clamp(13px, 3vw, 20px);
}
.chip-left .chip-value{
font-size: clamp(13px, 3vw, 20px);
}
.coin-img{
width: clamp(14px, 3.5vw, 20px) !important;
height: clamp(14px, 3.5vw, 20px) !important;
object-fit: contain;
}
/* === Адаптивность навигации === */
.nav{
left: clamp(8px, 2vw, 16px);
right: clamp(8px, 2vw, 16px);
bottom: calc(clamp(8px, 2vw, 12px) + var(--safe-bottom));
padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 18px);
border-radius: clamp(18px, 4vw, 22px);
}
.nav-item{
font-size: clamp(8px, 1.8vw, 10px);
gap: clamp(4px, 1vw, 6px);
}
.nav-item .ico{
width: clamp(18px, 4vw, 22px);
height: clamp(18px, 4vw, 22px);
}
.nav-item.center .m-logo{
width: clamp(44px, 8vw, 54px);
height: clamp(44px, 8vw, 54px);
}
/* === Адаптивность экранов === */
.screens{
padding-left: clamp(12px, 3vw, 20px);
padding-right: clamp(12px, 3vw, 20px);
padding-bottom: calc(var(--navH) + var(--safe-bottom) + clamp(10px, 2vw, 20px));
}
.screen-title{
font-size: clamp(20px, 5vw, 28px);
}
.section-title{
font-size: clamp(16px, 4vw, 22px);
}
.grid{
grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 25vw, 180px), 1fr));
gap: clamp(10px, 2.5vw, 20px);
}
.card-preview{
width: 100%;
height: clamp(140px, 35vw, 200px);
}
.card-preview .card-art{
width: calc(100% - clamp(14px, 3vw, 22px));
height: calc(100% - clamp(60px, 15vw, 80px));
}
.card-preview .card-name{
font-size: clamp(11px, 2.5vw, 13px);
}
/* === Улучшенный дизайн панели апгрейдов === */
.upgrade-fullscreen{
padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 20px);
gap: clamp(20px, 5vw, 30px);
}
/* Компактные стили апгрейда */
/* === Анимация апгрейда с вращающимся шаром === */
.upgrade-animation-overlay{
position: fixed;
inset: 0;
z-index: 20001;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.upgrade-animation-overlay:not(.hidden){
opacity: 1;
pointer-events: auto;
}
.upgrade-animation-backdrop{
position: absolute;
inset: 0;
background: rgba(5, 0, 20, 0.95);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
}
.upgrade-animation-container{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 5vw, 40px);
padding: clamp(20px, 5vw, 40px);
max-width: clamp(320px, 80vw, 700px);
width: 90%;
}
/* Вращающийся магический шар */
.upgrade-magic-sphere{
position: relative;
width: clamp(120px, 30vw, 200px);
height: clamp(120px, 30vw, 200px);
margin: clamp(20px, 5vw, 40px) 0;
}
.upgrade-sphere-core{
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(
circle at 30% 30%,
rgba(176, 130, 255, 0.9) 0%,
rgba(126, 219, 255, 0.7) 30%,
rgba(91, 155, 175, 0.5) 60%,
rgba(40, 18, 86, 0.3) 100%
);
box-shadow:
0 0 clamp(40px, 10vw, 80px) rgba(176, 130, 255, 0.8),
0 0 clamp(60px, 15vw, 120px) rgba(126, 219, 255, 0.6),
inset 0 0 clamp(30px, 7.5vw, 60px) rgba(255, 255, 255, 0.3);
animation: upgrade-sphere-rotate 3s ease-in-out infinite;
filter: blur(clamp(2px, 0.5vw, 4px));
}
.upgrade-sphere-outer{
position: absolute;
inset: -clamp(10px, 2.5vw, 20px);
border-radius: 50%;
background: conic-gradient(
from 0deg,
rgba(176, 130, 255, 0.4) 0deg,
rgba(126, 219, 255, 0.6) 90deg,
rgba(91, 155, 175, 0.4) 180deg,
rgba(176, 130, 255, 0.4) 270deg,
rgba(176, 130, 255, 0.4) 360deg
);
animation: upgrade-sphere-spin 4s linear infinite;
opacity: 0.8;
filter: blur(clamp(8px, 2vw, 16px));
}
.upgrade-sphere-inner{
position: absolute;
inset: clamp(15px, 4vw, 30px);
border-radius: 50%;
background: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.6) 0%,
rgba(176, 130, 255, 0.4) 40%,
transparent 70%
);
animation: upgrade-sphere-pulse 2s ease-in-out infinite;
box-shadow:
inset 0 0 clamp(20px, 5vw, 40px) rgba(255, 255, 255, 0.5),
0 0 clamp(30px, 7.5vw, 60px) rgba(176, 130, 255, 0.6);
}
.upgrade-sphere-particles{
position: absolute;
inset: 0;
border-radius: 50%;
overflow: visible;
}
.upgrade-sphere-particle{
position: absolute;
width: clamp(4px, 1vw, 8px);
height: clamp(4px, 1vw, 8px);
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 clamp(8px, 2vw, 16px) rgba(176, 130, 255, 0.8);
animation: upgrade-particle-orbit 3s linear infinite;
}
@keyframes upgrade-sphere-rotate{
0%, 100%{
transform: rotate(0deg) scale(1);
opacity: 0.9;
}
25%{
transform: rotate(90deg) scale(1.05);
opacity: 0.95;
}
50%{
transform: rotate(180deg) scale(1.1);
opacity: 1;
}
75%{
transform: rotate(270deg) scale(1.05);
opacity: 0.95;
}
}
@keyframes upgrade-sphere-spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes upgrade-sphere-pulse{
0%, 100%{
transform: scale(1);
opacity: 0.8;
}
50%{
transform: scale(1.15);
opacity: 1;
}
}
@keyframes upgrade-particle-orbit{
0%{
transform: rotate(0deg) translateX(clamp(50px, 12.5vw, 100px)) rotate(0deg);
opacity: 0;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
transform: rotate(360deg) translateX(clamp(50px, 12.5vw, 100px)) rotate(-360deg);
opacity: 0;
}
}
/* Карты в анимации апгрейда */
.upgrade-card-before,
.upgrade-card-after{
width: clamp(180px, 45vw, 300px);
height: clamp(255px, 64vw, 425px);
border-radius: clamp(16px, 4vw, 20px);
border-width: clamp(2px, 0.5vw, 3px);
}
.upgrade-card-before{
animation: upgrade-card-before-fade 1.5s ease-in-out forwards;
}
.upgrade-card-after{
animation: upgrade-card-after-appear 1.5s ease-in-out 0.8s forwards;
opacity: 0;
transform: scale(0) rotate(180deg);
}
@keyframes upgrade-card-before-fade{
0%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
70%{
opacity: 0.5;
transform: scale(0.8) rotate(-10deg);
}
100%{
opacity: 0;
transform: scale(0.5) rotate(-20deg);
}
}
@keyframes upgrade-card-after-appear{
0%{
opacity: 0;
transform: scale(0) rotate(180deg);
}
60%{
transform: scale(1.1) rotate(-10deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.upgrade-result-text h2{
font-size: clamp(28px, 7vw, 48px);
}
.upgrade-result-text p{
font-size: clamp(16px, 4vw, 24px);
}
.upgrade-animation-close{
padding: clamp(12px, 3vw, 16px) clamp(24px, 6vw, 32px);
font-size: clamp(14px, 3.5vw, 18px);
border-radius: clamp(12px, 3vw, 16px);
}
/* Медиа-запросы для дополнительной адаптивности */
@media (max-width: 360px){
.logo{
width: clamp(50px, 12vw, 70px) !important;
height: clamp(50px, 12vw, 70px) !important;
}
.chip{
padding: 4px 6px;
font-size: 8px;
}
.chip-value{
font-size: 14px;
}
}
@media (min-width: 1024px){
.logo{
width: clamp(90px, 10vw, 110px) !important;
height: clamp(90px, 10vw, 110px) !important;
}
.upgrade-magic-sphere{
width: clamp(180px, 20vw, 220px);
height: clamp(180px, 20vw, 220px);
}
}
@media (min-width: 1440px){
.logo{
width: clamp(100px, 12vw, 120px) !important;
height: clamp(100px, 12vw, 120px) !important;
}
.grid{
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Focus states для клавиатурной навигации */
*:focus-visible {
outline: 3px solid rgba(174,122,255,.8);
outline-offset: 2px;
border-radius: 4px;
}
.btn:focus-visible,
.nav-item:focus-visible,
.pack-card:focus-visible {
outline: 3px solid rgba(174,122,255,.9);
outline-offset: 4px;
box-shadow: 0 0 0 4px rgba(174,122,255,.3), 0 0 20px rgba(174,122,255,.5);
}
/* Улучшенные focus states для интерактивных элементов */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid rgba(174,122,255,.9);
outline-offset: 2px;
}
/* Skip to main content link для screen readers */
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: rgba(174,122,255,.95);
color: #fff;
padding: 12px 24px;
text-decoration: none;
z-index: 100000;
border-radius: 0 0 8px 0;
font-weight: 700;
}
.skip-link:focus {
top: 0;
}
/* Улучшенная читаемость для screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Плавные переходы для всех интерактивных элементов */
button, a, .nav-item, .pack-card, .tile {
transition: all .25s cubic-bezier(.4,0,.2,1);
}
/* Улучшенная анимация для hover состояний */
@media (hover: hover) {
.pack-card:hover {
transform: translateY(-6px) scale(1.02);
}
.btn:hover:not([disabled]) {
transform: translateY(-2px);
}
.nav-item:hover:not(.active) {
opacity: .8;
transform: translateY(-2px);
}
}
/* Reduced motion для пользователей с предпочтением уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.h-carousel .track {
animation: none !important;
}
}
/* Улучшенная контрастность для текста */
.muted {
opacity: .85;
}
/* Улучшенные анимации открытия пака */
.pack-sheet {
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.envelope-closed {
transition: transform .3s ease, opacity .3s ease;
}
.envelope-open {
animation: envelopeOpen .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes envelopeOpen {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.1) rotate(5deg);
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
/* Улучшенная анимация появления карт */
.rise-zone .card-rise {
animation: cardRise .8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cardRise {
0% {
opacity: 0;
transform: translateY(100px) scale(.8) rotateY(180deg);
}
60% {
transform: translateY(-20px) scale(1.05) rotateY(0deg);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotateY(0deg);
}
}
/* Улучшенная анимация веера карт */
.fan {
animation: fanSpread .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fanSpread {
0% {
opacity: 0;
transform: scale(.5) rotate(0deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
/* Плавные переходы для панелей */
.panel {
transition: opacity .3s ease, visibility .3s ease;
}
.panel-main {
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
/* Улучшенная анимация для уведомлений */
.notification {
animation: notificationSlideIn .3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes notificationSlideIn {
0% {
opacity: 0;
transform: translateX(-50%) translateY(-30px) scale(.9);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
}
/* Улучшенная анимация для контрактов */
.contract-reward-card {
animation: contractRewardAppear .8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes contractRewardAppear {
0% {
opacity: 0;
transform: scale(0) rotate(-180deg);
}
60% {
transform: scale(1.1) rotate(10deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
/* Улучшенная анимация для бустеров */
.booster-item {
transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
}
.booster-item::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(174,122,255,.1) 0%, transparent 100%);
opacity: 0;
transition: opacity .3s ease;
}
.booster-item:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 40px rgba(174,122,255,.4);
border-color: rgba(174,122,255,.5);
}
.booster-item:hover::before {
opacity: 1;
}
.booster-item.active {
animation: boosterActivate .5s ease forwards;
border-color: rgba(126,219,255,.6);
background: rgba(126,219,255,.1);
box-shadow: 0 0 30px rgba(126,219,255,.4), inset 0 0 20px rgba(126,219,255,.1);
}
@keyframes boosterActivate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Улучшенная анимация для истории */
.history-item {
animation: historyItemSlideIn .3s ease forwards;
opacity: 0;
}
@keyframes historyItemSlideIn {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Улучшенная читаемость для всех текстовых элементов */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
}
p {
line-height: 1.6;
}
/* Улучшенная видимость для disabled элементов */
[disabled],
[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
/* Улучшенная видимость для loading состояний */
.loading {
position: relative;
pointer-events: none;
}
.loading::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,.3);
border-radius: inherit;
animation: loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse {
0%, 100% {
opacity: .3;
}
50% {
opacity: .6;
}
}