:root{
--bg:#f3f4fb;
--bg-2:#eaecf5;
--surface:#fff;
--line:#e6e8f0;
--line-2:#eef0f7;
--ink:#0f1226;
--ink-2:#2a2e4a;
--muted:#6b7094;
--muted-2:#9aa0bf;
--primary:#4f46e5;
--primary-2:#6366f1;
--primary-50:#eef0ff;
--violet:#7c3aed;
--violet-50:#f3eeff;
--emerald:#10b981;
--emerald-50:#e7faf2;
--amber:#f59e0b;
--gold:#fbbf24;
--gold-deep:#b45309;
--rose:#e11d48;
--shadow-sm:0 1px 2px rgba(15,18,38,.04),0 1px 1px rgba(15,18,38,.03);
--shadow:0 1px 2px rgba(15,18,38,.04),0 8px 24px rgba(15,18,38,.06);
--shadow-lg:0 1px 2px rgba(15,18,38,.04),0 20px 50px -18px rgba(15,18,38,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'Inter',system-ui,sans-serif;
background:
radial-gradient(900px 600px at 50% -10%, rgba(99,102,241,.07), transparent 70%),
var(--bg);
color:var(--ink);
-webkit-font-smoothing:antialiased;
font-feature-settings:"ss01","cv11";
min-height:100vh;
}
.num{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:0; background:transparent;}
.shell{
max-width:1280px; margin:0 auto; padding:22px 28px 64px;
display:flex; flex-direction:column; gap:24px;
}
/* Секции v5 рендерятся в #prof-root, не напрямую в .shell — gap нужен здесь */
#prof-root{
display:flex;
flex-direction:column;
gap:24px;
min-width:0;
}
#prof-root > section{
min-width:0;
}
/* ───── TOP NAV ───── */
.top{
display:flex; align-items:center; justify-content:space-between;
padding:10px 18px;
background:rgba(255,255,255,.78);
backdrop-filter:saturate(140%) blur(10px);
border:1px solid rgba(255,255,255,.7);
box-shadow:var(--shadow-sm), 0 0 0 1px var(--line) inset;
border-radius:16px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--primary),var(--violet));}
.brand-name{font-weight:800; font-size:15px;}
.brand-sep{color:var(--line); margin:0 14px;}
.breadcrumbs{color:var(--muted); font-size:13.5px;}
.breadcrumbs b{color:var(--ink-2); font-weight:600;}
.nav-right{display:flex; align-items:center; gap:8px;}
.pill{
height:36px; padding:0 14px; border-radius:999px;
border:1px solid var(--line); background:#fff; color:var(--ink-2);
font-size:13px; font-weight:500;
display:inline-flex; align-items:center; gap:8px;
}
.pill:hover{background:var(--bg);}
.pill.is--ghost{background:transparent;}
.avatar-mini{
width:30px; height:30px; border-radius:999px;
background:#c7d2fe center/cover no-repeat url('iqmo/avatar-dasha.png');
background-position:center 18%;
background-size:cover;
}
/* ───── CRUMBS ───── */
.crumbs{font-size:13px; color:var(--muted); padding:0 4px;}
.crumbs span.sep{opacity:.5; margin:0 6px;}
.crumbs a:hover{color:var(--primary);}
/* ════════════════════════════════════════
HERO — Calm premium profile card
════════════════════════════════════════ */
.hero{
position:relative;
border-radius:24px;
overflow:hidden;
border:1px solid var(--line);
box-shadow:
0 1px 2px rgba(15,18,38,.04),
0 24px 50px -28px rgba(79,70,229,.15);
background:
/* very subtle violet wash bottom-left */
radial-gradient(800px 500px at -10% 110%, rgba(124,58,237,.10), transparent 60%),
/* subtle indigo top */
radial-gradient(700px 400px at 50% -10%, rgba(99,102,241,.06), transparent 70%),
/* base */
linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.hero::before,
.hero::after{display:none;}
/* Decorations — a couple very subtle dots, no trophies */
.hero-deco{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;}
.hero-trophy{display:none;}
.hero-orb,
.hero-hex{display:none;}
.hero-particle{
position:absolute; border-radius:50%;
background:rgba(124,58,237,.18);
opacity:.5;
}
.p1{ width:4px; height:4px; top:46px; right:200px;}
.p2{ width:3px; height:3px; top:140px; right:80px; background:rgba(99,102,241,.22);}
.p3{ width:3px; height:3px; bottom:80px; left:280px; background:rgba(99,102,241,.18);}
.p4,.p5,.p6{display:none;}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero-inner{
position:relative; z-index:2;
display:grid;
grid-template-columns: 240px 1fr 320px;
gap:32px;
align-items:center;
padding:36px 38px 32px;
}
/* ═══ Avatar — calm semi-flat ═══ */
.av-wrap{
position:relative;
width:200px; height:200px;
display:grid; place-items:center;
}
.av-wrap::before{display:none;}
.av-track{
position:absolute; inset:0;
border-radius:50%;
background:conic-gradient(
from -90deg,
#6366f1 0%,
#7c3aed 61%,
rgba(15,18,38,.06) 61%,
rgba(15,18,38,.06) 100%
);
z-index:1;
}
.av-track::after{
content:""; position:absolute; inset:5px;
border-radius:50%;
background:#fff;
}
.av-ticks{display:none;}
.av-img{
position:relative; z-index:3;
width:172px; height:172px;
border-radius:50%;
overflow:hidden;
background:linear-gradient(180deg, #eef0ff 0%, #e0e7ff 100%);
box-shadow: inset 0 -1px 2px rgba(15,18,38,.04);
}
.av-img img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center 18%;
image-rendering:auto;
}
/* Level chip — muted */
.lvl-chip{
position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
z-index:5;
display:inline-flex; align-items:center; gap:6px;
padding:6px 14px;
border-radius:999px;
background:#fff;
color:#7c3aed;
font-family:'JetBrains Mono',monospace;
font-weight:800;
font-size:13px;
letter-spacing:.04em;
border:1px solid rgba(124,58,237,.25);
box-shadow: 0 4px 12px -4px rgba(124,58,237,.25);
}
.lvl-chip svg{width:12px; height:12px; fill:#7c3aed; filter:none;}
/* ═══ Center: identity + XP ═══ */
.h-name-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.h-name{
margin:0;
font-size:40px; font-weight:800; letter-spacing:-.025em;
color:var(--ink);
line-height:1.05;
}
.h-handle{
font-size:14px; color:var(--muted);
font-family:'JetBrains Mono',monospace;
padding:4px 10px;
border-radius:8px;
background:var(--primary-50);
border:1px solid rgba(99,102,241,.18);
}
.h-pro{
display:inline-flex; align-items:center; gap:5px;
padding:4px 10px; border-radius:999px;
background:rgba(245,158,11,.10);
color:#b45309;
font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
border:1px solid rgba(245,158,11,.25);
}
.h-pro svg{width:10px; height:10px; fill:#b45309;}
/* Status row — ranks + social signals */
.h-status{
margin-top:12px;
display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
}
.h-chip{
display:inline-flex; align-items:center; gap:6px;
padding:6px 11px; border-radius:8px;
font-size:11.5px; font-weight:700; letter-spacing:.02em;
background:#fff;
border:1px solid var(--line);
color:var(--ink-2);
}
.h-chip svg{width:12px; height:12px;}
.h-chip.rank{
background:linear-gradient(135deg, #f3eeff, #faf5ff);
border-color:rgba(124,58,237,.25);
color:#5b21b6;
}
.h-chip.rank svg{fill:#7c3aed;}
.h-chip.top{
background:linear-gradient(135deg, #ecfdf5, #f0fdf4);
border-color:rgba(16,185,129,.25);
color:#047857;
}
.h-chip.top svg{fill:#10b981;}
.h-chip.top b{font-family:'JetBrains Mono',monospace; font-weight:800;}
.h-chip.ahead{
background:linear-gradient(135deg, #eef0ff, #faf5ff);
border-color:rgba(99,102,241,.25);
color:#4338ca;
}
.h-chip.ahead svg{fill:#4f46e5;}
.h-chip.ahead b{font-family:'JetBrains Mono',monospace; font-weight:800;}
.h-meta{font-size:13px; color:var(--muted);}
/* ═══ XP bar — calm premium gold ═══ */
.xp-block{
margin-top:22px;
padding:16px 18px 14px;
border-radius:14px;
background:#fafbff;
border:1px solid var(--line);
}
.xp-head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:10px;
font-size:12px;
}
.xp-curr{display:inline-flex; align-items:baseline; gap:6px;}
.xp-curr .xp-eye{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.xp-curr .xp-num{
font-family:'JetBrains Mono',monospace; font-weight:800; font-size:15px;
color:#b45309;
}
.xp-next{color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:11.5px;}
.xp-bar{
position:relative;
height:12px; border-radius:999px;
background:rgba(15,18,38,.06);
overflow:hidden;
border:1px solid rgba(15,18,38,.03);
}
.xp-fill{
position:absolute; top:0; bottom:0; left:0;
width:61%;
border-radius:999px;
background:linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
box-shadow: 0 0 10px rgba(245,158,11,.20);
}
.xp-block .xp-fill::after{display:none;}
.xp-head-dot{display:none;}
.xp-ticks{display:none;}
.xp-foot{
display:flex; align-items:center; justify-content:space-between;
margin-top:10px;
font-size:12px; color:var(--muted);
}
.xp-foot b{color:var(--ink-2); font-weight:800; font-family:'JetBrains Mono',monospace;}
.xp-untill{
display:inline-flex; align-items:center; gap:6px;
color:#b45309; font-weight:700;
}
.xp-untill .dot-gold{
display:inline-block; width:6px; height:6px; border-radius:50%;
background:#f59e0b;
}
/* ═══ Right column — quick stats (calm) ═══ */
.h-quick{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.qstat{
position:relative;
padding:14px 14px 12px;
border-radius:14px;
background:#fff;
border:1px solid var(--line);
transition: transform .15s ease, box-shadow .15s ease;
}
.qstat:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.qstat .q-ico{
width:28px; height:28px; border-radius:8px;
display:grid; place-items:center;
margin-bottom:8px;
}
.qstat .q-ico svg{width:14px; height:14px;}
.qstat.streak .q-ico{background:rgba(249,115,22,.10);} .qstat.streak .q-ico svg{fill:#ea580c;}
.qstat.rank .q-ico{background:rgba(245,158,11,.10);} .qstat.rank .q-ico svg{fill:#d97706;}
.qstat.course .q-ico{background:rgba(16,185,129,.10);} .qstat.course .q-ico svg{fill:#10b981;}
.qstat.accuracy .q-ico{background:rgba(99,102,241,.10);} .qstat.accuracy .q-ico svg{fill:#4f46e5;}
.qstat .q-val{
font-family:'JetBrains Mono',monospace;
font-size:22px; font-weight:800;
letter-spacing:-.02em;
color:var(--ink);
line-height:1;
}
.qstat .q-val .small{font-size:12px; color:var(--muted-2); font-weight:700; margin-left:2px;}
.qstat .q-lbl{
margin-top:6px;
font-size:10.5px; font-weight:700;
color:var(--muted);
text-transform:uppercase; letter-spacing:.08em;
}
.qstat .q-delta{
position:absolute; top:12px; right:12px;
font-size:10px; font-weight:700;
color:#0f9c5d;
font-family:'JetBrains Mono',monospace;
}
/* ════════════════════════════
"Next goals" — one primary, others quiet
════════════════════════════ */
.nextrow{
display:grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap:12px;
align-items:stretch;
}
.nextrow--with-reward{
grid-template-columns:repeat(5, minmax(0, 1fr));
}
.ngoal{
position:relative;
padding:16px 18px;
border-radius:14px;
background:#fff;
border:1px solid var(--line);
overflow:hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.ngoal:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.ngoal::before{display:none;}
.ngoal .ng-top{
display:flex; align-items:center; gap:10px;
margin-bottom:10px;
}
.ngoal .ng-ico{
width:30px; height:30px; border-radius:9px;
display:grid; place-items:center;
flex-shrink:0;
background:var(--bg-2);
}
.ngoal .ng-ico svg{width:14px; height:14px; fill:var(--ink-2);}
.ngoal.gold .ng-ico{background:rgba(245,158,11,.10);} .ngoal.gold .ng-ico svg{fill:#d97706;}
.ngoal.streak .ng-ico{background:rgba(249,115,22,.10);} .ngoal.streak .ng-ico svg{fill:#ea580c;}
.ngoal.badge .ng-ico{background:rgba(124,58,237,.10);} .ngoal.badge .ng-ico svg{fill:#7c3aed;}
.ngoal.league .ng-ico{background:rgba(99,102,241,.10);} .ngoal.league .ng-ico svg{fill:#4f46e5;}
.ngoal .ng-eye{
font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted);
}
.ngoal .ng-text{
font-size:13.5px; font-weight:700; letter-spacing:-.005em;
color:var(--ink-2); line-height:1.35;
}
.ngoal .ng-text .num-big{
font-family:'JetBrains Mono',monospace;
font-size:15px; font-weight:800;
color:var(--ink);
margin-right:2px;
-webkit-background-clip:initial; background-clip:initial;
}
.ngoal .ng-foot{
margin-top:8px;
font-size:11.5px; color:var(--muted);
}
.ngoal .ng-foot b{color:var(--ink-2); font-weight:700;}
.ngoal .ng-bar{
margin-top:10px;
height:4px; border-radius:999px;
background:rgba(15,18,38,.06);
overflow:hidden;
}
.ngoal .ng-bar i{display:block; height:100%; border-radius:999px; background:var(--ink-2);}
.ngoal.gold .ng-bar i { background:linear-gradient(90deg, #fbbf24, #f59e0b);}
.ngoal.streak .ng-bar i{ background:linear-gradient(90deg, #fb923c, #ea580c);}
.ngoal.badge .ng-bar i{ background:linear-gradient(90deg, #a78bfa, #7c3aed);}
.ngoal.league .ng-bar i{ background:linear-gradient(90deg, #818cf8, #4f46e5);}
/* Primary goal gets emphasis */
.ngoal.is--primary{
background:
radial-gradient(80% 100% at 100% 0%, rgba(245,158,11,.08), transparent 65%),
linear-gradient(180deg, #fffbeb 0%, #fefce8 100%);
border:1px solid rgba(245,158,11,.28);
box-shadow: 0 8px 24px -16px rgba(245,158,11,.35);
}
.ngoal.is--primary .ng-ico{
background:linear-gradient(135deg, #fcd34d, #f59e0b);
width:34px; height:34px;
}
.ngoal.is--primary .ng-ico svg{fill:#fff; width:16px; height:16px;}
.ngoal.is--primary .ng-eye{color:#b45309;}
.ngoal.is--primary .ng-text{font-size:15px; color:var(--ink);}
.ngoal.is--primary .ng-text .num-big{font-size:22px; color:#b45309;}
.ngoal.is--primary .ng-bar{height:6px;}
.ngoal.is--primary .ng-bar i{ background:linear-gradient(90deg, #fcd34d, #f59e0b 70%, #d97706);}
/* Reward shop — teaser card (same block rhythm as other ngoal cards) */
.ngoal.reward-shop{
position:relative;
padding:16px 36px 16px 18px;
cursor:pointer;
overflow:hidden;
border:1px solid rgba(124,58,237,.2);
background:
radial-gradient(120% 100% at 0% 0%, rgba(196,181,253,.16), transparent 58%),
linear-gradient(180deg, #fdfcff 0%, #f3eeff 100%);
box-shadow:0 8px 24px -18px rgba(124,58,237,.26);
opacity:.96;
animation:rewardShopBreathe 5.5s ease-in-out infinite;
transition:opacity .22s ease, box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.ngoal.reward-shop .ng-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
min-width:0;
}
.ngoal.reward-shop .ng-ico{
background:rgba(124,58,237,.12);
border:1px solid rgba(124,58,237,.14);
}
.ngoal.reward-shop .ng-ico svg{
width:14px;
height:14px;
fill:none;
stroke:#7c3aed;
stroke-width:1.75;
stroke-linecap:round;
stroke-linejoin:round;
}
.ngoal.reward-shop .reward-shop__title{
margin:0;
flex:1 1 auto;
min-width:0;
font-size:13px;
font-weight:800;
letter-spacing:-.01em;
line-height:1.2;
color:var(--ink);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ngoal.reward-shop .reward-shop__body{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
min-width:0;
}
.ngoal.reward-shop .reward-shop__copy{
flex:1 1 auto;
min-width:0;
}
.ngoal.reward-shop .reward-shop__illus-wrap{
position:relative;
flex:0 0 92px;
width:92px;
height:92px;
display:grid;
place-items:center;
margin: -6px -6px -6px 0;
pointer-events:none;
}
.ngoal.reward-shop .reward-shop__illus-halo{
position:absolute; inset:8px;
border-radius:50%;
background:
radial-gradient(circle at 50% 55%,
rgba(167,139,250,.42) 0%,
rgba(196,181,253,.22) 42%,
rgba(196,181,253,0) 72%);
filter:blur(2px);
transition:opacity .25s ease, transform .25s ease;
}
.ngoal.reward-shop .reward-shop__illus{
position:relative; z-index:1;
width:88px;
height:88px;
display:block;
object-fit:contain;
filter:drop-shadow(0 6px 12px rgba(124,58,237,.28));
-webkit-user-drag:none;
user-select:none;
animation:rewardShopFloat 4.2s ease-in-out infinite;
transform-origin:center;
}
@keyframes rewardShopFloat{
0%,100%{transform:translateY(0) rotate(-1deg);}
50%{transform:translateY(-3px) rotate(1deg);}
}
.ngoal.reward-shop .ng-text{
margin:0;
font-size:13.5px;
font-weight:700;
line-height:1.35;
color:var(--ink-2);
}
.ngoal.reward-shop .ng-bar{
margin-top:10px;
background:rgba(124,58,237,.08);
}
.ngoal.reward-shop .ng-bar i{
background:linear-gradient(90deg, #c4b5fd, #7c3aed);
opacity:.35;
}
.ngoal.reward-shop .ng-foot{
margin-top:8px;
font-size:11.5px;
font-weight:600;
color:var(--muted);
}
.ngoal.reward-shop:hover,
.ngoal.reward-shop:focus-visible{
opacity:1;
transform:translateY(-1px);
border-color:rgba(124,58,237,.32);
box-shadow:
0 0 0 1px rgba(167,139,250,.14),
0 16px 40px -16px rgba(124,58,237,.36);
}
.reward-shop__lock{
position:absolute; top:12px; right:12px; z-index:3;
width:24px; height:24px;
display:grid; place-items:center;
border-radius:8px;
background:rgba(255,255,255,.78);
border:1px solid rgba(124,58,237,.16);
color:#7c3aed;
opacity:.72;
transition:opacity .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.reward-shop__lock svg{width:13px; height:13px;}
.ngoal.reward-shop:hover .reward-shop__lock,
.ngoal.reward-shop:focus-visible .reward-shop__lock{
opacity:1;
border-color:rgba(124,58,237,.28);
box-shadow:0 0 14px rgba(167,139,250,.45);
transform:scale(1.04);
}
.reward-shop__shimmer{
position:absolute; inset:0; pointer-events:none; z-index:1;
background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.42) 50%, transparent 64%);
background-size:220% 100%;
animation:rewardShopShimmer 9s ease-in-out infinite;
opacity:.45;
}
.reward-shop__glow{
position:absolute; inset:-25%; pointer-events:none; z-index:0;
background:radial-gradient(circle at 22% 50%, rgba(167,139,250,.22), transparent 58%);
}
.reward-shop__tip{
position:absolute;
bottom:calc(100% + 8px);
left:50%;
transform:translateX(-50%) translateY(4px);
z-index:5;
width:max-content;
max-width:240px;
padding:9px 12px;
border-radius:10px;
font-size:12px; font-weight:600; line-height:1.4;
color:#312e81;
background:#fff;
border:1px solid rgba(124,58,237,.18);
box-shadow:0 10px 28px -12px rgba(79,70,229,.35);
opacity:0;
pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
}
.reward-shop__tip::after{
content:"";
position:absolute; top:100%; left:50%; margin-left:-6px;
border:6px solid transparent;
border-top-color:#fff;
filter:drop-shadow(0 1px 0 rgba(124,58,237,.12));
}
.ngoal.reward-shop:hover .reward-shop__tip,
.ngoal.reward-shop:focus-visible .reward-shop__tip{
opacity:1;
transform:translateX(-50%) translateY(0);
}
.ngoal.reward-shop:hover .reward-shop__illus,
.ngoal.reward-shop:focus-visible .reward-shop__illus{
filter:drop-shadow(0 9px 18px rgba(124,58,237,.42));
animation-duration:2.4s;
}
.ngoal.reward-shop:hover .reward-shop__illus-halo,
.ngoal.reward-shop:focus-visible .reward-shop__illus-halo{
transform:scale(1.1);
opacity:1;
}
@keyframes rewardShopBreathe{
0%,100%{box-shadow:0 8px 24px -18px rgba(124,58,237,.28);}
50%{box-shadow:0 10px 32px -14px rgba(124,58,237,.38);}
}
@keyframes rewardShopShimmer{
0%,100%{background-position:120% 0;}
50%{background-position:-20% 0;}
}
@media (prefers-reduced-motion: reduce){
.ngoal.reward-shop,
.ngoal.reward-shop .reward-shop__illus,
.reward-shop__shimmer{animation:none!important;}
}
/* ════════ Section eyebrow ════════ */
.sec-head{
display:flex; align-items:end; justify-content:space-between;
padding:0 4px;
margin-top:4px;
margin-bottom:14px;
}
.sec-eye{
font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted);
margin-bottom:4px;
}
.sec-title{
margin:0;
font-size:22px; font-weight:800; letter-spacing:-.02em;
}
.sec-link{
color:var(--primary); font-size:13px; font-weight:700;
text-decoration:underline; text-underline-offset:3px;
}
.sec-link:hover{color:var(--violet);}
/* ════════ Tinted panel for sections (quiet) ════════ */
.panel{
border-radius:20px;
padding:24px 26px;
border:1px solid var(--line);
background:#fff;
box-shadow:var(--shadow-sm);
}
.panel.ach-panel{
background:#fafbff;
border-color:var(--line);
}
.panel.feed{
background:#fff;
border-color:var(--line);
padding:8px 0;
}
.panel.stats{
background:#fafbff;
border-color:var(--line);
padding:22px 22px;
}
.panel.rare{
background:#fafbff;
border-color:var(--line);
}
/* ════════ ACHIEVEMENTS ════════ */
.ach-toolbar{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:18px;
flex-wrap:wrap; gap:12px;
}
.ach-counter{
display:inline-flex; align-items:center; gap:10px;
font-size:13px; color:var(--muted);
}
.ach-counter .cnt-big{
font-family:'JetBrains Mono',monospace;
font-weight:800; font-size:18px; color:var(--ink);
}
.ach-counter .grade{
font-family:'JetBrains Mono',monospace; font-weight:800; font-size:13px;
background:linear-gradient(135deg, #9333ea, #c084fc);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ach-filter{
display:flex; gap:6px;
padding:4px;
background:rgba(255,255,255,.6);
border:1px solid rgba(255,255,255,.8);
border-radius:10px;
backdrop-filter:blur(8px);
}
.ach-filter button{
height:30px; padding:0 12px;
border-radius:7px;
font-size:12px; font-weight:700;
color:var(--muted);
}
.ach-filter button.is-on{
background:#fff;
color:var(--ink);
box-shadow:0 1px 2px rgba(15,18,38,.06);
}
.ach-grid{
display:grid;
grid-template-columns:repeat(6, minmax(0,1fr));
gap:12px;
}
/* Фильтр коллекции — legacy. Сейчас профиль — витрина полученных
(только .unlocked-карточки попадают в .ach-grid), фильтр-табы
удалены из разметки. Селекторы оставлены: если в будущем кто-то
добавит .ach-grid c data-ach-filter, поведение будет ожидаемым. */
.ach-grid[data-ach-filter="earned"] .ach:not([data-state="earned"]) { display:none; }
.ach-grid[data-ach-filter="inprogress"] .ach:not([data-state="inprogress"]) { display:none; }
.ach-grid[data-ach-filter="locked"] .ach:not([data-state="locked"]) { display:none; }
/* ── Упрощённая «шапка» коллекции (без таб-фильтров) ──
Слева — подзаголовок-объяснение, справа — счётчик «N получено». */
.ach-toolbar.ach-toolbar--simple .ach-sub{
font-size:13px;
color:var(--muted);
line-height:1.45;
max-width:560px;
}
/* ── Empty-state «Пока нет наград» ──
Показывается, когда у пользователя нет ни одной полученной
карточки. Не плейсхолдер ачивки, а информационная пустышка. */
.ach-empty{
display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center;
gap:8px;
padding:48px 24px;
min-height:200px;
border:1px dashed var(--line-2);
border-radius:14px;
background:rgba(255,255,255,.5);
color:var(--muted);
}
.ach-empty .ach-empty-ico{
width:56px; height:56px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(168,85,247,.08);
color:#9333ea;
margin-bottom:4px;
}
.ach-empty .ach-empty-ico svg{ display:block; }
.ach-empty .ach-empty-title{
font-size:15px; font-weight:800;
color:var(--ink);
letter-spacing:-.005em;
}
.ach-empty .ach-empty-sub{
font-size:13px;
color:var(--muted);
line-height:1.5;
max-width:420px;
}
/* ════════════════════════════════════════════════════════════
РЕФ-КАРТА (collectible epic) — из прототипа Card Lab v15.
Карта занимает 2×2 ячейки сетки достижений, внутри всё
масштабируется через container query units (cqi) и
проектные пропорции прототипа (340×510) сохраняются на
любом разрешении.
════════════════════════════════════════════════════════════ */
.ach.ach--illus{
/* Карточка живёт в стандартной 1×1 ячейке коллекции — такая же
ширина и высота, как у остальных ачивок. Container query +
cqi-юниты внутри отвечают за пропорциональный рендер арта,
так что прототип Card Lab v15 ужимается без визуальных потерь. */
grid-column: auto;
grid-row: auto;
width:100%; height:100%;
/* Совпадает с .ach (1/1.45) — все карты в строке одного размера. */
aspect-ratio: 1 / 1.45;
container-type: inline-size;
container-name: refcard;
position:relative;
padding:0;
border-radius:22px;
/* Премиум-фон: лёгкий лавандовый градиент сверху + мягкий вираж
к чисто-белому в центре и обратно к лаванде. Без этого карточка
читается как обычный белый прямоугольник интерфейса. */
border:1px solid rgba(168,85,247,.22);
background:
radial-gradient(900px 520px at 50% -8%, rgba(192,132,252,.18), transparent 62%),
radial-gradient(420px 320px at 12% 102%, rgba(192,132,252,.10), transparent 68%),
linear-gradient(180deg, #f6f1ff 0%, #ffffff 48%, #f6f1ff 100%);
overflow:hidden;
cursor:pointer;
display:flex;
flex-direction:column;
isolation:isolate;
transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
/* Многослойная мягкая тень — карточка чуть отрывается от фона,
без тяжёлых чёрных «UI-теней». Верхний highlight + цветной
нижний halo для ощущения коллекционного объекта. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 0 0 1px rgba(255,255,255,.55),
0 1px 2px rgba(15,18,38,.05),
0 6px 14px -8px rgba(124,58,237,.28),
0 22px 48px -22px rgba(124,58,237,.42);
}
.ach.ach--illus:hover{
/* «Живая награда»: 200–300 ms, лёгкий подъём + насыщеннее halo. */
transform:translateY(-6px);
border-color:rgba(168,85,247,.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(15,18,38,.05),
0 12px 24px -10px rgba(124,58,237,.40),
0 34px 60px -22px rgba(124,58,237,.55);
}
/* Edge animated frame for epic rarity — медленный обод по контуру. */
.ach.ach--illus::after{
content:""; position:absolute; inset:0;
border-radius:inherit;
padding:1px;
background:conic-gradient(from 0deg,
rgba(168,85,247,0),
rgba(192,132,252,.55) 25%,
rgba(168,85,247,.85) 50%,
rgba(192,132,252,.55) 75%,
rgba(168,85,247,0));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0;
transition:opacity .3s;
pointer-events:none;
z-index:5;
}
.ach.ach--illus:hover::after{opacity:1; animation:ach-ref-spin 5s linear infinite;}
@keyframes ach-ref-spin{ to{transform:rotate(360deg);} }
/* Фоновая сцена: фиолетовые haloes + молекулы-гексагоны + искры.
Сцена покрывает верхнюю часть карты под орбом и формирует «живой»
лавандовый подложный паттерн (без него карта читается плоской). */
.ach.ach--illus .ref-scene{
position:absolute;
top:0; left:0; right:0;
height:64%;
z-index:1;
pointer-events:none;
overflow:hidden;
background:
radial-gradient(circle at 14% 18%, rgba(192,132,252,.26), transparent 16%),
radial-gradient(circle at 86% 14%, rgba(192,132,252,.22), transparent 16%),
radial-gradient(520px 420px at 50% 30%, rgba(192,132,252,.20), transparent 70%);
mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.ach.ach--illus .ref-scene::before{
/* Hex-сеточка («магические линии») — едва видна, поверх haloes */
content:""; position:absolute; inset:0;
background-image:
url("data:image/svg+xml;utf8,");
background-size:120px 104px;
background-position:center;
opacity:.7;
mask-image:radial-gradient(ellipse 72% 72% at 50% 40%, transparent 30%, #000 56%, transparent 92%);
-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 40%, transparent 30%, #000 56%, transparent 92%);
}
.ach.ach--illus .ref-scene::after{
/* Искры/звёздочки в углах сцены */
content:""; position:absolute; inset:0;
background-image:
radial-gradient(circle at 22% 30%, rgba(255,255,255,.95) 0 1.6px, transparent 2.2px),
radial-gradient(circle at 78% 24%, rgba(255,255,255,.95) 0 1.6px, transparent 2.2px),
radial-gradient(circle at 20% 70%, rgba(255,255,255,.95) 0 1.3px, transparent 2.2px),
radial-gradient(circle at 82% 70%, rgba(255,255,255,.95) 0 1.3px, transparent 2.2px);
filter: drop-shadow(0 0 3px rgba(252,231,255,1));
opacity:.95;
}
/* Rarity-пилюля «ЭПИЧЕСКАЯ» — коллекционная метка с насыщенным
градиентом и фиолетовым свечением (как у Steam achievement /
Brawl Stars rarity tag). Все размеры в cqi → масштабируются от
ширины карты. На маленькой 1×1 ячейке (≈178px ширина) клампы
держат текст читаемым. */
.ach.ach--illus .c-rar{
position:absolute;
top:4cqi; right:4cqi;
z-index:4;
display:inline-flex; align-items:center; gap:2cqi;
height:auto; padding:1.8cqi 4.2cqi;
min-height:18px;
border-radius:999px;
font-size:clamp(8.5px, 3cqi, 12px);
font-weight:800; letter-spacing:.16em; text-transform:uppercase;
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
linear-gradient(135deg, #b791ff 0%, #8b5cf6 55%, #6d28d9 100%);
color:#fff;
text-shadow:0 1px 0 rgba(76,29,149,.45);
border:1px solid rgba(255,255,255,.55);
box-shadow:
0 0 0 1px rgba(168,85,247,.25),
0 4px 14px -2px rgba(124,58,237,.55),
0 0 18px -4px rgba(168,85,247,.65),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(76,29,149,.30);
white-space:nowrap;
}
.ach.ach--illus .c-rar::before{
content:"";
width:3cqi; height:3cqi;
min-width:7px; min-height:7px;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain;
background-repeat:no-repeat;
filter:drop-shadow(0 0 3px rgba(255,255,255,.7));
}
/* ── ОРБ-СТЕЙДЖ ──
Стейдж +17% к прежнему 55cqi → 64cqi. Орб внутри ~56cqi (вместо 48).
Это та самая «увеличить центральную награду на 15–20%» из ТЗ. */
.ach.ach--illus .c-orb-stage{
position:relative;
margin:6cqi auto 1.8cqi;
width:64cqi; height:64cqi;
display:grid; place-items:center;
z-index:3;
}
/* Большой неон-орб (фиолетовая сфера). Многослойный glow и контрастный
белый ring → ощущение сцены под прожектором, как у эпических наград
в Brawl Stars / Clash Royale. */
.ach.ach--illus .ref-orb{
position:relative;
width:56cqi; height:56cqi;
border-radius:50%;
margin:0 auto;
background:
radial-gradient(circle at 50% 32%, #7c3aed 0%, #5b21b6 55%, #2e1065 100%);
box-shadow:
/* контрастный белый ring */
0 0 0 1.4cqi #fff,
0 0 0 2.2cqi rgba(255,255,255,.42),
/* плотный фиолетовый glow */
0 0 7cqi 1.6cqi rgba(168,85,247,.72),
0 0 14cqi 3.4cqi rgba(168,85,247,.42),
0 0 26cqi 5cqi rgba(168,85,247,.18),
/* объём орба */
inset 0 -3cqi 8cqi rgba(0,0,0,.45),
inset 0 .6cqi 0 rgba(255,255,255,.45);
overflow:hidden;
transition:transform .22s ease, box-shadow .26s ease;
}
.ach.ach--illus:hover .ref-orb{
/* На hover glow «дышит» сильнее — карта оживает */
box-shadow:
0 0 0 1.4cqi #fff,
0 0 0 2.4cqi rgba(255,255,255,.55),
0 0 9cqi 2cqi rgba(168,85,247,.85),
0 0 18cqi 4cqi rgba(168,85,247,.55),
0 0 32cqi 6cqi rgba(168,85,247,.26),
inset 0 -3cqi 8cqi rgba(0,0,0,.45),
inset 0 .6cqi 0 rgba(255,255,255,.5);
}
.ach.ach--illus .ref-orb::before{
content:""; position:absolute;
top:8%; left:18%;
width:55%; height:30%;
border-radius:50%;
background:radial-gradient(ellipse at center, rgba(255,255,255,.4), transparent 70%);
filter:blur(2px);
pointer-events:none;
}
/* Электрические молнии внутри орба. */
.ach.ach--illus .ref-orb::after{
content:""; position:absolute; inset:0;
background-image:
url("data:image/svg+xml;utf8,");
background-size:contain;
pointer-events:none;
opacity:.9;
}
.ach.ach--illus .ref-orb .ref-flask{
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%);
width:26cqi; height:26cqi;
z-index:3;
filter:
drop-shadow(0 0 1.8cqi rgba(192,132,252,.95))
drop-shadow(0 0 3.6cqi rgba(168,85,247,.6));
transform-origin:50% 70%;
}
/* Hex-чекмарк в правом нижнем углу орба. */
.ach.ach--illus .ref-check{
position:absolute;
right:5%; bottom:6%;
width:15cqi; height:15cqi;
z-index:4;
filter:drop-shadow(0 1cqi 2.6cqi rgba(124,58,237,.55));
}
/* Плавающие фиолетовые шарики вокруг орба. */
.ach.ach--illus .float-ball{
position:absolute;
border-radius:50%;
background:radial-gradient(circle at 30% 28%, #ede9fe 0%, #a78bfa 55%, #6d28d9 95%);
box-shadow:
0 0 2.4cqi rgba(168,85,247,.55),
inset 0 -.6cqi 1.2cqi rgba(0,0,0,.2),
inset 0 .3cqi .6cqi rgba(255,255,255,.6);
z-index:5;
}
.ach.ach--illus .float-ball.fb1{ width:3.4cqi; height:3.4cqi; top:6%; right:28%; }
.ach.ach--illus .float-ball.fb2{ width:4.4cqi; height:4.4cqi; bottom:20%; left:6%; }
.ach.ach--illus .float-ball.fb3{ width:2.4cqi; height:2.4cqi; top:36%; right:6%; }
.ach.ach--illus .float-ball.fb4{ width:2cqi; height:2cqi; bottom:6%; left:40%; }
/* Плавающие гексагон-рамки рядом с орбом. */
.ach.ach--illus .float-hex{
position:absolute;
z-index:2;
opacity:.55;
}
.ach.ach--illus .float-hex svg{display:block; width:100%; height:auto;}
.ach.ach--illus .float-hex.fh1{ top:24%; left:0; width:6.6cqi; }
.ach.ach--illus .float-hex.fh2{ top:6%; right:8%; width:5.2cqi; }
.ach.ach--illus .float-hex.fh3{ bottom:14%; right:-2px; width:7cqi; }
/* ── ТАЙТЛ И SUB ──
Тайтл — главный текст карты. Подвинут ближе к орбу
(padding-top уменьшен до 1.6cqi, было 3.5cqi) и кегль увеличен,
чтобы не терялся на фоне яркой орбы. */
.ach.ach--illus .c-title-block{
position:relative; z-index:2;
text-align:center;
padding:1.6cqi 5cqi 0;
}
.ach.ach--illus .c-title{
margin:0;
font-size:clamp(12.5px, 6.6cqi, 26px);
font-weight:900; letter-spacing:-.018em;
color:#0d0825;
line-height:1.10;
text-wrap:balance;
}
.ach.ach--illus .c-sub{
margin-top:1.4cqi;
font-size:clamp(8.5px, 3.4cqi, 13px);
color:#5e6280;
line-height:1.35;
text-wrap:balance;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* ── НИЖНИЙ FOOTER (диаг → прогресс → XP-награда) ──
По требованию: footer как отдельный блок, прижатый к низу
карточки через margin-top:auto. Карточка — flex-column, центр
(орб + тайтл) держится сверху, footer уходит вниз. Сами размеры
прогресс-бара и XP-капсулы НЕ меняются — переносится только
положение блока вниз. */
/* footer прижат к низу через margin-top:auto (карточка — flex-column).
Дети (c-div/c-prog/c-reward) — обычные блоки, без width:100% и
align-self:stretch, ширина = контейнер минус их поля. */
.ach.ach--illus .c-footer{
margin-top:auto;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ РАЗМЕРЫ FOOTER — как у соседних карт коллекции (.ach--start). ║
║ Используем clamp(min, Ncqi, эталон_px): на ширине эталона ║
║ (340px) выходят ровно эталонные размеры чипа/полосы, а на ║
║ узкой ячейке сетки они пропорционально уменьшаются — чтобы ║
║ футер не был раздут и совпадал с обычными карточками. ║
║ Положение блока (margin-top:auto) НЕ меняется. ║
╚══════════════════════════════════════════════════════════════╝ */
/* divider — размеры как у .ach--start .sc-divider */
.ach.ach--illus .c-div{
position:relative; z-index:2;
display:flex; align-items:center;
margin:4cqi 7.5cqi;
}
.ach.ach--illus .c-div::before,
.ach.ach--illus .c-div::after{
content:""; flex:1; height:1px;
background:rgba(168,85,247,.18);
}
.ach.ach--illus .c-div span{
width:clamp(4px, 2cqi, 7px); height:clamp(4px, 2cqi, 7px);
margin:0 2.6cqi;
background:#a78bfa;
transform:rotate(45deg);
}
/* ── ПРОГРЕСС — размеры как у .ach--start (clamp до эталонных px) ── */
/* Общий футер illus-карт: полоса + XP-чип в одну колонку.
align-items:stretch → оба ребёнка получают одинаковую ширину
(= ширине max-content из них). За счёт display:inline-flex сам
wrapper занимает только нужную ширину, поэтому правило не
ломает положение по центру (margin:auto auto). */
.ach.ach--illus .illus-foot{
position:relative; z-index:2;
/* margin-top:auto прижимает к низу (illus = flex-column).
align-self:center даёт wrapper'у content-width внутри
flex-column родителя (без align-self он растянулся бы
на всю ширину карты). */
margin: auto 0 clamp(10px, 3cqi, 14px);
align-self:center;
display:flex;
flex-direction:column;
align-items:stretch;
gap:clamp(6px, 2.2cqi, 10px);
max-width:calc(100% - 18px);
}
.ach.ach--illus .c-prog{
position:relative; z-index:2;
/* Снимаем горизонтальные margin — шириной управляет .illus-foot. */
margin:0;
display:block;
}
.ach.ach--illus .c-prog-row{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:2.3cqi;
}
.ach.ach--illus .c-prog-row > span:first-child{
color:#7c3aed;
font-size:clamp(7.5px, 3cqi, 10.5px);
font-weight:800;
letter-spacing:.22em;
text-transform:uppercase;
}
.ach.ach--illus .c-prog-row .pp{
display:inline-flex; align-items:baseline; gap:3px;
font-family:'JetBrains Mono',monospace;
font-size:clamp(8px, 3.8cqi, 13px);
font-weight:800;
color:#0f1226;
letter-spacing:.02em;
text-transform:none;
}
.ach.ach--illus .c-prog-row .pp b{
font-size:clamp(9px, 4.4cqi, 15px);
background:linear-gradient(135deg, #7c3aed, #a78bfa);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ach.ach--illus .c-prog-row .pp .sep{ color:rgba(124,58,237,.35); margin:0 .3cqi; }
.ach.ach--illus .c-prog-line{display:block;}
.ach.ach--illus .c-prog-bar{
height:clamp(6px, 3.5cqi, 12px);
border-radius:999px;
background:linear-gradient(180deg, rgba(168,85,247,.06), rgba(168,85,247,.12));
border:1px solid rgba(168,85,247,.18);
box-shadow:
inset 0 1.5px 3px rgba(76,29,149,.10),
inset 0 -1px 0 rgba(255,255,255,.55),
0 1px 0 rgba(255,255,255,.6);
position:relative; overflow:hidden;
}
.ach.ach--illus .c-prog-bar i{
display:block; height:100%; border-radius:999px;
position:relative;
background:
linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 50%),
linear-gradient(90deg, #8b5cf6 0%, #a78bfa 50%, #7c3aed 100%);
box-shadow:
0 0 12px rgba(168,85,247,.55),
0 0 24px rgba(168,85,247,.30),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 1px rgba(76,29,149,.35);
overflow:hidden;
}
.ach.ach--illus .c-prog-bar i::before{
content:""; position:absolute;
top:0; bottom:0;
width:38%;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,0) 100%);
transform:translateX(-100%) skewX(-18deg);
animation:ach-ref-shimmer 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ach-ref-shimmer{
0% { transform:translateX(-130%) skewX(-18deg); }
55% { transform:translateX(280%) skewX(-18deg); }
100% { transform:translateX(280%) skewX(-18deg); }
}
/* ── РЕВАРД: XP-капсула ──
Капсула — не просто полоса, а отдельный «трофей»: насыщенный
лавандовый градиент, рельефные грани, мягкий внутренний свет.
По ТЗ — должна выглядеть объёмной и притягательной (не серой
и не плоской). */
/* ── REWARD-ЧИП — размеры как у .ach--start (clamp до эталонных px) ── */
.ach.ach--illus .c-reward{
position:relative; z-index:2;
margin:4cqi 6.5cqi 6.5cqi;
padding:3.2cqi 4cqi;
border-radius:16px;
background:
linear-gradient(180deg, rgba(255,255,255,.6), rgba(245,243,255,.6)),
radial-gradient(120% 100% at 0% 0%, rgba(168,85,247,.10), transparent 60%);
border:1px solid rgba(168,85,247,.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 0 1px rgba(255,255,255,.35),
0 6px 16px -10px rgba(124,58,237,.25);
display:grid;
/* эталон: одна центрированная плитка XP */
grid-template-columns:auto;
justify-items:center;
align-items:center;
}
.ach.ach--illus .c-rwd-item{
display:flex; align-items:center; gap:2.9cqi;
padding:.6cqi 1.2cqi;
min-width:0;
}
.ach.ach--illus .c-rwd-ico{
width:clamp(20px, 10cqi, 34px); height:clamp(20px, 10cqi, 34px);
border-radius:10px;
display:grid; place-items:center;
flex-shrink:0;
background:linear-gradient(135deg, #ede9fe, #ddd6fe);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 0 1px rgba(255,255,255,.6),
0 4px 10px -4px rgba(124,58,237,.35);
}
.ach.ach--illus .c-rwd-ico svg{
width:clamp(11px, 5.3cqi, 18px); height:clamp(11px, 5.3cqi, 18px);
fill:#7c3aed;
}
.ach.ach--illus .c-rwd-text{
display:flex; flex-direction:column; gap:.85cqi;
line-height:1.1;
min-width:0;
}
.ach.ach--illus .c-rwd-val{
font-size:clamp(8.5px, 3.95cqi, 13.5px);
font-weight:800;
color:#3b1d70;
letter-spacing:.01em;
font-family:'Inter', system-ui, sans-serif;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.ach.ach--illus .c-rwd-lbl{
margin-top:2px;
color:#7c3aed;
font-size:clamp(6px, 2.65cqi, 9px);
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
opacity:.85;
white-space:nowrap;
}
.ach.ach--illus .c-rwd-sep{
width:1px; height:60%;
background:rgba(168,85,247,.22);
justify-self:center;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ FOOTER = ОДИН И ТОТ ЖЕ КОМПОНЕНТ, ЧТО У ОБЫЧНЫХ КАРТ (.ach). ║
║ Химия/биология теперь рендерят .a-prog + .a-xp с теми же ║
║ классами, что «Неделя ритма» → computed-размеры совпадают ║
║ 1:1 (чип content-width, max-width:calc(100% - 18px), полоса ║
║ 3px). Ниже — только перекраска под тему карты, размеры берём ║
║ из базовых .ach .a-xp / .ach .a-prog (НЕ переопределяем). ║
║ (Блок .c-prog/.c-reward выше больше не используется разметкой,║
║ оставлен как legacy-фоллбэк.) ║
╚══════════════════════════════════════════════════════════════╝ */
/* Прогресс-полоса: тот же 78%-бар, но компенсируем разницу паддинга
карты (.ach имеет padding 12px по бокам, .ach--illus — 0), чтобы
computed-ширина совпадала с обычной картой до пикселя. */
.ach.ach--illus .a-prog{
margin:6px auto 0;
width:calc(78% - 18.72px);
}
/* XP-чип: фиолетовая тема (= .ach.epic .a-xp, как у «Недели ритма»).
Размер/форма/паддинги наследуются от базового .ach .a-xp. */
.ach.ach--illus .a-xp{
/* На illus-картах XP-чип — flex-child внутри .illus-foot,
а не absolute (как на базовой .ach). Гасим absolute-позицию
и max-width:calc(100%-18px) (унаследованные от .ach .a-xp),
чтобы wrapper-stretch мог уравнять его ширину с .c-prog-bar. */
position:static;
left:auto; bottom:auto;
transform:none;
max-width:none;
justify-content:center;
background:rgba(168,85,247,.06);
border-color:rgba(168,85,247,.22);
color:#5b21b6;
}
.ach.ach--illus .a-xp .a-xp-ico{ background:rgba(168,85,247,.14); }
.ach.ach--illus .a-xp .a-xp-ico svg{ fill:#7c3aed; }
.ach.ach--illus .a-xp .a-xp-val{ color:#5b21b6; }
.ach.ach--illus .a-xp .a-xp-lbl{ color:#7c3aed; }
/* Биология — синяя тема (= .ach.rare .a-xp). */
.ach.ach--illus.ach--bio .a-xp{
background:rgba(59,130,246,.06);
border-color:rgba(59,130,246,.22);
color:#1e3a8a;
}
.ach.ach--illus.ach--bio .a-xp .a-xp-ico{ background:rgba(59,130,246,.14); }
.ach.ach--illus.ach--bio .a-xp .a-xp-ico svg{ fill:#2563eb; }
.ach.ach--illus.ach--bio .a-xp .a-xp-val{ color:#1e3a8a; }
.ach.ach--illus.ach--bio .a-xp .a-xp-lbl{ color:#2563eb; }
/* ── HOVER АНИМАЦИЯ: тряска колбы (anim-shake) ── */
@keyframes ach-ref-orb-press{
0%,100% { transform:scale(1); }
14% { transform:scale(.97); }
35% { transform:scale(1.05); }
60% { transform:scale(1); }
}
@keyframes ach-ref-shake-flask{
0% { transform: translate(-50%, -50%) rotate(0deg); }
8% { transform: translate(-52%, -51%) rotate(-5deg); }
18% { transform: translate(-48%, -50%) rotate(7deg); }
28% { transform: translate(-52%, -51%) rotate(-8deg); }
40% { transform: translate(-48%, -50%) rotate(8deg); }
52% { transform: translate(-51%, -50%) rotate(-5deg); }
64% { transform: translate(-49%, -50%) rotate(4deg); }
76% { transform: translate(-51%, -50%) rotate(-3deg); }
88% { transform: translate(-50%, -50%) rotate(2deg); }
100% { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes ach-ref-ball-jiggle{
0%,100% { transform: translate(0,0); }
25% { transform: translate(2px,-2px); }
50% { transform: translate(-2px,1px); }
75% { transform: translate(1px,2px); }
}
.ach.ach--illus.anim-shake:hover .ref-orb{ animation: ach-ref-orb-press .9s cubic-bezier(.2,.7,.2,1); }
.ach.ach--illus.anim-shake:hover .ref-flask{ animation: ach-ref-shake-flask .9s cubic-bezier(.2,.7,.2,1); }
.ach.ach--illus.anim-shake:hover .float-ball{ animation: ach-ref-ball-jiggle .45s ease-in-out 2; }
.ach.ach--illus.anim-shake:hover .float-ball.fb2{ animation-delay:.05s; }
.ach.ach--illus.anim-shake:hover .float-ball.fb3{ animation-delay:.12s; }
.ach.ach--illus.anim-shake:hover .float-ball.fb4{ animation-delay:.18s; }
/* ── LOCKED: грейскейл орба, нейтральная палитра ── */
.ach.ach--illus.locked{
border-color:rgba(15,18,38,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 8px 18px -16px rgba(15,18,38,.35);
}
.ach.ach--illus.locked::after{display:none;}
.ach.ach--illus.locked .ref-scene{ opacity:.45; }
.ach.ach--illus.locked .ref-orb{
filter:grayscale(.85);
box-shadow:
0 0 0 1.5cqi #fff,
0 0 0 2.1cqi rgba(15,18,38,.10),
inset 0 -3cqi 9cqi rgba(0,0,0,.35),
inset 0 .6cqi 0 rgba(255,255,255,.20);
}
.ach.ach--illus.locked .ref-flask{ filter:grayscale(.7) drop-shadow(0 0 1cqi rgba(15,18,38,.25)); }
.ach.ach--illus.locked .ref-check{ display:none; }
.ach.ach--illus.locked .float-ball{ filter:grayscale(.7); opacity:.6; }
.ach.ach--illus.locked .float-hex{ opacity:.25; }
.ach.ach--illus.locked .c-rar{
background:linear-gradient(135deg, #6b7387, #8b94a8);
box-shadow: 0 2px 6px -2px rgba(15,18,38,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.ach.ach--illus.locked .c-title{ color:var(--muted); }
.ach.ach--illus.locked .c-sub{ color:var(--muted-2); }
.ach.ach--illus.locked .c-prog-row > span:first-child,
.ach.ach--illus.locked .c-prog-row .pp b{
color:var(--muted-2);
-webkit-text-fill-color:var(--muted-2);
background:none;
}
.ach.ach--illus.locked .c-prog-bar i{
background:linear-gradient(90deg, #cbd5e1, #94a3b8);
box-shadow:none;
}
.ach.ach--illus.locked .c-prog-bar i::before{ animation:none; opacity:0; }
.ach.ach--illus.locked .c-rwd-ico{
background:linear-gradient(135deg, #f1f5f9, #e2e8f0);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px -4px rgba(15,18,38,.2);
}
.ach.ach--illus.locked .c-rwd-ico svg{fill:var(--muted-2);}
.ach.ach--illus.locked .c-rwd-val{color:var(--muted);}
.ach.ach--illus.locked .c-rwd-lbl{color:var(--muted-2);}
/* ════════════════════════════════════════════════════════════
РЕФ-КАРТА · BIO — модификатор поверх .ach--illus.
Геометрия и cqi-разметка идентичны фиолетовой эпической
(та же 1×1 ячейка, тот же aspect 1/1.45) — меняем только
палитру: фиолет → blue/green, чтобы карточка читалась как
«биология» и не путалась с «химией». Никаких размеров не
трогаем — только цвета и градиенты.
════════════════════════════════════════════════════════════ */
.ach.ach--illus.ach--bio{
border:1px solid rgba(59,130,246,.22);
background:
radial-gradient(900px 520px at 50% -8%, rgba(96,165,250,.18), transparent 62%),
radial-gradient(420px 320px at 12% 102%, rgba(96,165,250,.10), transparent 68%),
linear-gradient(180deg, #f5f9ff 0%, #ffffff 48%, #f5f9ff 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 0 0 1px rgba(255,255,255,.55),
0 1px 2px rgba(15,18,38,.05),
0 6px 14px -8px rgba(37,99,235,.28),
0 22px 48px -22px rgba(37,99,235,.42);
}
.ach.ach--illus.ach--bio:hover{
border-color:rgba(59,130,246,.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(15,18,38,.05),
0 12px 24px -10px rgba(37,99,235,.40),
0 34px 60px -22px rgba(37,99,235,.55);
}
/* Светящийся обод по контуру — тот же conic, синие оттенки. */
.ach.ach--illus.ach--bio::after{
background:conic-gradient(from 0deg,
rgba(59,130,246,0),
rgba(96,165,250,.55) 25%,
rgba(59,130,246,.85) 50%,
rgba(96,165,250,.55) 75%,
rgba(59,130,246,0));
}
/* Сцена под орбом — синие haloes, синяя hex-сетка. */
.ach.ach--illus.ach--bio .ref-scene{
background:
radial-gradient(circle at 14% 18%, rgba(96,165,250,.22), transparent 16%),
radial-gradient(circle at 86% 14%, rgba(96,165,250,.18), transparent 16%),
radial-gradient(520px 420px at 50% 30%, rgba(96,165,250,.18), transparent 70%);
}
.ach.ach--illus.ach--bio .ref-scene::before{
background-image:
url("data:image/svg+xml;utf8,");
}
/* Rarity-пилюля «Редкая» — синий градиент. */
.ach.ach--illus.ach--bio .c-rar{
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
linear-gradient(135deg, #93c5fd 0%, #3b82f6 55%, #1d4ed8 100%);
text-shadow:0 1px 0 rgba(30,58,138,.45);
box-shadow:
0 0 0 1px rgba(59,130,246,.25),
0 4px 14px -2px rgba(37,99,235,.55),
0 0 18px -4px rgba(96,165,250,.65),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(30,58,138,.30);
}
/* Орб — голубой/синий, такой же размер и cqi-логика, что у фиолетового. */
.ach.ach--illus.ach--bio .ref-orb{
background:radial-gradient(circle at 50% 36%, #f0f7ff 0%, #93c5fd 45%, #3b82f6 78%, #1d4ed8 100%);
box-shadow:
0 0 0 4px #fff,
0 0 0 6px rgba(255,255,255,.3),
0 0 18px 4px rgba(59,130,246,.55),
0 0 36px 8px rgba(59,130,246,.30),
inset 0 -8px 22px rgba(0,0,0,.4),
inset 0 1.5px 0 rgba(255,255,255,.35);
}
/* Лист с тёплой зелёной заливкой — заметная подсветка через filter,
чтобы он читался поверх синего орба. .ref-leaf — тот же класс,
что у .ref-flask, поэтому позиция / cqi-размеры наследуются. */
.ach.ach--illus.ach--bio .ref-flask.ref-leaf{
filter:
drop-shadow(0 0.6cqi 1.2cqi rgba(21,128,61,.45))
drop-shadow(0 0 2cqi rgba(74,222,128,.5));
}
/* Hex-обводка фоновых гексагонов сцены — синяя (а не фиолетовая). */
.ach.ach--illus.ach--bio .float-hex svg{ stroke:#60a5fa; }
/* Floating balls — голубоватые. */
.ach.ach--illus.ach--bio .float-ball{
background:radial-gradient(circle at 30% 28%, #eff6ff 0%, #60a5fa 55%, #1d4ed8 95%);
box-shadow:
0 0 8px rgba(59,130,246,.55),
inset 0 -2px 4px rgba(0,0,0,.18),
inset 0 1px 2px rgba(255,255,255,.65);
}
/* Прогресс-бар — синий fill вместо фиолетового (1:1 эталон .card.ref.bio). */
.ach.ach--illus.ach--bio .c-prog-bar{
background:linear-gradient(180deg, rgba(59,130,246,.06), rgba(59,130,246,.12));
border:1px solid rgba(59,130,246,.18);
box-shadow:
inset 0 1.5px 3px rgba(13,42,148,.10),
inset 0 -1px 0 rgba(255,255,255,.55),
0 1px 0 rgba(255,255,255,.6);
}
.ach.ach--illus.ach--bio .c-prog-bar i{
background:
linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 50%),
linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #2563eb 100%);
box-shadow:
0 0 12px rgba(59,130,246,.55),
0 0 24px rgba(59,130,246,.30),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 1px rgba(30,58,138,.35);
}
/* Reward-чип — синяя капсула (1:1 эталон .card.ref.bio .c-reward). */
.ach.ach--illus.ach--bio .c-reward{
background:
linear-gradient(180deg, rgba(255,255,255,.7), rgba(244,248,255,.7)),
radial-gradient(120% 100% at 0% 0%, rgba(59,130,246,.08), transparent 60%);
border:1px solid rgba(59,130,246,.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 0 1px rgba(255,255,255,.35),
0 6px 16px -10px rgba(37,99,235,.25);
}
.ach.ach--illus.ach--bio .c-rwd-ico{
background:linear-gradient(135deg, #eff6ff, #dbeafe);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 0 1px rgba(255,255,255,.6),
0 4px 10px -4px rgba(37,99,235,.35);
}
.ach.ach--illus.ach--bio .c-rwd-ico svg{ fill:#2563eb; }
.ach.ach--illus.ach--bio .c-rwd-val{ color:#1e3a8a; }
.ach.ach--illus.ach--bio .c-rwd-lbl{ color:#2563eb; }
/* divider/sep маленьких акцентов — синий ромб вместо фиолетового. */
.ach.ach--illus.ach--bio .c-div span{ background:#60a5fa; }
.ach.ach--illus.ach--bio .c-prog-row > span:first-child{ color:#2563eb; }
.ach.ach--illus.ach--bio .c-prog-row .pp b{
background:linear-gradient(135deg, #2563eb, #60a5fa);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ach.ach--illus.ach--bio .c-prog-row .pp .sep{ color:rgba(37,99,235,.3); }
/* ════════════════════════════════════════════════════════════
«СТАРТ НА ПОРТАЛЕ» — emerald-вариант .ach--illus.
Модификатор .ach--start поверх .ach--illus: та же 1×1
ячейка, та же cqi-разметка, тот же footer-компонент
(.a-prog + .a-xp), что и у Недели ритма/Хим/Био. Меняем
только палитру (emerald), фон, иконку (рюкзак), орбиту
и искры. Эталон — start-na-portale-standalone.html
(.card.ref.start.go).
════════════════════════════════════════════════════════════ */
.ach.ach--illus.ach--start{
border:1px solid rgba(16,185,129,.24);
background:
radial-gradient(900px 520px at 50% -8%, rgba(16,185,129,.18), transparent 62%),
linear-gradient(180deg, #f1fdf7 0%, #fff 60%, #f1fdf7 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(15,18,38,.04),
0 22px 50px -28px rgba(5,150,105,.40);
}
.ach.ach--illus.ach--start:hover{
border-color:rgba(16,185,129,.46);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(15,18,38,.04),
0 30px 60px -24px rgba(5,150,105,.46);
}
/* Conic-glow при hover (как у фиолетовой .ach--illus и синей --bio),
только эмеральд-палитра. */
.ach.ach--illus.ach--start::after{
background:conic-gradient(from 0deg,
rgba(16,185,129,0),
rgba(52,211,153,.55) 25%,
rgba(5,150,105,.85) 50%,
rgba(52,211,153,.55) 75%,
rgba(16,185,129,0));
}
/* Сцена — лёгкий emerald glow, без молекул-hex (их рендер не
вставляет для .ach--start, но на всякий случай скроем и в CSS). */
.ach.ach--illus.ach--start .ref-scene{
background:radial-gradient(420px 320px at 50% 26%, rgba(16,185,129,.16), transparent 70%);
}
.ach.ach--illus.ach--start .ref-scene::before{ display:none; }
.ach.ach--illus.ach--start .ref-scene::after{ filter:none; opacity:.55; }
/* Rarity-pill — эмеральд-градиент с белой точкой (точно как в эталоне). */
.ach.ach--illus.ach--start .c-rar{
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
linear-gradient(135deg, #34d399 0%, #10b981 55%, #047857 100%);
color:#fff;
border:1px solid rgba(255,255,255,.45);
box-shadow:
0 4px 12px -4px rgba(5,150,105,.5),
inset 0 1px 0 rgba(255,255,255,.35);
backdrop-filter:none;
}
.ach.ach--illus.ach--start .c-rar::before{
width:1.9cqi; height:1.9cqi;
border-radius:50%;
background:#fff;
background-image:none;
}
/* ORB — глянцевый эмеральд-шар. */
.ach.ach--illus.ach--start .ref-orb{
overflow:hidden;
background:radial-gradient(circle at 50% 36%, #ecfdf5 0%, #6ee7b7 44%, #10b981 78%, #047857 100%);
box-shadow:
0 0 0 4px #fff,
0 0 0 5px rgba(255,255,255,.35),
0 0 5.4cqi 1cqi rgba(16,185,129,.55),
0 0 12.5cqi 2.5cqi rgba(16,185,129,.30),
inset 0 -2cqi 6cqi rgba(4,120,87,.32),
inset 0 .4cqi 0 rgba(255,255,255,.45);
}
.ach.ach--illus.ach--start .ref-orb::before{
background:radial-gradient(ellipse at center, rgba(255,255,255,.55), transparent 70%);
}
/* Электро-разводы внутри орба не нужны (это для фиолетового). */
.ach.ach--illus.ach--start .ref-orb::after{ display:none; }
/* Рюкзак внутри орба — позиция и тень. */
.ach.ach--illus.ach--start .start-bag{
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%);
width:55%; height:55%;
z-index:3;
filter:drop-shadow(0 1.6cqi 3.2cqi rgba(5,150,105,.32));
transform-origin:50% 70%;
}
/* Орбитальное кольцо вокруг шара. */
.ach.ach--illus.ach--start .start-orbit{
position:absolute; inset:-1.2cqi;
border-radius:50%;
border:.5cqi solid transparent;
border-top-color:rgba(16,185,129,.6);
border-right-color:rgba(16,185,129,.28);
transform:rotate(-32deg);
pointer-events:none;
z-index:1;
}
/* Искры в трёх точках. */
.ach.ach--illus.ach--start .start-spark{
position:absolute;
background:
linear-gradient(90deg, transparent 45%, #6ee7b7 50%, transparent 55%) center/100% .4cqi no-repeat,
linear-gradient(0deg, transparent 45%, #6ee7b7 50%, transparent 55%) center/.4cqi 100% no-repeat;
filter:drop-shadow(0 0 .9cqi #a7f3d0);
pointer-events:none;
z-index:4;
animation:ach-start-spark-twinkle 3s ease-in-out infinite;
}
.ach.ach--illus.ach--start .start-spark.ss1{ width:3.8cqi; height:3.8cqi; top:18%; right:14%; }
.ach.ach--illus.ach--start .start-spark.ss2{ width:2.4cqi; height:2.4cqi; bottom:30%; left:12%; animation-delay:.7s; }
.ach.ach--illus.ach--start .start-spark.ss3{ width:2cqi; height:2cqi; top:54%; right:8%; animation-delay:1.5s; }
@keyframes ach-start-spark-twinkle{
0%,100%{ transform:scale(.7); opacity:.3; }
50% { transform:scale(1.2); opacity:.9; }
}
/* Subtitle в чуть менее насыщенном оттенке (эмеральд). */
.ach.ach--illus.ach--start .c-sub{ color:#3f7d65; }
/* Divider — эмеральд-ромб (если c-div где-то останется). */
.ach.ach--illus.ach--start .c-div::before,
.ach.ach--illus.ach--start .c-div::after{ background:rgba(16,185,129,.20); }
.ach.ach--illus.ach--start .c-div span{ background:#34d399; }
/* Прогресс — эмеральд (для случая, когда полоса .a-prog не используется,
а старая разметка .c-prog ещё показывается). */
.ach.ach--illus.ach--start .c-prog-row > span:first-child{ color:#059669; }
.ach.ach--illus.ach--start .c-prog-row .pp b{
background:linear-gradient(135deg, #047857, #34d399);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ach.ach--illus.ach--start .c-prog-row .pp .sep{ color:rgba(5,150,105,.35); }
.ach.ach--illus.ach--start .c-prog-bar{
background:linear-gradient(180deg, rgba(16,185,129,.06), rgba(16,185,129,.12));
border:1px solid rgba(16,185,129,.18);
box-shadow:
inset 0 1.5px 3px rgba(4,120,87,.10),
inset 0 -1px 0 rgba(255,255,255,.55),
0 1px 0 rgba(255,255,255,.6);
}
.ach.ach--illus.ach--start .c-prog-bar i{
background:
linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 50%),
linear-gradient(90deg, #10b981 0%, #34d399 50%, #059669 100%);
box-shadow:
0 0 12px rgba(16,185,129,.55),
0 0 24px rgba(16,185,129,.30),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 1px rgba(4,120,87,.35);
}
/* XP-чип — эмеральд-тема (тот же компонент, что у обычной карты;
меняем только цвета). */
.ach.ach--illus.ach--start .a-xp{
background:rgba(16,185,129,.06);
border-color:rgba(16,185,129,.22);
color:#065f46;
}
.ach.ach--illus.ach--start .a-xp .a-xp-ico{ background:rgba(16,185,129,.14); }
.ach.ach--illus.ach--start .a-xp .a-xp-ico svg{ fill:#059669; }
.ach.ach--illus.ach--start .a-xp .a-xp-val{ color:#065f46; }
.ach.ach--illus.ach--start .a-xp .a-xp-lbl{ color:#059669; }
/* Процент-плашка слева сверху — эмеральд. */
.ach.ach--illus.ach--start .a-pct{
border-color:rgba(16,185,129,.30);
box-shadow:0 2px 6px -2px rgba(5,150,105,.25);
color:#047857;
}
/* Hover-движение: рюкзак чуть «дышит», орбита крутится медленнее
старта. Базовые ach-ref-* анимации (тряска колбы) для start
отключаем — у нас другая иллюстрация. */
@keyframes ach-start-bag-bob{
0%,100%{ transform:translate(-50%, -50%); }
50% { transform:translate(-50%, -56%); }
}
@keyframes ach-start-orbit-spin{ to{ transform:rotate(328deg); } }
.ach.ach--illus.ach--start:hover .start-bag{
animation:ach-start-bag-bob 2.4s ease-in-out infinite;
}
.ach.ach--illus.ach--start:hover .start-orbit{
animation:ach-start-orbit-spin 9s linear infinite;
}
.ach.ach--illus.ach--start:hover .start-spark{
animation-duration:1.4s; opacity:.9;
}
/* Для start не нужна базовая тряска (anim-shake → ref-flask). */
.ach.ach--illus.ach--start.anim-shake:hover .ref-orb,
.ach.ach--illus.ach--start.anim-shake:hover .ref-flask{
animation:none;
}
/* LEGACY-блок ниже (бывший .ach.ach--start с собственными .sc-* классами)
удалён вместе со старым рендером renderAchievementCardStart. */
/* (LEGACY .ach.ach--start с собственной .sc-* разметкой удалён
вместе со старым renderAchievementCardStart — карточка теперь
идёт через .ach.ach--illus.ach--start, см. блок выше.) */
/* a11y: уважать prefers-reduced-motion и для emerald-карты тоже. */
@media (prefers-reduced-motion: reduce){
.ach.ach--illus.ach--start,
.ach.ach--illus.ach--start *{ animation:none !important; transition:none !important; }
}
/* LOCKED — desaturate орб/рюкзак, приглушённые тексты. */
.ach.ach--illus.ach--start.locked .ref-orb{ filter:grayscale(.85); }
.ach.ach--illus.ach--start.locked .start-bag{ filter:grayscale(.7) drop-shadow(0 1cqi 2cqi rgba(15,18,38,.2)); }
.ach.ach--illus.ach--start.locked .c-title{ color:var(--muted); }
.ach.ach--illus.ach--start.locked .c-sub{ color:var(--muted-2); }
/* ════════════════════════════════════════════════════════════
«НЕДЕЛЯ РИТМА» — dream-вариант .ach--illus.
Модификатор .ach--dream поверх .ach--illus: тот же footprint,
та же 1×1 ячейка, тот же footer (.illus-foot с прогресс-баром
и .a-xp), что и у Старта/Хим/Био. Меняем только палитру (синий
glassy), фон, иллюстрацию (подушка вместо рюкзака/листа/колбы),
вторую орбиту и 4 синие капли вокруг шара.
Эталон — nedelya-ritma-standalone.html (.card.ref.start.dream).
════════════════════════════════════════════════════════════ */
.ach.ach--illus.ach--dream{
border:1px solid rgba(96,165,250,.20);
background:
radial-gradient(900px 540px at 50% -8%, rgba(96,165,250,.18), transparent 62%),
linear-gradient(180deg, #f6faff 0%, #fff 58%, #f6faff 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(15,18,38,.04),
0 22px 50px -28px rgba(37,99,235,.32);
}
.ach.ach--illus.ach--dream:hover{
border-color:rgba(96,165,250,.44);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(15,18,38,.04),
0 30px 60px -24px rgba(37,99,235,.40);
}
/* Conic-glow при hover — синяя версия. */
.ach.ach--illus.ach--dream::after{
background:conic-gradient(from 0deg,
rgba(96,165,250,0),
rgba(147,197,253,.55) 25%,
rgba(37,99,235,.85) 50%,
rgba(147,197,253,.55) 75%,
rgba(96,165,250,0));
}
/* Сцена — лёгкий blue glow без молекул-hex. */
.ach.ach--illus.ach--dream .ref-scene{
background:radial-gradient(440px 340px at 50% 28%, rgba(96,165,250,.12), transparent 70%);
}
.ach.ach--illus.ach--dream .ref-scene::before{ display:none; }
.ach.ach--illus.ach--dream .ref-scene::after{ filter:none; opacity:.6; }
/* Rarity-pill — мягкий белый с синей точкой (карточка common). */
.ach.ach--illus.ach--dream .c-rar{
background:rgba(255,255,255,.85);
color:#3f5a86;
border:1px solid rgba(96,165,250,.32);
box-shadow:
0 1px 2px rgba(15,18,38,.05),
inset 0 1px 0 rgba(255,255,255,.6);
backdrop-filter:blur(8px);
}
.ach.ach--illus.ach--dream .c-rar::before{
width:1.9cqi; height:1.9cqi;
border-radius:50%;
background:#60a5fa;
background-image:none;
box-shadow:0 0 0 .8cqi rgba(96,165,250,.18);
}
/* ORB — глянцевый стеклянный синий шар (overflow:visible — наружные
dream-orbit2 и dream-spark выходят за края). */
.ach.ach--illus.ach--dream .ref-orb{
overflow:visible;
background:radial-gradient(circle at 50% 34%, #ffffff 0%, #eaf3ff 48%, #cfe2fb 100%);
box-shadow:
0 0 0 1.5cqi rgba(255,255,255,.92),
0 0 0 2cqi rgba(147,197,253,.38),
0 0 7cqi 2cqi rgba(96,165,250,.30),
0 4cqi 10cqi -3cqi rgba(37,99,235,.30),
inset 0 -3.5cqi 7cqi rgba(96,165,250,.22),
inset 0 .5cqi 0 rgba(255,255,255,.95);
}
.ach.ach--illus.ach--dream .ref-orb::before{
background:radial-gradient(ellipse at center, rgba(255,255,255,.75), transparent 70%);
z-index:5;
}
.ach.ach--illus.ach--dream .ref-orb::after{ display:none; }
/* Подушка — крупная, по центру шара. */
.ach.ach--illus.ach--dream .dream-pillow{
position:absolute;
left:50%; bottom:12%;
transform:translateX(-50%);
width:60%; height:auto;
z-index:3;
filter:drop-shadow(0 2cqi 3.5cqi rgba(37,99,235,.28));
transform-origin:50% 70%;
}
/* Орбитальное кольцо вокруг шара (используем .start-orbit, перекрашиваем). */
.ach.ach--illus.ach--dream .start-orbit{
position:absolute; inset:-2cqi;
border-radius:50%;
border:.5cqi solid transparent;
border-top-color:rgba(96,165,250,.65);
border-right-color:rgba(147,197,253,.30);
box-shadow:0 0 3cqi rgba(96,165,250,.22);
transform:rotate(-32deg);
pointer-events:none;
z-index:1;
}
/* Вторая встречная орбита внутри (ближе к шару). */
.ach.ach--illus.ach--dream .dream-orbit2{
position:absolute; inset:.5cqi;
border-radius:50%;
border:.4cqi solid transparent;
border-left-color:rgba(191,219,254,.7);
border-bottom-color:rgba(96,165,250,.22);
transform:rotate(28deg);
pointer-events:none;
z-index:1;
}
/* Звёздочки-искры внутри орба, поверх подушки. */
.ach.ach--illus.ach--dream .dream-spark{
position:absolute;
z-index:4;
pointer-events:none;
animation:ach-dream-tw 3s ease-in-out infinite;
}
.ach.ach--illus.ach--dream .dream-spark svg{
display:block; width:100%; height:100%;
fill:#ffffff;
filter:drop-shadow(0 .3cqi .6cqi rgba(37,99,235,.20)) drop-shadow(0 0 1.6cqi rgba(191,219,254,.9));
}
.ach.ach--illus.ach--dream .dream-spark.ds1{ width:12cqi; height:12cqi; top:14%; left:50%; transform:translateX(-50%); }
.ach.ach--illus.ach--dream .dream-spark.ds2{ width:7.4cqi; height:7.4cqi; top:34%; left:14%; animation-delay:.7s; }
.ach.ach--illus.ach--dream .dream-spark.ds3{ width:6.6cqi; height:6.6cqi; top:39%; right:13%; animation-delay:1.4s; }
@keyframes ach-dream-tw{
0%,100%{ opacity:.78; transform:scale(.92); }
50% { opacity:1; transform:scale(1.06); }
}
/* центральная звезда — отдельная анимация, чтобы сохранить translateX(-50%). */
.ach.ach--illus.ach--dream .dream-spark.ds1{ animation-name:ach-dream-tw-c; }
@keyframes ach-dream-tw-c{
0%,100%{ opacity:.8; transform:translateX(-50%) scale(.92); }
50% { opacity:1; transform:translateX(-50%) scale(1.06); }
}
/* Дрейфующие синие капли вокруг шара (используем .dream-ball, не
.float-ball — у dream-карты другая палитра). */
.ach.ach--illus.ach--dream .dream-ball{
position:absolute;
border-radius:50%;
z-index:5;
background:radial-gradient(circle at 32% 28%, #ffffff 0%, #93c5fd 55%, #3b82f6 95%);
box-shadow:
0 0 1.5cqi rgba(59,130,246,.5),
inset 0 -.5cqi 1cqi rgba(13,42,148,.18),
inset 0 .25cqi .5cqi rgba(255,255,255,.7);
}
.ach.ach--illus.ach--dream .dream-ball.b1{ width:3.8cqi; height:3.8cqi; top:33%; right:3%; }
.ach.ach--illus.ach--dream .dream-ball.b2{ width:2.2cqi; height:2.2cqi; top:9%; right:26%; }
.ach.ach--illus.ach--dream .dream-ball.b3{ width:2.6cqi; height:2.6cqi; bottom:20%; left:7%; }
.ach.ach--illus.ach--dream .dream-ball.b4{ width:1.6cqi; height:1.6cqi; bottom:9%; left:42%; }
/* Subtitle — мягкий синий. */
.ach.ach--illus.ach--dream .c-sub{ color:#5b7196; }
/* Divider — синий ромб (если c-div где-то останется). */
.ach.ach--illus.ach--dream .c-div::before,
.ach.ach--illus.ach--dream .c-div::after{ background:rgba(96,165,250,.20); }
.ach.ach--illus.ach--dream .c-div span{ background:#60a5fa; }
/* Прогресс — синий. */
.ach.ach--illus.ach--dream .c-prog-row > span:first-child{ color:#2563eb; }
.ach.ach--illus.ach--dream .c-prog-row .pp b{
background:linear-gradient(135deg, #2563eb, #60a5fa);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ach.ach--illus.ach--dream .c-prog-row .pp .sep{ color:rgba(37,99,235,.35); }
.ach.ach--illus.ach--dream .c-prog-bar{
background:linear-gradient(180deg, rgba(96,165,250,.06), rgba(96,165,250,.13));
border:1px solid rgba(96,165,250,.20);
box-shadow:
inset 0 1.5px 3px rgba(13,42,148,.10),
inset 0 -1px 0 rgba(255,255,255,.55),
0 1px 0 rgba(255,255,255,.6);
}
.ach.ach--illus.ach--dream .c-prog-bar i{
background:
linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%),
linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #2563eb 100%);
box-shadow:
0 0 12px rgba(96,165,250,.55),
0 0 24px rgba(96,165,250,.30),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 1px rgba(13,42,148,.30);
}
/* XP-чип — синяя тема (тот же компонент, что у обычной карты). */
.ach.ach--illus.ach--dream .a-xp{
background:rgba(96,165,250,.06);
border-color:rgba(96,165,250,.22);
color:#1e3a8a;
}
.ach.ach--illus.ach--dream .a-xp .a-xp-ico{ background:rgba(96,165,250,.14); }
.ach.ach--illus.ach--dream .a-xp .a-xp-ico svg{ fill:#2563eb; }
.ach.ach--illus.ach--dream .a-xp .a-xp-val{ color:#1e3a8a; }
.ach.ach--illus.ach--dream .a-xp .a-xp-lbl{ color:#2563eb; }
/* Процент-плашка слева сверху — синяя. */
.ach.ach--illus.ach--dream .a-pct{
border-color:rgba(96,165,250,.30);
box-shadow:0 2px 6px -2px rgba(37,99,235,.25);
color:#1d4ed8;
}
/* Hover-движение: подушка чуть «дышит» вверх, орбиты крутятся
навстречу, искры мерцают чаще, капли дрейфуют. */
@keyframes ach-dream-bob{
0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
50% { transform:translateX(-50%) translateY(-.6cqi) scale(1.025); }
}
@keyframes ach-dream-orbit-spin{ to{ transform:rotate(332deg); } }
@keyframes ach-dream-orbit2-spin{ to{ transform:rotate(-332deg); } }
@keyframes ach-dream-drift{
0%,100%{ transform:translate(0,0); }
50% { transform:translate(-.4cqi,-1cqi); }
}
.ach.ach--illus.ach--dream:hover .dream-pillow{
animation:ach-dream-bob 2.6s ease-in-out infinite;
}
.ach.ach--illus.ach--dream:hover .start-orbit{
animation:ach-dream-orbit-spin 9s linear infinite;
}
.ach.ach--illus.ach--dream:hover .dream-orbit2{
animation:ach-dream-orbit2-spin 13s linear infinite;
}
.ach.ach--illus.ach--dream:hover .dream-spark{ animation-duration:1.5s; }
.ach.ach--illus.ach--dream:hover .dream-ball{
animation:ach-dream-drift 2.4s ease-in-out infinite;
}
.ach.ach--illus.ach--dream:hover .dream-ball.b2{ animation-delay:.3s; }
.ach.ach--illus.ach--dream:hover .dream-ball.b3{ animation-delay:.5s; }
.ach.ach--illus.ach--dream:hover .dream-ball.b4{ animation-delay:.7s; }
/* Базовая anim-shake (тряска колбы) для dream не нужна — у нас
другая иллюстрация и собственный bob. */
.ach.ach--illus.ach--dream.anim-shake:hover .ref-orb,
.ach.ach--illus.ach--dream.anim-shake:hover .ref-flask{
animation:none;
}
/* a11y: уважать prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce){
.ach.ach--illus.ach--dream,
.ach.ach--illus.ach--dream *{ animation:none !important; transition:none !important; }
}
/* LOCKED — обесцветить орб/подушку, приглушить тексты. */
.ach.ach--illus.ach--dream.locked .ref-orb{ filter:grayscale(.85); }
.ach.ach--illus.ach--dream.locked .dream-pillow{
filter:grayscale(.75) drop-shadow(0 1cqi 2cqi rgba(15,18,38,.2));
}
.ach.ach--illus.ach--dream.locked .dream-ball,
.ach.ach--illus.ach--dream.locked .dream-spark{ filter:grayscale(.7); opacity:.55; }
.ach.ach--illus.ach--dream.locked .c-title{ color:var(--muted); }
.ach.ach--illus.ach--dream.locked .c-sub{ color:var(--muted-2); }
.ach-filter button .cnt{
margin-left:6px;
font-family:'JetBrains Mono',monospace;
font-weight:700;
color:var(--muted-2);
}
.ach-filter button.is-on .cnt{ color:var(--muted); }
.ach{
position:relative;
/* Увеличенная пропорция (≈ 1:1.45, как у классической коллекционной
trading-card) — даёт достаточно вертикали и под мини-чип, и под
full-bleed illustrated layout. Все карточки в сетке одного размера. */
aspect-ratio: 1 / 1.45;
width:100%;
border-radius:14px;
/* padding-bottom увеличен — снизу карточки зарезервирована полоса
под .a-xp (XP-чип награды). Чип позиционируется absolute и
стоит на одной высоте у всех ачивок (см. .a-xp ниже). */
padding:14px 12px 44px;
/* Контент в центре (иконка → название → прогресс). XP-чип внизу
и rarity-pill сверху-справа — оба absolute, чтобы у всех
карточек оставаться на одной высоте независимо от центрального
контента. */
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px;
text-align:center;
background:#fff;
border:1px solid var(--line);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
cursor:default;
overflow:hidden;
}
.ach:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.ach .a-art{
width:56px; height:56px;
border-radius:50%;
display:grid; place-items:center;
flex-shrink:0;
position:relative;
z-index:2;
}
.ach .a-art svg{width:24px; height:24px; fill:#fff; position:relative; z-index:3;}
.ach .a-name{
font-size:12px; font-weight:800;
color:var(--ink);
line-height:1.2;
letter-spacing:-.005em;
}
.ach .a-meta{
margin-top:2px;
font-size:10px; color:var(--muted-2);
font-family:'JetBrains Mono',monospace;
letter-spacing:.02em;
}
/* RARITY pill — сверху-справа, absolute. Не входит в flex-flow,
поэтому центральная группа (art+name) визуально остаётся в
центре свободного пространства. */
.ach .a-rar.a-rar--top{
position:absolute;
top:9px; right:9px;
z-index:3;
margin:0;
font-size:9.5px; font-weight:800;
letter-spacing:.12em; text-transform:uppercase;
padding:3px 7px; border-radius:5px;
line-height:1;
}
/* XP-CHIP внизу — закреплён через absolute, у всех ачивок стоит
на одной высоте (bottom:10px). Compound: иконка молнии +
значение + лейбл «награда». Не показывается на .ach--illus —
там свой внутренний reward-блок. */
.ach .a-xp{
position:absolute;
left:50%; bottom:10px;
transform:translateX(-50%);
display:inline-flex;
align-items:center;
gap:5px;
max-width:calc(100% - 18px);
padding:4px 9px;
border-radius:999px;
font-size:10px; font-weight:800;
letter-spacing:.02em;
line-height:1;
z-index:3;
background:rgba(15,18,38,.04);
border:1px solid var(--line-2);
color:var(--ink);
white-space:nowrap;
}
.ach .a-xp .a-xp-ico{
display:inline-grid; place-items:center;
width:14px; height:14px;
border-radius:4px;
background:rgba(168,85,247,.10);
flex-shrink:0;
}
.ach .a-xp .a-xp-ico svg{
width:9px; height:9px;
fill:#7c3aed;
}
.ach .a-xp .a-xp-val{
font-family:'JetBrains Mono',monospace;
font-weight:800;
color:var(--ink);
letter-spacing:.01em;
}
.ach .a-xp .a-xp-lbl{
font-size:8.5px; font-weight:800;
letter-spacing:.12em; text-transform:uppercase;
color:var(--muted-2);
}
.ach .a-xp.a-xp--locked{
opacity:.55;
background:rgba(15,18,38,.03);
}
/* ─── rarity styles, restrained ─── */
/* COMMON */
.ach.common .a-art{
background:linear-gradient(135deg,#cbd5e1,#94a3b8);
}
.ach.common .a-rar.a-rar--top{color:#64748b; background:#f1f5f9;}
.ach.common .a-xp{
background:rgba(100,116,139,.08);
border-color:rgba(100,116,139,.18);
}
.ach.common .a-xp .a-xp-ico{ background:rgba(100,116,139,.14); }
.ach.common .a-xp .a-xp-ico svg{ fill:#475569; }
/* RARE — cool blue */
.ach.rare{
background:#fff;
border-color:rgba(59,130,246,.30);
}
.ach.rare:hover{border-color:rgba(59,130,246,.5);}
.ach.rare .a-art{
background:linear-gradient(135deg,#60a5fa,#3b82f6);
}
.ach.rare .a-rar.a-rar--top{color:#1d4ed8; background:rgba(59,130,246,.08);}
.ach.rare .a-xp{
background:rgba(59,130,246,.06);
border-color:rgba(59,130,246,.22);
color:#1e3a8a;
}
.ach.rare .a-xp .a-xp-ico{ background:rgba(59,130,246,.14); }
.ach.rare .a-xp .a-xp-ico svg{ fill:#2563eb; }
.ach.rare .a-xp .a-xp-val{ color:#1e3a8a; }
.ach.rare .a-xp .a-xp-lbl{ color:#2563eb; }
/* EPIC — violet */
.ach.epic{
background:#fff;
border-color:rgba(168,85,247,.32);
}
.ach.epic:hover{border-color:rgba(168,85,247,.55);}
.ach.epic .a-art{
background:linear-gradient(135deg,#c084fc,#9333ea);
}
.ach.epic .a-rar.a-rar--top{color:#9333ea; background:rgba(168,85,247,.08);}
.ach.epic .a-xp{
background:rgba(168,85,247,.06);
border-color:rgba(168,85,247,.22);
color:#5b21b6;
}
.ach.epic .a-xp .a-xp-ico{ background:rgba(168,85,247,.14); }
.ach.epic .a-xp .a-xp-ico svg{ fill:#7c3aed; }
.ach.epic .a-xp .a-xp-val{ color:#5b21b6; }
.ach.epic .a-xp .a-xp-lbl{ color:#7c3aed; }
/* LEGENDARY — calm gold accent */
.ach.legend{
background:#fff;
border:1px solid rgba(245,158,11,.40);
box-shadow: 0 6px 18px -14px rgba(245,158,11,.4);
}
.ach.legend::before{display:none;}
.ach.legend:hover{border-color:rgba(245,158,11,.6);}
.ach.legend .a-art{
background:linear-gradient(135deg,#fcd34d,#d97706);
box-shadow: 0 4px 10px -4px rgba(245,158,11,.45);
}
.ach.legend .a-art::after{display:none;}
.ach.legend .a-name{color:var(--ink);}
.ach.legend .a-rar.a-rar--top{color:#b45309; background:rgba(245,158,11,.10);}
.ach.legend .a-xp{
background:rgba(245,158,11,.08);
border-color:rgba(245,158,11,.28);
color:#92400e;
}
.ach.legend .a-xp .a-xp-ico{ background:rgba(245,158,11,.18); }
.ach.legend .a-xp .a-xp-ico svg{ fill:#b45309; }
.ach.legend .a-xp .a-xp-val{ color:#92400e; }
.ach.legend .a-xp .a-xp-lbl{ color:#b45309; }
/* MYTHIC */
.ach.myth{
background:#fff;
border-color:rgba(239,68,68,.32);
}
.ach.myth .a-art{
background:linear-gradient(135deg,#f87171,#dc2626);
}
.ach.myth .a-rar.a-rar--top{color:#b91c1c; background:rgba(239,68,68,.08);}
.ach.myth .a-xp{
background:rgba(239,68,68,.06);
border-color:rgba(239,68,68,.22);
color:#7f1d1d;
}
.ach.myth .a-xp .a-xp-ico{ background:rgba(239,68,68,.14); }
.ach.myth .a-xp .a-xp-ico svg{ fill:#dc2626; }
.ach.myth .a-xp .a-xp-val{ color:#7f1d1d; }
.ach.myth .a-xp .a-xp-lbl{ color:#b91c1c; }
/* LOCKED */
.ach.locked{
background:#fafbff;
border-color:var(--line-2);
border-style:dashed;
}
.ach.locked::before,
.ach.locked::after{display:none !important;}
.ach.locked .a-art{
background:linear-gradient(135deg,#e2e6ee,#cbd0dc) !important;
box-shadow:none !important;
}
.ach.locked .a-art svg{fill:#9aa0bf; opacity:.7;}
.ach.locked .a-name{color:var(--muted);}
.ach.locked .a-rar.a-rar--top{color:var(--muted-2); background:rgba(15,18,38,.03);}
/* in-progress mini bar */
.ach .a-prog{
width:78%; height:3px; border-radius:999px;
background:rgba(15,18,38,.06);
overflow:hidden;
margin-top:4px;
}
.ach .a-prog i{
display:block; height:100%; border-radius:999px;
background:var(--ink-2);
}
/* "% earned" tiny badge — quieter */
.ach .a-pct{
position:absolute; top:9px; left:9px;
font-size:9px; font-weight:800; letter-spacing:.04em;
padding:2px 6px; border-radius:5px;
color:var(--muted);
background:rgba(15,18,38,.04);
font-family:'JetBrains Mono',monospace;
}
.ach.legend .a-pct{ background:rgba(245,158,11,.10); color:#b45309;}
.ach.epic .a-pct{ background:rgba(168,85,247,.10); color:#7c3aed;}
.ach.rare .a-pct{ background:rgba(59,130,246,.10); color:#1d4ed8;}
.ach.myth .a-pct{ background:rgba(239,68,68,.10); color:#b91c1c;}
.ach.locked .a-pct{ background:rgba(15,18,38,.04); color:var(--muted-2);}
/* На .ach--illus поверх ref-scene/halo (z-index:1) — поднимаем
pct-плашку, иначе её перекрывает фоновая сцена. Также чуть
насыщеннее фон + белая обводка, чтобы читался поверх лавандового
halo. */
.ach.ach--illus .a-pct{
z-index:4;
top:4cqi; left:4cqi;
padding:1.8cqi 3.4cqi;
font-size:clamp(8.5px, 2.8cqi, 11px);
background:rgba(255,255,255,.85);
border:1px solid rgba(168,85,247,.28);
box-shadow:0 2px 6px -2px rgba(124,58,237,.25);
color:#7c3aed;
}
.ach.ach--illus.ach--bio .a-pct{
border-color:rgba(59,130,246,.30);
box-shadow:0 2px 6px -2px rgba(37,99,235,.25);
color:#1d4ed8;
}
.ach.ach--illus.locked .a-pct{
background:rgba(255,255,255,.7);
border-color:rgba(15,18,38,.10);
color:var(--muted);
box-shadow:none;
}
/* tooltip */
.ach .a-tip{
position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
width:220px; padding:11px 13px;
background:#0f1226; color:#fff; border-radius:10px;
box-shadow:0 12px 28px rgba(15,18,38,.28);
opacity:0; visibility:hidden; transition:opacity .12s;
text-align:left;
z-index:5;
pointer-events:none;
}
.ach:hover .a-tip{opacity:1; visibility:visible;}
.ach .a-tip::after{
content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
border:6px solid transparent; border-top-color:#0f1226;
}
.a-tip .tt-name{font-weight:800; font-size:12.5px; margin-bottom:3px;}
.a-tip .tt-desc{font-size:11.5px; color:#cbd5e1; line-height:1.45;}
.a-tip .tt-meta{
margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.08);
display:flex; align-items:center; justify-content:space-between;
font-size:10.5px; color:#a5b4fc;
font-family:'JetBrains Mono',monospace;
}
/* ════════ TWO COLUMN ROW ════════ */
.row-2{
display:grid;
grid-template-columns: 1.35fr 1fr;
gap:24px;
}
/* ════════ ACTIVITY FEED ════════ */
.feed-list{
position:relative;
padding:0 24px 6px;
}
.feed-list::before{
content:""; position:absolute;
top:4px; bottom:4px; left:38px;
width:2px;
background:linear-gradient(180deg, rgba(124,58,237,.2), rgba(99,102,241,.18), rgba(15,18,38,.04));
border-radius:1px;
}
.feed-head{padding:18px 26px 14px;}
.feed-head h3{margin:0; font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--ink-2);}
.feed-head .live{
display:inline-flex; align-items:center; gap:6px;
color:var(--muted); font-size:11.5px; margin-left:8px;
}
.feed-head .live::before{
content:""; width:7px; height:7px; border-radius:50%;
background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18);
animation:pulseLive 1.6s ease-in-out infinite;
}
@keyframes pulseLive{
50%{box-shadow:0 0 0 5px rgba(16,185,129,.06)}
}
.ev{
position:relative;
display:grid;
grid-template-columns: 30px 1fr auto;
gap:14px;
align-items:center;
padding:11px 0;
}
.ev + .ev{border-top:1px dashed var(--line-2);}
.ev-dot{
position:relative;
z-index:2;
width:30px; height:30px;
border-radius:50%;
display:grid; place-items:center;
background:#fff;
border:2px solid var(--line);
}
.ev-dot svg{width:14px; height:14px;}
.ev.complete .ev-dot{background:#ecfdf5; border-color:rgba(16,185,129,.4);}
.ev.complete .ev-dot svg{fill:#10b981;}
.ev.badge .ev-dot{background:#fef3c7; border-color:rgba(245,158,11,.4); box-shadow:0 0 0 4px rgba(245,158,11,.10);}
.ev.badge .ev-dot svg{fill:#d97706;}
.ev.streak .ev-dot{background:#ffedd5; border-color:rgba(249,115,22,.4);}
.ev.streak .ev-dot svg{fill:#ea580c;}
.ev.level .ev-dot{background:#eef0ff; border-color:rgba(99,102,241,.4); box-shadow:0 0 0 4px rgba(99,102,241,.10);}
.ev.level .ev-dot svg{fill:#4f46e5;}
.ev.test .ev-dot{background:#f3eeff; border-color:rgba(124,58,237,.4);}
.ev.test .ev-dot svg{fill:#7c3aed;}
.ev-text{font-size:13.5px; color:var(--ink-2); line-height:1.4;}
.ev-text b{color:var(--ink); font-weight:700;}
.ev-text .ev-pill{
display:inline-flex; align-items:center; gap:5px;
padding:2px 8px; border-radius:6px;
font-size:11px; font-weight:800;
margin-left:4px;
font-family:'JetBrains Mono',monospace;
}
.ev-pill.xp{background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border:1px solid rgba(245,158,11,.3);}
.ev-pill.pct{background:rgba(99,102,241,.10); color:#4338ca; border:1px solid rgba(99,102,241,.2);}
.ev-time{
font-size:11px; color:var(--muted-2);
font-family:'JetBrains Mono',monospace;
white-space:nowrap;
}
/* ════════ STATS GRID ════════ */
.stats-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.stat{
position:relative;
background:#fff;
border:1px solid var(--line);
border-radius:16px;
padding:18px 18px 16px;
box-shadow:var(--shadow-sm);
transition:transform .2s ease, box-shadow .2s ease;
overflow:hidden;
}
.stat:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.stat::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, var(--primary), var(--violet));
opacity:0;
transition:opacity .2s;
}
.stat:hover::before{opacity:1;}
.stat .s-ico{
width:36px; height:36px; border-radius:11px;
background:var(--bg);
display:grid; place-items:center;
margin-bottom:14px;
}
.stat .s-ico svg{width:18px; height:18px; fill:var(--ink-2);}
.stat.solved .s-ico{background:rgba(99,102,241,.10);} .stat.solved .s-ico svg{fill:#4f46e5;}
.stat.score .s-ico{background:rgba(124,58,237,.10);} .stat.score .s-ico svg{fill:#7c3aed;}
.stat.hours .s-ico{background:rgba(2,132,199,.10);} .stat.hours .s-ico svg{fill:#0284c7;}
.stat.best .s-ico{background:rgba(249,115,22,.10);} .stat.best .s-ico svg{fill:#ea580c;}
.stat.subject .s-ico{background:rgba(16,185,129,.10);} .stat.subject .s-ico svg{fill:#10b981;}
.stat.accuracy .s-ico{background:rgba(245,158,11,.10);} .stat.accuracy .s-ico svg{fill:#d97706;}
.stat .s-val{
font-family:'JetBrains Mono',monospace;
font-size:30px; font-weight:800; letter-spacing:-.02em;
color:var(--ink);
line-height:1;
}
.stat .s-val .unit{font-size:14px; color:var(--muted-2); font-weight:700; margin-left:3px;}
.stat .s-lbl{
margin-top:6px;
font-size:11.5px; font-weight:700;
color:var(--muted);
text-transform:uppercase; letter-spacing:.07em;
}
.stat .s-delta{
margin-top:10px;
font-size:11.5px; font-family:'JetBrains Mono',monospace;
color:var(--muted);
}
.stat .s-delta b{color:#0f9c5d; font-weight:800;}
.stat .s-delta.down b{color:#dc2626;}
/* top % social signal */
.stat .s-top{
position:absolute; top:14px; right:14px;
font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
padding:3px 7px; border-radius:5px;
background:rgba(15,18,38,.04);
color:var(--muted);
font-family:'JetBrains Mono',monospace;
}
/* ════════ COURSE PROGRESS ════════ */
.courses{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.course{
position:relative;
background:#fff;
border:1px solid var(--line);
border-radius:18px;
padding:20px 22px;
box-shadow:var(--shadow-sm);
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
}
.course:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.course::before{
content:""; position:absolute; top:0; left:0; right:0; height:4px;
}
.course.bio::before { background:linear-gradient(90deg,#34d399,#059669);}
.course.chem::before{ background:linear-gradient(90deg,#a78bfa,#7c3aed);}
.course.math::before{ background:linear-gradient(90deg,#fb923c,#ea580c);}
/* glow corner */
.course::after{
content:""; position:absolute; top:-30px; right:-30px;
width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle, var(--c-glow) 0%, transparent 70%);
opacity:.4;
pointer-events:none;
}
.course.bio { --c-glow:rgba(16,185,129,.35);}
.course.chem{ --c-glow:rgba(124,58,237,.35);}
.course.math{ --c-glow:rgba(249,115,22,.25);}
.c-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:2;}
.c-left{display:flex; gap:12px; align-items:center;}
.c-ico{
width:44px; height:44px; border-radius:12px;
display:grid; place-items:center;
color:#fff; font-weight:800; font-size:18px;
flex-shrink:0;
box-shadow: 0 6px 14px -6px rgba(15,18,38,.18), inset 0 1px 0 rgba(255,255,255,.4);
}
.c-ico.bio { background:linear-gradient(135deg,#34d399,#059669);}
.c-ico.chem{ background:linear-gradient(135deg,#a78bfa,#7c3aed);}
.c-ico.math{ background:linear-gradient(135deg,#fb923c,#ea580c);}
.c-name{margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em;}
.c-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.c-lvl{
display:inline-flex; align-items:center; gap:5px;
padding:4px 9px; border-radius:7px;
background:var(--bg);
font-size:11px; font-weight:800;
color:var(--ink-2);
font-family:'JetBrains Mono',monospace;
letter-spacing:.02em;
}
.c-lvl svg{width:11px; height:11px; fill:var(--ink-2);}
.c-bar-wrap{
margin-top:18px;
display:flex; align-items:center; gap:14px;
}
.c-bar{
flex:1; height:10px; border-radius:999px;
background:rgba(15,18,38,.06);
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(15,18,38,.06);
}
.c-bar i{
display:block; height:100%; border-radius:999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.course.bio .c-bar i{background:linear-gradient(90deg,#34d399,#059669);}
.course.chem .c-bar i{background:linear-gradient(90deg,#a78bfa,#7c3aed);}
.course.math .c-bar i{background:linear-gradient(90deg,#fb923c,#ea580c);}
.c-pct{
font-family:'JetBrains Mono',monospace;
font-weight:800; font-size:15px;
color:var(--ink);
min-width:46px;
text-align:right;
}
.c-meta{
margin-top:14px;
display:flex; gap:18px;
font-size:12px; color:var(--muted);
}
.c-meta b{color:var(--ink-2); font-weight:700; font-family:'JetBrains Mono',monospace;}
.c-top{
margin-top:10px;
display:inline-flex; align-items:center; gap:6px;
padding:4px 9px; border-radius:6px;
font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
background:rgba(16,185,129,.10);
color:#047857;
border:1px solid rgba(16,185,129,.18);
font-family:'JetBrains Mono',monospace;
}
/* ════════ RARE COLLECTIBLES ════════ */
.rare-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
}
.frame{
position:relative;
border-radius:18px;
padding:18px 18px 16px;
overflow:hidden;
background:#fafbff;
border:1px solid var(--line);
transition:transform .2s ease, box-shadow .2s ease;
}
.frame:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.frame.legend{
background:#fff;
border:1px solid rgba(245,158,11,.36);
box-shadow: 0 8px 24px -16px rgba(245,158,11,.3);
}
.frame.epic{
background:#fff;
border:1px solid rgba(168,85,247,.32);
}
.frame.rare{
background:#fff;
border:1px solid rgba(59,130,246,.30);
}
.frame.locked{
background:
repeating-linear-gradient(45deg, rgba(15,18,38,.025) 0 8px, rgba(15,18,38,.005) 8px 16px),
linear-gradient(180deg,#fafbff,#f5f6fa);
border-style:dashed;
box-shadow:none;
}
.frame-preview{
height:130px;
border-radius:14px;
background:#fff;
border:1px solid var(--line-2);
display:grid; place-items:center;
position:relative;
overflow:hidden;
margin-bottom:14px;
}
.preview-av{
width:74px; height:74px; border-radius:50%;
overflow:hidden;
position:relative;
z-index:2;
box-shadow: inset 0 -5px 12px rgba(15,18,38,.18);
background:#c7d2fe center/cover no-repeat url('iqmo/avatar-dasha.png');
background-position:center 18%;
background-size:cover;
color:transparent;
font-size:0;
}
.preview-av::before{
content:""; position:absolute; inset:-9px;
border-radius:50%;
z-index:1;
}
.frame.legend .preview-av::before{
background:linear-gradient(135deg, #fcd34d, #f59e0b);
}
.frame.legend .preview-av::after{
content:""; position:absolute; inset:-4px;
border-radius:50%;
border:2px solid #fff;
}
.frame.epic .preview-av::before{
background:linear-gradient(135deg, #c084fc, #9333ea);
}
.frame.epic .preview-av::after{
content:""; position:absolute; inset:-4px;
border-radius:50%;
border:2px solid #fff;
}
.frame.rare .preview-av::before{
background:linear-gradient(135deg, #60a5fa, #3b82f6);
}
.frame.rare .preview-av::after{
content:""; position:absolute; inset:-4px;
border-radius:50%;
border:2px solid #fff;
}
.frame.locked .preview-av{
background:linear-gradient(135deg,#e2e6ee,#cbd0dc);
color:#9aa0bf;
font-size:24px; font-weight:800;
display:grid; place-items:center;
box-shadow:none;
}
/* sparkle dots on legend */
.frame.legend .frame-preview::before{ display:none; }
.frame-rar{
display:inline-flex; align-items:center; gap:5px;
font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
padding:3px 8px; border-radius:6px;
}
.frame.legend .frame-rar{background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border:1px solid rgba(245,158,11,.4);}
.frame.epic .frame-rar{background:rgba(168,85,247,.15); color:#9333ea; border:1px solid rgba(168,85,247,.3);}
.frame.rare .frame-rar{background:rgba(59,130,246,.15); color:#2563eb; border:1px solid rgba(59,130,246,.3);}
.frame.locked .frame-rar{background:var(--bg); color:var(--muted); border:1px solid var(--line);}
.frame-name{
margin:8px 0 2px;
font-size:14px; font-weight:800; letter-spacing:-.01em;
color:var(--ink);
}
.frame.locked .frame-name{color:var(--muted);}
.frame-desc{
font-size:11.5px; color:var(--muted);
line-height:1.4;
}
.frame-foot{
margin-top:12px; padding-top:10px;
border-top:1px dashed var(--line-2);
display:flex; align-items:center; justify-content:space-between;
font-size:11px;
}
.frame-foot .frame-action{
color:var(--primary); font-weight:800;
text-decoration:underline; text-underline-offset:2px;
}
.frame-foot .frame-state{
color:var(--muted); font-family:'JetBrains Mono',monospace;
}
.frame.locked .frame-action{color:var(--muted-2); text-decoration:none;}
.equipped-tag{
position:absolute; top:14px; right:14px;
font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
padding:4px 9px; border-radius:6px;
background:rgba(16,185,129,.10);
color:#047857;
border:1px solid rgba(16,185,129,.22);
}
/* ════════ FOOTER ════════ */
.footnote{
padding:0 8px;
font-size:12px; color:var(--muted);
text-align:center;
line-height:1.55;
}
.footnote a{color:var(--primary); text-decoration:underline; text-underline-offset:2px;}
/* small screens fallback */
@media (max-width: 1180px){
.hero .hero-inner{grid-template-columns: 200px 1fr; }
.h-quick{grid-column:1 / -1;}
.ach-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.rare-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.row-2{grid-template-columns:1fr;}
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.courses{grid-template-columns:1fr;}
.nextrow{grid-template-columns:repeat(2,minmax(0,1fr));}
.nextrow--with-reward{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* IQMO profile — mobile */
@media (max-width:1180px){.hero .hero-inner{grid-template-columns:200px 1fr}.h-quick{grid-column:1/-1}.ach-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.row-2{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.courses{grid-template-columns:1fr}.nextrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.shell{padding:16px 14px 48px;gap:18px}.hero .hero-inner{grid-template-columns:1fr;gap:20px;padding:24px 18px 22px;text-align:center}.av-wrap{margin:0 auto}.h-name-row{justify-content:center}.h-status{justify-content:center}.h-quick{grid-template-columns:1fr 1fr}.nextrow{grid-template-columns:1fr}.nextrow--with-reward{grid-template-columns:1fr}.ngoal.reward-shop .reward-shop__title{white-space:normal}.ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:1fr}.h-name{font-size:28px}.sec-head{flex-direction:column;align-items:flex-start;gap:8px}}
/* ── Settings / account (preserved from legacy profile) ── */
.prof-settings{
scroll-margin-top:24px;
border-radius:20px;
border:1px solid var(--line);
background:#fff;
padding:20px 22px;
box-shadow:var(--shadow-sm);
}
.prof-settings__head{ margin:0 0 14px; }
.prof-settings h2{margin:0 0 4px;font-size:16px;font-weight:800}
.prof-settings__head p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.prof-settings p{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.55;max-width:72ch}
/* ════════════════════════════════════════════════════════════
Сетка карточек 2×2 (десктоп) → 1 колонка (≤640px).
Все карточки одинаковой высоты через grid-auto-rows: 1fr.
════════════════════════════════════════════════════════════ */
.prof-settings .prof-settings__grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
grid-auto-rows:1fr;
gap:12px;
margin-top:0;
}
@media (max-width: 640px){
.prof-settings .prof-settings__grid{ grid-template-columns:1fr; }
}
.prof-settings .prof-settings__box--wide{grid-column:1/-1}
/* Старые ".prof-settings__box" стили оставлены для обратной
совместимости (если кто-то ещё рендерит legacy-разметку).
Новый компактный 2×2 layout — см. .prof-card-acc ниже. */
.prof-settings .prof-settings__box{
border:1px solid var(--line);
border-radius:14px;
padding:16px 18px;
background:#fafbff;
}
/* ────────── .prof-card-acc — компактная карточка-настройка ──────── */
.prof-card-acc{
position:relative;
display:flex; flex-direction:column;
gap:8px;
padding:14px 16px;
border-radius:14px;
border:1px solid var(--line);
background:#fff;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.prof-card-acc:hover{
border-color:rgba(99,102,241,.22);
box-shadow:0 6px 16px -10px rgba(99,102,241,.18);
}
.prof-card-acc__head{
display:flex; align-items:center; gap:10px;
}
.prof-card-acc__ico{
display:inline-grid; place-items:center;
width:34px; height:34px;
border-radius:10px;
flex-shrink:0;
color:var(--ink-2);
background:rgba(15,18,38,.04);
}
.prof-card-acc__ico svg{ width:18px; height:18px; }
.prof-card-acc__title{
margin:0;
font-size:13.5px; font-weight:800;
color:var(--ink); letter-spacing:-.005em;
}
.prof-card-acc__desc{
margin:0;
font-size:12px; color:var(--muted);
line-height:1.5;
}
.prof-card-acc__hint{
margin:auto 0 0;
font-size:11px; color:var(--muted-2);
line-height:1.4;
}
/* tinted icon by card-kind — у каждой карточки своя «тема» */
.prof-card-acc--name .prof-card-acc__ico{ background:rgba(99,102,241,.10); color:#4338ca; }
.prof-card-acc--lock .prof-card-acc__ico{ background:rgba(239,68,68,.08); color:#b91c1c; }
.prof-card-acc--live .prof-card-acc__ico{ background:rgba(16,185,129,.10); color:#047857; }
.prof-card-acc--link .prof-card-acc__ico{ background:rgba(124,58,237,.10); color:#6d28d9; }
/* кнопка-чип внутри карточки (Редактировать / Копировать / Выйти) */
.prof-card-acc__btn{
display:inline-flex; align-items:center; justify-content:center;
height:32px; padding:0 12px;
border-radius:999px;
font-size:12px; font-weight:700;
letter-spacing:.01em;
border:1px solid var(--line);
background:#fff; color:var(--ink-2);
cursor:pointer; flex-shrink:0;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.prof-card-acc__btn:hover{ background:var(--bg); border-color:rgba(99,102,241,.28); }
.prof-card-acc__btn--primary{
background:linear-gradient(135deg, #6366f1, #4f46e5);
border-color:transparent;
color:#fff;
}
.prof-card-acc__btn--primary:hover{ background:linear-gradient(135deg, #4f46e5, #4338ca); color:#fff; }
/* ── имя профиля: display ↔ edit toggle ── */
.prof-card-acc__view{
display:flex; align-items:center; justify-content:space-between;
gap:10px; margin-top:auto;
padding:8px 12px;
border-radius:10px;
background:rgba(15,18,38,.03);
border:1px solid var(--line-2);
}
.prof-card-acc__name{
font-size:13.5px; font-weight:700;
color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
min-width:0;
}
.prof-card-acc__edit{
display:none;
flex-direction:column;
gap:8px;
margin-top:auto;
}
.prof-card-acc__edit-actions{
display:flex; gap:8px; flex-wrap:wrap;
}
.prof-card-acc--name[data-mode="edit"] .prof-card-acc__view{ display:none; }
.prof-card-acc--name[data-mode="edit"] .prof-card-acc__edit{ display:flex; }
.prof-card-acc--name[data-mode="edit"] .prof-card-acc__hint{ display:none; }
/* ── живая активность: компактный switch ── */
.prof-card-acc__toggle{
display:flex; align-items:center; gap:10px;
margin-top:auto;
font-size:12.5px; color:var(--ink-2); line-height:1.35;
cursor:pointer; user-select:none;
}
.prof-card-acc__toggle input{
position:absolute; opacity:0; pointer-events:none;
width:0; height:0;
}
.prof-card-acc__toggle-track{
position:relative; flex-shrink:0;
width:34px; height:20px;
border-radius:999px;
background:rgba(15,18,38,.12);
transition:background .2s ease;
}
.prof-card-acc__toggle-track::after{
content:""; position:absolute;
top:2px; left:2px;
width:16px; height:16px; border-radius:50%;
background:#fff;
box-shadow:0 1px 3px rgba(15,18,38,.18);
transition:transform .2s cubic-bezier(.4,.1,.2,1);
}
.prof-card-acc__toggle input:checked + .prof-card-acc__toggle-track{
background:linear-gradient(135deg, #10b981, #047857);
}
.prof-card-acc__toggle input:checked + .prof-card-acc__toggle-track::after{
transform:translateX(14px);
}
.prof-card-acc__toggle input:focus-visible + .prof-card-acc__toggle-track{
outline:2px solid rgba(99,102,241,.45); outline-offset:2px;
}
.prof-card-acc__toggle-text{ flex:1; }
/* ── публичная ссылка: ID + кнопка копирования в одну строку ── */
.prof-card-acc__row{
display:flex; align-items:center; gap:10px;
margin-top:auto;
padding:6px 6px 6px 12px;
border-radius:10px;
background:rgba(15,18,38,.03);
border:1px solid var(--line-2);
}
.prof-card-acc__id{
flex:1; min-width:0;
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:12px; font-weight:700;
color:#4338ca;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-decoration:none;
}
.prof-card-acc__id:hover{ text-decoration:underline; }
.prof-live-opt{
display:flex;align-items:flex-start;gap:10px;
font-size:13px;color:var(--ink-2);line-height:1.45;cursor:pointer;
}
.prof-live-opt input{margin-top:3px;accent-color:var(--primary)}
.prof-live-act{margin:0 0 20px}
.prof-live-act .live-act-card{margin:0}
.prof-name-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Внутри новой .prof-card-acc--name форма имени имеет свой
layout (input → actions row). column не схлопывает actions-кнопки
в одну строку — они идут под input. */
.prof-card-acc__edit.prof-name-form{ display:none; flex-direction:column; align-items:stretch; }
.prof-card-acc--name[data-mode="edit"] .prof-card-acc__edit.prof-name-form{ display:flex; }
.prof-name-input{
flex:1 1 180px;min-width:0;height:36px;padding:0 12px;
border:1px solid var(--line);border-radius:10px;font-size:13px;
background:#fff;color:var(--ink-2);
}
.prof-card-acc__edit .prof-name-input{ width:100%; }
.prof-name-input:focus{outline:2px solid rgba(99,102,241,.35);border-color:rgba(99,102,241,.45)}
.prof-xp-guide__panel{
border:1px solid var(--line);border-radius:18px;background:#fff;
box-shadow:var(--shadow-sm);overflow:hidden;
}
.prof-xp-guide__panel summary{
list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:8px;padding:16px 20px;
}
.prof-xp-guide__panel summary::-webkit-details-marker{display:none}
.prof-xp-guide__title{font-size:15px;font-weight:800;color:var(--ink-2)}
.prof-xp-guide__hint{font-size:12px;color:var(--muted)}
.prof-xp-guide__body{padding:0 20px 18px;border-top:1px solid var(--line-2)}
.prof-xp-guide__list{margin:14px 0 0;padding-left:18px;color:var(--ink-2);font-size:13px;line-height:1.55}
.prof-xp-guide__list li+li{margin-top:8px}
.prof-xp-guide__note{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.prof-settings .btn{
display:inline-flex;align-items:center;justify-content:center;
height:38px;padding:0 16px;border-radius:999px;
font-size:13px;font-weight:700;border:1px solid var(--line);
background:#fff;color:var(--ink-2);cursor:pointer;
}
.prof-settings .btn:hover{background:var(--bg)}
.prof-settings .btn--danger{border-color:rgba(225,29,72,.35);color:#be123c;background:#fff5f7}
.prof-settings .btn--ghost{background:transparent}
.prof-guest-banner{
border-radius:14px;border:1px solid var(--line);background:#fff;
padding:14px 18px;font-size:13px;color:var(--ink-2);line-height:1.55;
}
.prof-guest-banner a{color:var(--primary);font-weight:700}
.prof-public-banner{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
padding:14px 18px; border-radius:16px;
border:1px solid rgba(99,102,241,.22);
background:linear-gradient(135deg,#eef0ff,#faf5ff);
font-size:13px; color:var(--ink-2);
}
.prof-public-id{font-family:'JetBrains Mono',monospace;font-weight:700;color:#4338ca}
.prof-public-note{width:100%;margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.prof-error{
margin-top:12px;padding:32px 24px;border-radius:20px;border:1px solid var(--line);
background:#fff;text-align:center;box-shadow:var(--shadow-sm);
}
.av-initials{
width:100%;height:100%;display:grid;place-items:center;
font-size:52px;font-weight:800;color:#6366f1;
background:linear-gradient(180deg,#eef0ff 0%,#e0e7ff 100%);
}
.av-wrap[data-frame="legend"] .av-track{background:conic-gradient(from -90deg,#fcd34d 0%,#d97706 100%)}
.av-wrap[data-frame="epic"] .av-track{background:conic-gradient(from -90deg,#c084fc 0%,#7c3aed 100%)}
.av-wrap[data-frame="rare"] .av-track{background:conic-gradient(from -90deg,#60a5fa 0%,#3b82f6 100%)}
/* Footer (IQMO shell) */
.prof-footer{
margin-top:8px;
background:var(--surface);
border:1px solid var(--line);
border-radius:22px;
font-size:13px;
color:var(--muted);
box-shadow:var(--shadow-sm);
}
.prof-footer__inner{
padding:24px 28px;
display:flex;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
}
.prof-footer a:hover{color:var(--primary)}
[hidden]{display:none!important}