/* ============================================================ МЕМНАЯ ТЕМА. Включается классом .meme на . Картинки берутся из assets/meme/ (собирается tools/build-meme-pack.js). Всё, что тут есть, живёт только внутри .meme и не трогает обычный вид. ============================================================ */ .meme-toggle.is-on{ background:linear-gradient(90deg,#ff2ec4,#ffe22e,#2effc4); color:#0a0c10; border-color:#ffe22e; font-weight:700; animation:memeblink 1.2s infinite alternate; } @keyframes memeblink{to{filter:hue-rotate(40deg) saturate(1.4)}} /* ---------- общий фон: коллаж ---------- */ .meme .bg-fx{opacity:1} .meme .bg-collage{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-auto-rows:150px; gap:4px; opacity:.16; filter:saturate(1.3) contrast(1.1); mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 80%); } .meme .bg-collage img{width:100%; height:100%; object-fit:cover} .meme .bg-glow{opacity:.7} .meme .bg-grid{opacity:.5} /* ---------- шапка и заголовки ---------- */ .meme .nav{background:rgba(10,6,14,.82); border-bottom:2px solid #ff2ec4} .meme .nav__logo-mark{ background:linear-gradient(140deg,#ff2ec4,#ffe22e); color:#120014; box-shadow:0 0 0 1px #ffe22e, 0 6px 18px -6px #ff2ec4; } .meme h1, .meme h2, .meme .sec__head h2{ text-shadow:2px 2px 0 #000, 4px 4px 0 rgba(255,46,196,.55); } .meme .hero__title em{color:#ffe22e} .meme .sec__head h2::after{background:linear-gradient(90deg,#ff2ec4,#ffe22e,transparent)} /* ---------- аватарки в тикере ---------- */ .meme .tick-item{gap:7px} .meme .tick-item::before{content:none} .meme .tick-ava{ width:22px; height:22px; border-radius:5px; object-fit:cover; flex-shrink:0; border:1px solid #2c3340; } /* ---------- шаги ---------- */ .meme .step{overflow:hidden} .meme .step__pic{ position:absolute; right:-8px; top:-8px; width:96px; height:96px; object-fit:cover; border-radius:12px; opacity:.5; transform:rotate(6deg); mask-image:radial-gradient(circle at 60% 40%, #000 40%, transparent 75%); } .meme .step__n{-webkit-text-stroke:1.5px #ff2ec4} /* ---------- кейсы ---------- */ .meme .case__art{background:#07080a} .meme .case__pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.05); } .meme .case__art::before{ content:''; position:absolute; inset:0; z-index:1; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 60%), linear-gradient(180deg, rgba(7,8,10,.15), rgba(7,8,10,.85)); } .meme .crate{display:none} .meme .case__tier{z-index:2; backdrop-filter:blur(3px)} .meme .case:hover .case__pic{transform:scale(1.06); transition:transform .35s} /* ---------- рулетка ---------- */ .meme .ritem{padding:0} .meme .ritem__pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; } .meme .ritem::before{ background:linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, transparent), rgba(7,8,10,.9) 70%); } .meme .ritem b{padding:0 6px 7px; text-shadow:1px 1px 0 #000, 0 0 8px #000} .meme .ritem i{text-shadow:0 0 10px #000, 1px 1px 0 #000} /* ---------- приз ---------- */ .meme .roll__result{gap:14px} .meme .roll__pic{ width:56px; height:56px; border-radius:8px; object-fit:cover; border:1px solid var(--line-2); } /* ---------- инвентарь и панели ---------- */ .meme .inv-item__pic{ width:46px; height:46px; border-radius:8px; object-fit:cover; flex-shrink:0; border:1px solid var(--line-2); } .meme .pay-way__ico{background:linear-gradient(140deg,#ff2ec4,#ffe22e); color:#12000f; border-color:#ffe22e} /* ---------- полосы под заголовками ---------- */ .sec__strip{display:flex; gap:6px; margin-top:16px} .sec__strip-i{ width:64px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--line-2); filter:saturate(1.2); transition:transform .18s; } .sec__strip-i:nth-child(even){transform:rotate(-2.5deg)} .sec__strip-i:nth-child(odd){transform:rotate(2deg)} .sec__strip-i:hover{transform:scale(1.35) rotate(0); z-index:5; position:relative} /* ---------- логотип, статус, полароиды ---------- */ .meme .nav__logo-mark{position:relative; overflow:hidden} .logo-pic{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; mix-blend-mode:luminosity} .meme .status{position:relative; overflow:hidden} .status__pic{ position:absolute; right:-10px; bottom:-10px; width:120px; height:120px; object-fit:cover; opacity:.22; border-radius:14px; transform:rotate(-7deg); pointer-events:none; } .hero__stack{display:flex; gap:10px; margin-top:26px} .hero__stack-i{ width:104px; height:104px; object-fit:cover; border-radius:8px; border:3px solid #14181f; box-shadow:0 12px 28px -12px #000; } .hero__stack-i:nth-child(1){transform:rotate(-5deg)} .hero__stack-i:nth-child(2){transform:rotate(3deg) translateY(-6px)} .hero__stack-i:nth-child(3){transform:rotate(-2deg) translateY(4px)} /* ---------- мелочи по секциям ---------- */ .pack__pic{width:34px; height:34px; object-fit:cover; border-radius:7px; border:1px solid var(--line-2)} .perk-pic{width:26px; height:26px; object-fit:cover; border-radius:5px; margin-right:10px; vertical-align:-7px} .faq-pic{width:30px; height:30px; object-fit:cover; border-radius:6px; margin-left:auto} .pay-pic{width:100%; height:100%; object-fit:cover; border-radius:7px} .odds-pic{width:24px; height:24px; object-fit:cover; border-radius:5px; margin-right:9px; vertical-align:-7px} .meme .tbl--odds .dot-r{width:4px; height:24px; border-radius:2px; vertical-align:-7px; margin-right:7px} /* шапка модалки кейса */ .meme #modal .modal__head{position:relative; overflow:hidden} .meme #modal .modal__head::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--pic) center/cover; opacity:.22; mask-image:linear-gradient(90deg, #000, transparent 70%); } .meme #modal .modal__head > *{position:relative; z-index:1} /* ---------- вспышка на редком дропе ---------- */ .meme-flash{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; pointer-events:none; animation:flashout 1.4s forwards; } .meme-flash__i{ max-width:min(60vw,420px); max-height:60vh; border-radius:14px; border:4px solid #ffe22e; box-shadow:0 0 80px -10px #ffe22e, 0 30px 70px -20px #000; transform:rotate(-3deg); } @keyframes flashout{ 0%{opacity:0; transform:scale(.8)} 15%{opacity:1; transform:scale(1.04)} 75%{opacity:1} 100%{opacity:0; transform:scale(1)} } /* ---------- футер ---------- */ .foot__strip{display:flex; gap:5px; width:100%; margin-top:14px; overflow:hidden} .foot__strip-i{ flex:1; height:52px; object-fit:cover; border-radius:5px; opacity:.55; transition:opacity .2s, transform .2s; } .foot__strip-i:hover{opacity:1; transform:translateY(-3px)} .meme .cta__box{border-color:#ff2ec4} .meme .cta__box::after{ content:''; position:absolute; inset:0; z-index:-1; opacity:.2; background:var(--cta-pic) center/cover; } /* ---------- если пак не собран ---------- */ .meme-warn{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:200; max-width:min(520px,92vw); padding:14px 18px; border-radius:12px; background:#141922; border:1px solid #ffe22e; color:var(--txt); font-size:13.5px; box-shadow:0 20px 50px -20px #000; } .meme-warn b{color:#ffe22e} .meme-warn code{ display:block; margin-top:8px; padding:8px 10px; border-radius:7px; background:#0a0d12; border:1px solid var(--line); font-family:var(--f-mono); font-size:12px; color:var(--acid); word-break:break-all; } .meme-warn button{margin-top:10px; font-size:12px; color:var(--txt-3); text-decoration:underline}