@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Exo+2:wght@300;400;500;600&display=swap'); :root { --bg-primary: #050b18; --bg-secondary: #0a1428; --bg-card: #0d1a35; --bg-card2: #0f2040; --accent-cyan: #00d4ff; --accent-blue: #0077ff; --accent-mid: #0099ee; --accent-glow: rgba(0, 212, 255, 0.15); --accent-glow2: rgba(0, 119, 255, 0.2); --text-primary: #e8f4ff; --text-muted: #7a9bbf; --text-dim: #3a5a7a; --border: rgba(0, 180, 255, 0.15); --border-hover: rgba(0, 212, 255, 0.5); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ─── GRID BACKGROUND ─── */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='rgba(0,120,255,0.06)' stroke-width='0.4'/%3E%3C/svg%3E"); background-size: 60px 60px; pointer-events: none; z-index: 0; } body { font-family: 'Exo 2', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* ─── NAVBAR ─── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 2rem; height: 70px; display: flex; align-items: center; justify-content: space-between; background: rgba(5, 11, 24, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 900; color: var(--accent-cyan); text-decoration: none; letter-spacing: 3px; text-shadow: 0 0 20px rgba(0,212,255,0.6); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-logo span { color: var(--text-primary); } .nav-links { display: flex; align-items: center; gap: 0.5rem; list-style: none; position: absolute; left: 50%; transform: translateX(-50%); } .nav-links a { font-family: 'Exo 2', sans-serif; font-weight: 500; font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: color 0.3s, background 0.3s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: var(--accent-cyan); transition: left 0.3s, right 0.3s; } .nav-links a:hover { color: var(--accent-cyan); } .nav-links a:hover::after, .nav-links a.active::after { left: 10%; right: 10%; } .nav-links a.active { color: var(--accent-cyan); } /* Hide decorative emoji slots we no longer fill. */ .card-icon:empty, .about-feat-icon:empty, .earn-ico:empty, .rules-block-icon:empty { display: none; } /* Anti-flicker: when a non-Russian language is stored in localStorage, the HTML still ships with Russian fallback text. i18n.js sets the data-i18n-ready attribute on as soon as applyTranslations runs, so the body stays invisible during that swap. A 800 ms safety timer in i18n.js reveals the page even if JS errors out. */ html:not([data-i18n-ready]) body { visibility: hidden; } /* All top-level nav links share the same shape and weight. Only .nav-accent is highlighted — used for the single CTA (the Магазин link pointing off to the storefront). */ .nav-accent { text-decoration: none !important; background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)) !important; color: #fff !important; border: 1px solid rgba(0, 200, 255, .55) !important; padding: 0.5rem 1.4rem !important; border-radius: 4px !important; font-weight: 600 !important; letter-spacing: 1.5px; box-shadow: 0 0 18px rgba(0, 180, 255, .28); transition: box-shadow .25s, transform .2s, background .25s !important; } .nav-accent:hover { box-shadow: 0 0 30px rgba(0, 200, 255, .55); transform: translateY(-1px); } .nav-accent::after { display: none !important; } .btn-shop-hero { background: linear-gradient(135deg, #ff6a00, #ff2d55) !important; color: #fff !important; padding: 0.9rem 2.4rem; border-radius: 4px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 4px 30px rgba(255,80,0,0.45); transition: transform 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 8px; animation: shopGlow 2.5s ease-in-out infinite; } .btn-shop-hero:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 40px rgba(255,80,0,0.6); } /* BURGER */ .burger { display: none; cursor: pointer; flex-direction: column; gap: 5px; } .burger span { width: 24px; height: 2px; background: var(--accent-cyan); display: block; transition: 0.3s; } /* NAV RIGHT GROUP */ .nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; position: relative; } .lang-switcher { display: flex; gap: 2px; background: rgba(0,180,255,0.06); border: 1px solid var(--border); border-radius: 6px; padding: 3px; margin-left: 0.5rem; } .lang-btn { font-family: 'Orbitron', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; padding: 0.3rem 0.55rem; border-radius: 4px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; transition: color 0.2s, background 0.2s; } .lang-btn:hover { color: var(--text-muted); background: rgba(0,180,255,0.07); } .lang-btn.active { background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)); color: #fff; box-shadow: 0 0 10px rgba(0,200,255,0.25); } /* ─── PAGE WRAPPER ─── */ main { padding-top: 70px; position: relative; z-index: 1; } /* ─── HERO ─── */ .hero { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: visible; /* don't clip the bg */ padding: 4rem 2rem; max-width: none; /* break out of section 1200px limit */ width: 100%; } .hero-bg { position: fixed; /* viewport-relative, so gradient spans full screen */ inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,100,255,0.10) 0%, transparent 65%); } .hero-content { position: relative; z-index: 2; max-width: 900px; } .hero-badge { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 4px; color: var(--accent-cyan); border: 1px solid var(--border-hover); padding: 0.4rem 1.2rem; border-radius: 2px; margin-bottom: 1.5rem; text-transform: uppercase; animation: fadeUp 0.8s ease both; } .hero h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(2.8rem, 8vw, 6rem); font-weight: 900; line-height: 1.05; letter-spacing: 6px; margin-bottom: 1rem; animation: fadeUp 0.8s 0.1s ease both; } .hero h1 .glow { background: linear-gradient(135deg, #fff 30%, var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 30px rgba(0,212,255,0.4)); } .hero h1 .accent { color: var(--accent-cyan); -webkit-text-fill-color: var(--accent-cyan); } .hero-sub { font-size: 1.15rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; font-weight: 300; animation: fadeUp 0.8s 0.2s ease both; } .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeUp 0.8s 0.3s ease both; } .btn-primary { background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)); color: #fff; padding: 0.9rem 2.2rem; border-radius: 4px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 4px 30px rgba(0,150,255,0.4); transition: transform 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0,200,255,0.5); } .btn-secondary { background: transparent; color: var(--accent-cyan); padding: 0.9rem 2.2rem; border-radius: 4px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--border-hover); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; display: inline-flex; align-items: center; gap: 8px; } .btn-secondary:hover { background: var(--accent-glow); box-shadow: 0 0 20px rgba(0,212,255,0.2); transform: translateY(-3px); } /* ─── STATS BAR ─── */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; z-index: 2; } .stat-item { background: var(--bg-secondary); padding: 1.8rem 2rem; text-align: center; transition: background 0.3s; } .stat-item:hover { background: var(--bg-card); } .stat-num { font-family: 'Orbitron', sans-serif; font-size: 2.2rem; font-weight: 900; color: var(--accent-cyan); text-shadow: 0 0 20px rgba(0,212,255,0.4); line-height: 1; } .stat-label { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 0.5rem; } /* ─── SECTION ─── */ section { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; } .section-label { font-family: 'Orbitron', sans-serif; font-size: 0.65rem; letter-spacing: 5px; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.8rem; opacity: 0.8; } .section-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: 2px; margin-bottom: 1rem; line-height: 1.2; } .section-title .accent { color: var(--accent-cyan); } .section-desc { color: var(--text-muted); max-width: 600px; line-height: 1.8; font-weight: 300; margin-bottom: 3rem; } /* ─── CARDS ─── */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-blue), var(--accent-cyan), transparent); opacity: 0; transition: opacity 0.3s; } .card:hover { border-color: var(--border-hover); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,100,255,0.15); } .card:hover::before { opacity: 1; } .card-icon { width: 48px; height: 48px; background: var(--accent-glow2); border: 1px solid var(--border-hover); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.2rem; } .card h3 { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 0.8rem; color: var(--text-primary); } .card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } /* ─── SERVER CONNECT BLOCK ─── */ .connect-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; } .connect-block::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,119,255,0.05), transparent 60%); pointer-events: none; } .connect-block > * { position: relative; z-index: 1; } .connect-info h3 { font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; } .connect-ip { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; font-weight: 900; color: var(--accent-cyan); letter-spacing: 3px; text-shadow: 0 0 20px rgba(0,212,255,0.4); } .status-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #00ff99; margin-top: 0.5rem; } .status-dot::before { content: ''; width: 8px; height: 8px; background: #00ff99; border-radius: 50%; box-shadow: 0 0 10px #00ff99; animation: pulse 2s infinite; } /* ─── RULES LIST ─── */ .rules-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .rule-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 1.2rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; transition: border-color 0.3s; } .rule-item:hover { border-color: var(--border-hover); } .rule-num { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--accent-cyan); background: var(--accent-glow); border: 1px solid var(--border-hover); padding: 0.3rem 0.6rem; border-radius: 4px; flex-shrink: 0; margin-top: 2px; } .rule-content h4 { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 0.4rem; color: var(--text-primary); } .rule-content p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* ─── SHOP ─── */ .shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .shop-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .shop-card:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 20px 50px rgba(0,100,255,0.2); } .shop-card-header { padding: 2rem; text-align: center; position: relative; } .shop-card.popular .shop-card-header { background: linear-gradient(135deg, rgba(0,119,255,0.15), rgba(0,212,255,0.08)); } .popular-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)); font-family: 'Orbitron', sans-serif; font-size: 0.6rem; letter-spacing: 1.5px; padding: 0.25rem 0.7rem; border-radius: 2px; font-weight: 700; } .shop-icon { font-size: 3rem; margin-bottom: 1rem; } .shop-tier { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px; color: var(--accent-cyan); margin-bottom: 0.3rem; } .shop-price { font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900; color: var(--text-primary); } .shop-price sup { font-size: 1rem; color: var(--text-muted); } .shop-features { padding: 1.5rem 2rem; border-top: 1px solid var(--border); list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .shop-features li { font-size: 0.88rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.6rem; } .shop-features li::before { content: '✓'; color: var(--accent-cyan); font-weight: 700; flex-shrink: 0; } .shop-btn { display: block; margin: 0 1.5rem 1.5rem; text-align: center; padding: 0.8rem; border-radius: 4px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: all 0.2s; } .shop-btn-primary { background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)); color: #fff; box-shadow: 0 4px 20px rgba(0,150,255,0.3); } .shop-btn-primary:hover { box-shadow: 0 8px 30px rgba(0,200,255,0.5); transform: translateY(-2px); } .shop-btn-outline { border: 1px solid var(--border-hover); color: var(--accent-cyan); background: transparent; } .shop-btn-outline:hover { background: var(--accent-glow); } /* ─── NEWS ─── */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .news-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: transform 0.3s, border-color 0.3s; } .news-card:hover { transform: translateY(-5px); border-color: var(--border-hover); } .news-img { height: 180px; background: linear-gradient(135deg, var(--bg-card2), var(--bg-secondary)); display: flex; align-items: center; justify-content: center; font-size: 4rem; position: relative; overflow: hidden; } .news-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--bg-card)); } .news-body { padding: 1.5rem; } .news-tag { font-family: 'Orbitron', sans-serif; font-size: 0.6rem; letter-spacing: 2px; color: var(--accent-cyan); text-transform: uppercase; border: 1px solid var(--border-hover); padding: 0.2rem 0.6rem; border-radius: 2px; display: inline-block; margin-bottom: 0.8rem; } .news-title { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1.4; margin-bottom: 0.8rem; color: var(--text-primary); } .news-excerpt { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; } .news-footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-dim); } .news-read { color: var(--accent-cyan); text-decoration: none; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 1px; } .news-read:hover { text-decoration: underline; } /* ─── ABOUT PAGE ─── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-visual { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 8rem; position: relative; overflow: hidden; } .about-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,150,255,0.1) 0%, transparent 70%); } .about-features { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .about-feat { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; color: var(--text-muted); transition: border-color 0.3s; } .about-feat:hover { border-color: var(--border-hover); color: var(--text-primary); } .about-feat-icon { font-size: 1.3rem; flex-shrink: 0; } /* ─── DIVIDER ─── */ .divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-hover), transparent); margin: 0; } /* ─── FOOTER ─── */ footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 3rem 2rem 1.5rem; position: relative; z-index: 1; } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; } .footer-brand p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-top: 1rem; max-width: 260px; } .footer-socials { display: flex; gap: 0.7rem; margin-top: 1.2rem; } .social-icon { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.9rem; color: var(--text-muted); transition: border-color 0.3s, color 0.3s, background 0.3s; } .social-icon:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: var(--accent-glow); } .footer-col h4 { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; color: var(--text-primary); text-transform: uppercase; margin-bottom: 1.2rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; } .footer-col a:hover { color: var(--accent-cyan); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-dim); } /* ─── PAGE HERO (inner pages) ─── */ .page-hero { padding: 5rem 2rem 3rem; text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: fixed; /* full viewport glow, no hard edges */ inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(0,100,255,0.09) 0%, transparent 65%); } .page-hero-content { position: relative; z-index: 2; } /* ─── ANIMATIONS ─── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 5px #00ff99; } 50% { box-shadow: 0 0 15px #00ff99, 0 0 30px rgba(0,255,153,0.3); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-anim { animation: floatY 4s ease-in-out infinite; } /* ─── RESPONSIVE ─── */ @media (max-width: 900px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .nav-links { display: none; } .burger { display: flex; } .stats-bar { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .connect-block { flex-direction: column; text-align: center; } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } } /* Mobile nav */ .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 70px; left: 0; right: 0; transform: none; background: rgba(5,11,24,0.98); padding: 2rem; gap: 1rem; border-bottom: 1px solid var(--border); } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--accent-blue); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); } /* ═══════════════════════════════════════════════════════════════ 🪙 POINTSHOP ═══════════════════════════════════════════════════════════════ */ #skyCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block} main,footer{position:relative;z-index:1} .ps-hero-badge{display:inline-flex;align-items:center;gap:.55rem;font-family:'Orbitron',sans-serif;font-size:.68rem;letter-spacing:3px;color:#ffd700;border:1px solid rgba(255,215,0,.32);padding:.4rem 1.2rem;border-radius:2px;margin-bottom:1.5rem;text-transform:uppercase;background:rgba(255,215,0,.04);} .ps-info-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:2.5rem;} .ps-info-cell{background:var(--bg-card2);padding:1.3rem 1rem;text-align:center;} .ps-info-num{font-family:'Orbitron',sans-serif;font-size:1.5rem;font-weight:900;color:#ffd700;text-shadow:0 0 18px rgba(255,215,0,.4);line-height:1;} .ps-info-lbl{font-size:.7rem;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:.4rem;font-family:'Orbitron',sans-serif;} .ps-notice{background:rgba(0,140,255,.04);border:1px solid rgba(0,140,255,.15);border-radius:8px;padding:.9rem 1.3rem;margin-bottom:2rem;display:flex;align-items:flex-start;gap:.85rem;font-size:.86rem;color:var(--text-muted);line-height:1.65;} .ps-filters{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.8rem;} .ps-ftab{background:var(--bg-card);border:1px solid var(--border);border-radius:5px;padding:.42rem 1rem;color:var(--text-muted);font-size:.72rem;cursor:pointer;font-family:'Orbitron',sans-serif;letter-spacing:1px;transition:all .2s;} .ps-ftab:hover,.ps-ftab.active{border-color:#ffd700;color:#ffd700;background:rgba(255,215,0,.06);} .ps-top-bar{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;} .ps-count{color:var(--text-dim);font-size:.78rem;font-family:'Orbitron',sans-serif;letter-spacing:1px;margin-left:auto;} .ps-search-wrap{position:relative;} .ps-search{background:var(--bg-card2);border:1px solid var(--border);border-radius:6px;padding:.62rem 1rem .62rem 2.4rem;color:var(--text-primary);font-size:.88rem;font-family:'Exo 2',sans-serif;outline:none;transition:border-color .2s;width:100%;max-width:380px;} .ps-search:focus{border-color:rgba(255,215,0,.45);} .ps-search::placeholder{color:var(--text-dim);} .ps-search-ico{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none;} .ps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem;} .ps-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .22s,transform .22s,box-shadow .22s;position:relative;} .ps-card:hover{border-color:rgba(255,215,0,.40);transform:translateY(-4px);box-shadow:0 12px 38px rgba(255,180,0,.07);} .ps-card.ps-popular{border-color:rgba(255,215,0,.22);} .ps-card.ps-popular::before{content:'★ ХИТ';position:absolute;top:9px;right:9px;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.38);border-radius:3px;font-family:'Orbitron',sans-serif;font-size:.56rem;letter-spacing:1px;color:#ffd700;padding:.18rem .5rem;z-index:2;} .ps-card.ps-soon{opacity:.6;} .ps-card.ps-soon .ps-buy{opacity:.35;cursor:not-allowed;pointer-events:none;} .ps-card-img{height:128px;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden;} .ps-card-img::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(255,200,0,.05) 0%,transparent 65%);} .ps-card-img img{width:76px;height:76px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 10px rgba(0,140,255,.28));position:relative;z-index:1;} .ps-card-body{padding:.95rem;flex:1;display:flex;flex-direction:column;gap:.42rem;} .ps-card-name{font-family:'Orbitron',sans-serif;font-size:.71rem;font-weight:700;letter-spacing:.5px;line-height:1.4;} .ps-card-desc{font-size:.79rem;color:var(--text-muted);flex:1;line-height:1.5;} .ps-card-qty{font-size:.7rem;color:var(--text-dim);font-family:'Orbitron',sans-serif;letter-spacing:.5px;} .ps-card-foot{padding:.75rem .95rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:rgba(0,0,0,.12);} .ps-price{display:flex;align-items:center;gap:.3rem;font-family:'Orbitron',sans-serif;font-size:.88rem;font-weight:900;color:#ffd700;text-shadow:0 0 12px rgba(255,215,0,.35);} .ps-buy{background:linear-gradient(135deg,rgba(255,180,0,.14),rgba(255,215,0,.20));border:1px solid rgba(255,215,0,.32);border-radius:5px;color:#ffd700;font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:1.5px;padding:.44rem .9rem;cursor:pointer;transition:all .2s;white-space:nowrap;} .ps-buy:hover{background:linear-gradient(135deg,rgba(255,180,0,.24),rgba(255,215,0,.30));border-color:rgba(255,215,0,.65);box-shadow:0 0 14px rgba(255,215,0,.18);} .ps-empty{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:.78rem;letter-spacing:2px;} .earn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1rem;margin-top:1.4rem;} .earn-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.3rem;text-align:center;transition:border-color .2s;} .earn-card:hover{border-color:rgba(255,215,0,.28);} .earn-ico{font-size:2.1rem;margin-bottom:.7rem;display:block;} .earn-ttl{font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:1px;color:#ffd700;margin-bottom:.35rem;} .earn-dsc{font-size:.8rem;color:var(--text-muted);line-height:1.5;} .cmd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:.85rem;margin-top:1.4rem;} .cmd-card{background:var(--bg-card);border:1px solid var(--border);border-radius:9px;padding:1.1rem 1.35rem;} .cmd-code{font-family:'Orbitron',sans-serif;font-size:.82rem;font-weight:700;color:var(--accent-cyan);white-space:nowrap;} .cmd-desc{font-size:.83rem;color:var(--text-muted);line-height:1.5;margin-top:.3rem;} .ps-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(9px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;} .ps-modal{background:var(--bg-card2);border:1px solid rgba(255,215,0,.22);border-radius:14px;padding:2rem;max-width:390px;width:100%;position:relative;} .nav-shop-pts{background:linear-gradient(135deg,rgba(255,180,0,.18),rgba(255,215,0,.24))!important;border:1px solid rgba(255,215,0,.50)!important;color:#ffd700!important;} .nav-shop-pts:hover{border-color:rgba(255,215,0,.80)!important;box-shadow:0 0 18px rgba(255,215,0,.18)!important;}