/* ---------------------------------------------------------------- палитра */
/* Три режима: «как в Telegram» (переменные клиента), принудительно светлая
и принудительно тёмная. Акцент можно переопределить своим цветом. */
:root{
--bg: var(--tg-theme-bg-color, #ffffff);
--bg2: var(--tg-theme-secondary-bg-color, #f1f3f6);
--card: var(--tg-theme-section-bg-color, #ffffff);
--text: var(--tg-theme-text-color, #0f1114);
--hint: var(--tg-theme-hint-color, #8b93a1);
--accent: var(--accent-user, var(--tg-theme-button-color, #3b82f6));
--on-accent: var(--on-accent-user, var(--tg-theme-button-text-color, #ffffff));
--sep: color-mix(in srgb, var(--hint) 22%, transparent);
--danger: #e0525a;
--warn: #d59027;
--ok: #3aa76d;
--radius: 18px;
--shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.22);
--pad: 16px;
--bar: 62px;
--card-pad: 14px;
--card-gap: 10px;
--fx-ink: #8fb8e0; /* снег на светлом фоне — голубовато-серый */
}
@media (prefers-color-scheme: dark){
:root:not([data-theme]){
--fx-ink:#eaf4ff;
--bg: var(--tg-theme-bg-color, #17212b);
--bg2: var(--tg-theme-secondary-bg-color, #0e1621);
--card:var(--tg-theme-section-bg-color, #1d2733);
--text:var(--tg-theme-text-color, #f5f7fa);
--hint:var(--tg-theme-hint-color, #8fa0b3);
--danger:#f0757c;
--warn: #e5a94a;
--ok: #56c98d;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.8);
}
}
:root[data-theme="light"]{
--fx-ink:#8fb8e0;
--bg:#ffffff; --bg2:#f1f3f6; --card:#ffffff;
--text:#0f1114; --hint:#8b93a1;
--accent:var(--accent-user, #3b82f6);
--on-accent:var(--on-accent-user, #ffffff);
--danger:#e0525a; --warn:#d59027; --ok:#3aa76d;
--shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.22);
}
:root[data-theme="dark"]{
--fx-ink:#eaf4ff;
--bg:#17212b; --bg2:#0e1621; --card:#1d2733;
--text:#f5f7fa; --hint:#8fa0b3;
--accent:var(--accent-user, #4b8bf4);
--on-accent:var(--on-accent-user, #ffffff);
--danger:#f0757c; --warn:#e5a94a; --ok:#56c98d;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.8);
}
/* «Подслушано КМТ»: белый, фирменный красный с аватарки канала */
:root[data-theme="pkmt"]{
--fx-ink:#e1141b;
--bg:#ffffff; --bg2:#f5f5f6; --card:#ffffff;
--text:#141416; --hint:#8a8d94;
--accent:#e1141b; --on-accent:#ffffff;
--danger:#b4232a; --warn:#d58a1f; --ok:#2f9e63;
--shadow: 0 1px 2px rgba(20,20,22,.05), 0 10px 26px -14px rgba(225,20,27,.28);
}
/* линия метро под шапкой: красная полоса со «станциями» */
[data-brand="pkmt"] .top{position:relative}
[data-brand="pkmt"] .top::after{
content:"";position:absolute;left:16px;right:16px;bottom:-4px;height:10px;pointer-events:none;
background:
radial-gradient(circle at 6px 5px, #fff 0 2.2px, #e1141b 2.4px 4.6px, transparent 4.8px) 0 0 / 46px 10px repeat-x,
linear-gradient(#e1141b, #e1141b) 0 4px / 100% 2px no-repeat;
opacity:.9;
}
.pk-card{
display:flex;align-items:center;gap:12px;width:100%;margin:18px 0 6px;padding:12px 14px;
border:0;border-radius:var(--radius);cursor:pointer;text-align:left;font:inherit;color:var(--text);
background:var(--card);box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pk-card:active{transform:scale(.985)}
.pk-logo{flex:0 0 auto;width:46px;height:46px;object-fit:contain}
.pk-txt{flex:1;min-width:0}
.pk-txt b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px}
.pk-txt i{display:block;margin-top:2px;font-style:normal;font-size:12.5px;line-height:1.35;color:var(--hint)}
.pk-go{flex:0 0 auto;padding:8px 12px;border-radius:12px;background:var(--accent);color:var(--on-accent);
font-size:13px;font-weight:750}
.pk-hello{width:96px;height:96px;object-fit:contain}
/* готовые темы: палитра целиком, акцент можно перебить своим */
:root[data-theme="midnight"]{
--fx-ink:#eaf4ff;
--bg:#000000; --bg2:#0b0b0f; --card:#131319;
--text:#f3f3f7; --hint:#8b8b98;
--accent:var(--accent-user, #5b8dff); --on-accent:var(--on-accent-user, #fff);
--danger:#ff6b73; --warn:#e5a94a; --ok:#4fd18b;
--shadow: 0 1px 2px rgba(0,0,0,.6), 0 10px 28px -14px rgba(0,0,0,1);
}
:root[data-theme="ocean"]{
--fx-ink:#dff3fb;
--bg:#0b1f2a; --bg2:#07161e; --card:#103042;
--text:#e9f6fc; --hint:#7fa8ba;
--accent:var(--accent-user, #24c3cb); --on-accent:var(--on-accent-user, #04222a);
--danger:#ff7a84; --warn:#f0b45a; --ok:#4fd1a5;
--shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,20,30,.9);
}
:root[data-theme="sunset"]{
--fx-ink:#ffe6ee;
--bg:#1e1220; --bg2:#160d18; --card:#2b1a2d;
--text:#fdeef3; --hint:#b790a7;
--accent:var(--accent-user, #ff7a59); --on-accent:var(--on-accent-user, #2a1008);
--danger:#ff6f8b; --warn:#ffb648; --ok:#5fd3a0;
--shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(30,5,25,.9);
}
:root[data-theme="forest"]{
--fx-ink:#e6f6ec;
--bg:#0f1b14; --bg2:#0a140f; --card:#17291e;
--text:#eaf6ee; --hint:#8caa98;
--accent:var(--accent-user, #40c078); --on-accent:var(--on-accent-user, #06200f);
--danger:#ff7a84; --warn:#e8b45a; --ok:#57d68d;
--shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,20,10,.9);
}
:root[data-theme="sakura"]{
--fx-ink:#e39ab8;
--bg:#fff7fa; --bg2:#ffecf3; --card:#ffffff;
--text:#2c1f26; --hint:#ab8b99;
--accent:var(--accent-user, #ff6f9c); --on-accent:var(--on-accent-user, #fff);
--danger:#e0526a; --warn:#d2913a; --ok:#3aa87a;
--shadow: 0 1px 2px rgba(120,60,90,.07), 0 8px 24px -12px rgba(160,80,120,.28);
}
:root[data-theme="coffee"]{
--fx-ink:#c2a683;
--bg:#f8f3ea; --bg2:#efe5d6; --card:#fffdf9;
--text:#2f2721; --hint:#9d8a77;
--accent:var(--accent-user, #a9743f); --on-accent:var(--on-accent-user, #fff);
--danger:#c0554e; --warn:#b78334; --ok:#5a8f5e;
--shadow: 0 1px 2px rgba(90,70,40,.07), 0 8px 24px -12px rgba(110,80,45,.28);
}
/* размер текста */
:root[data-fs="s"]{ --fs:.92 }
:root[data-fs="l"]{ --fs:1.1 }
:root{ --fs:1 }
body{font-size:calc(15px * var(--fs))}
.subject{font-size:calc(16px * var(--fs))}
.dayhead h1{font-size:calc(23px * var(--fs))}
.chip{font-size:calc(12.5px * var(--fs))}
.news h3{font-size:calc(15.5px * var(--fs))}
.talk{font-size:calc(13.5px * var(--fs))}
/* плотный режим и выключенные анимации */
:root[data-compact="1"]{ --card-pad:10px; --card-gap:7px; --radius:15px }
:root[data-compact="1"] .subject{font-size:15px;margin-bottom:4px}
:root[data-compact="1"] .num{flex-basis:34px;height:34px;font-size:15px;border-radius:11px}
:root[data-compact="1"] .chip{padding:3px 7px;font-size:11.5px}
:root[data-motion="0"] *{animation:none !important;transition:none !important}
:root{
--heart:url('data:image/svg+xml;utf8,');
--petal:url('data:image/svg+xml;utf8,');
--leaf:url('data:image/svg+xml;utf8,');
--bucket:url('data:image/svg+xml;utf8,');
--lips:url('data:image/svg+xml;utf8,');
--money:url('data:image/svg+xml;utf8,');
--crownm:url('data:image/svg+xml;utf8,');
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* атрибут hidden должен побеждать любые наши display-правила */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--text);
font:15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
padding-bottom:calc(var(--bar) + 12px + env(safe-area-inset-bottom));
overscroll-behavior-y:contain;
overflow-x:hidden; /* ничего не должно распирать экран вбок */
}
button,input,textarea,select{font:inherit;color:inherit}
.glow{
position:fixed; inset:-40% 0 auto 0; height:340px; pointer-events:none; z-index:0;
background:radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
filter:blur(24px); opacity:.5;
}
/* ---------------------------------------------------------------- иконки */
.ic{
width:1em;height:1em;flex:0 0 auto;display:block;
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
}
.ic-slot{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:0}
.ic-slot.big{font-size:22px;color:var(--hint)}
.ic-slot.tiny{font-size:13px}
/* --------------------------------------------------------- приветствие */
.hello{
position:fixed;inset:0;z-index:200;display:grid;place-items:center;
background:var(--bg);padding:32px 26px;
transition:opacity .45s ease, visibility .45s;
}
.hello[hidden]{display:none}
.hello.gone{opacity:0;visibility:hidden;pointer-events:none}
.hello-inner{width:100%;max-width:360px;text-align:center;animation:helloUp .5s cubic-bezier(.2,.8,.25,1)}
@keyframes helloUp{from{opacity:0;transform:translateY(16px)}}
.hello-mark{
width:66px;height:66px;margin:0 auto 20px;display:grid;place-items:center;
border-radius:22px;color:var(--accent);font-size:32px;
background:color-mix(in srgb, var(--accent) 13%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.hello h1{margin:0 0 6px;font-size:26px;font-weight:760;letter-spacing:-.5px;line-height:1.2}
.hello p{margin:0;font-size:14px;color:var(--hint)}
.hello-form{margin-top:26px;text-align:left}
.hello-form[hidden]{display:none}
.hello-form label{display:block;margin-bottom:8px;font-size:13px;color:var(--hint)}
.hello-form .btn{margin-top:12px}
.field{
width:100%;padding:13px 15px;border:0;border-radius:14px;
background:var(--bg2);outline:none;
}
.field:focus{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent)}
.chip-btn{
margin-top:9px;padding:8px 13px;border:0;border-radius:999px;
background:var(--bg2);color:var(--hint);font-size:13px;font-weight:640;cursor:pointer;
}
.chip-btn:active{transform:scale(.96)}
.chip-btn.small{margin:0;padding:7px 12px;font-size:12.5px;color:var(--accent);
background:color-mix(in srgb, var(--accent) 13%, transparent)}
.chip-btn.wide{display:block;width:100%;margin-top:8px;text-align:center}
/* список групп внутри знакомства */
.hello-groups{
max-height:38vh;overflow-y:auto;margin-top:10px;
display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;
}
.hello-groups .spec{grid-column:1/-1;margin:8px 0 2px}
.hello-groups .empty-line{grid-column:1/-1;color:var(--hint);font-size:13px;padding:8px 2px}
/* ------------------------------------------------------------------ шапка */
.top{
position:sticky; top:0; z-index:20;
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
background:color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter:saturate(180%) blur(18px);
-webkit-backdrop-filter:saturate(180%) blur(18px);
}
.group-chip{
display:inline-flex; align-items:center; gap:8px;
padding:8px 11px 8px 10px; border:0; border-radius:999px;
background:color-mix(in srgb, var(--accent) 13%, var(--card));
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
font-weight:650; letter-spacing:.2px; cursor:pointer;
transition:transform .15s ease;
}
.group-chip:active{transform:scale(.96)}
/* аватар: из Telegram, если есть, иначе инициал */
.ava{
position:relative;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
width:26px;height:26px;border-radius:50%;
background:color-mix(in srgb, var(--accent) 22%, var(--bg2));
color:var(--accent);font-size:12px;font-weight:800;line-height:1;
box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
}
.ava .ini{font-style:normal;line-height:1;user-select:none}
/* фото ложится поверх буквы и проявляется только когда действительно загрузилось */
.ava img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transition:opacity .18s ease;
}
.ava img.ok{opacity:1}
.ava.sm{width:26px;height:26px;font-size:12px}
.ava.md{width:34px;height:34px;font-size:13px}
.ava.lg{width:76px;height:76px;font-size:30px;box-shadow:0 0 0 2.5px color-mix(in srgb, var(--accent) 35%, transparent)}
.group-chip{padding-left:6px}
.group-chip .ic-slot{opacity:.55;font-size:15px}
.top-right{display:flex;gap:8px}
.icon-btn{
position:relative; width:38px;height:38px;display:grid;place-items:center;
border:0;border-radius:50%;background:var(--card);box-shadow:var(--shadow);cursor:pointer;
color:var(--hint);font-size:19px;transition:transform .15s ease,color .2s;
}
.icon-btn:active{transform:scale(.9)}
.icon-btn.spin .ic{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ------------------------------------------------------------- вкладки дней */
.tabs{
position:relative; z-index:10;
display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
padding:4px var(--pad) 12px;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
flex:0 0 auto; min-width:66px; padding:8px 12px; border:0; border-radius:14px;
background:var(--card); box-shadow:var(--shadow); cursor:pointer; text-align:center;
transition:transform .18s cubic-bezier(.2,.9,.3,1.3), background .2s, color .2s;
}
.tab b{display:block;font-size:15px;font-weight:700;letter-spacing:.2px}
.tab i{display:block;font-size:11px;font-style:normal;opacity:.6;margin-top:1px;text-transform:lowercase}
.tab .pill{display:inline-block;margin-top:4px;font-size:10px;opacity:.7}
.tab.today{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent)}
.tab.on{background:var(--accent);color:var(--on-accent);transform:translateY(-2px) scale(1.03)}
.tab.on i,.tab.on .pill{opacity:.85}
.tab:active{transform:scale(.94)}
/* --------------------------------------------------------------- контент */
.page{position:relative;z-index:1}
.page[hidden]{display:none}
main{padding:0 var(--pad)}
.dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 14px}
.dayhead h1{margin:0;font-size:23px;line-height:1.15;font-weight:760;letter-spacing:-.3px}
.dayhead span{font-size:12px;color:var(--hint);white-space:nowrap}
.badge-rel{
display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;
font-size:11px;font-weight:700;vertical-align:middle;
background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
}
.talk{
display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:12px 14px;
border-radius:var(--radius); background:var(--bg2); font-size:13.5px;
}
.talk .ic-slot{color:var(--hint)}
.talk b{font-weight:650}
.talk .room{margin-left:auto;font-weight:700;color:var(--accent);white-space:nowrap}
.card{
position:relative; display:flex; gap:12px;
margin-bottom:var(--card-gap); padding:var(--card-pad);
border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow);
animation:rise .38s cubic-bezier(.2,.8,.25,1) backwards;
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
.card.now{box-shadow:var(--shadow), inset 0 0 0 1.5px var(--accent)}
.card.now::after{
content:"сейчас"; position:absolute; top:-8px; right:12px;
padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.4px;
background:var(--accent); color:var(--on-accent);
animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent)}
70%{box-shadow:0 0 0 10px transparent}
100%{box-shadow:0 0 0 0 transparent}
}
.num{
flex:0 0 42px; height:42px; display:grid; place-items:center;
border-radius:13px; font-size:17px; font-weight:800;
background:color-mix(in srgb, var(--accent) 11%, transparent); color:var(--accent);
}
.card.done{opacity:.72}
.card.done .num{background:var(--bg2);color:var(--hint)}
.body{min-width:0;flex:1}
.subject{margin:1px 0 6px;font-size:16px;font-weight:680;line-height:1.25;letter-spacing:-.1px;word-break:break-word}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.chip{
display:inline-flex;align-items:center;gap:5px;
padding:4px 9px;border-radius:9px;font-size:12.5px;background:var(--bg2);color:var(--hint);
}
.chip .ic{opacity:.85}
.chip.time{font-variant-numeric:tabular-nums;font-weight:640;color:var(--text)}
.chip.room{background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--accent);font-weight:700}
.gap{
margin:6px 0 14px; padding:8px 12px; border-radius:12px;
border:1px dashed var(--sep); color:var(--hint); font-size:12.5px; text-align:center;
}
.empty{padding:48px 20px;text-align:center;color:var(--hint);animation:rise .4s ease backwards}
.empty .ic-slot{font-size:40px;color:var(--sep);margin-bottom:14px;justify-content:center}
.empty b{display:block;color:var(--text);font-size:17px;margin-bottom:4px}
/* --------------------------------------------------- панель и сегменты */
.panel{margin-bottom:12px;padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.panel-head .ic-slot{font-size:20px;color:var(--accent)}
.panel-head b{display:block;font-size:14.5px;font-weight:700}
.panel-head i{display:block;font-style:normal;font-size:12px;color:var(--hint);margin-top:1px}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--bg2)}
.seg.thin{margin-bottom:12px}
.seg button{
flex:1;padding:9px 8px;border:0;border-radius:11px;background:transparent;
font-size:13px;font-weight:650;color:var(--hint);cursor:pointer;transition:.2s;
}
.seg button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
/* ------------------------------------------------------------- новости */
.news{
position:relative;margin-bottom:10px;padding:14px;border-radius:var(--radius);
background:var(--card);box-shadow:var(--shadow);
animation:rise .35s cubic-bezier(.2,.8,.25,1) backwards;
}
.news-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.news.has-drop .news-top{padding-right:30px}
.kind{
display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;
font-size:11px;font-weight:750;letter-spacing:.3px;
}
.kind .ic{font-size:12px}
.kind.new{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.kind.changed{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)}
.kind.manual{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger)}
.news-top .when{margin-left:auto;font-size:11.5px;color:var(--hint);white-space:nowrap}
.news h3{margin:2px 0 2px;font-size:15.5px;font-weight:700;letter-spacing:-.1px}
.news .where{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--hint);margin-bottom:8px}
.news .where b{color:var(--accent)}
.news .goto{
display:flex;align-items:center;justify-content:center;gap:7px;
width:100%;margin-top:10px;padding:10px;border:0;border-radius:12px;
background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
font-size:13.5px;font-weight:700;cursor:pointer;
}
.news .goto:active{transform:scale(.98)}
.news .drop{
position:absolute;top:10px;right:10px;width:28px;height:28px;
display:grid;place-items:center;border:0;border-radius:50%;
background:var(--bg2);color:var(--hint);font-size:14px;cursor:pointer;
}
.dl{display:flex;gap:9px;padding:7px 0;border-top:1px solid var(--sep);font-size:13.5px}
.dl:first-of-type{border-top:0}
.dl .mark{flex:0 0 20px;display:grid;place-items:center;font-size:14px;padding-top:2px}
.dl.added .mark{color:var(--ok)}
.dl.removed .mark{color:var(--danger)}
.dl.changed .mark{color:var(--warn)}
.dl .what{min-width:0;flex:1}
.dl .pnum{font-weight:750;margin-right:4px;color:var(--hint)}
.dl .was{color:var(--hint);text-decoration:line-through}
.dl .now{font-weight:640}
.dl .ln{display:flex;align-items:baseline;gap:5px}
.dl .ln.to{margin-top:2px;color:var(--warn)}
.dl .ln.to .ic{font-size:12px;flex:0 0 auto;align-self:center}
.dl .ln.to .now{color:var(--text)}
/* --------------------------------------------------------------- админ */
.astrip{
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;
padding:12px 8px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);
}
/* ---- шапка админки: онлайн крупно, под ним сводка ---- */
.ahead{
margin-bottom:12px;padding:14px;border-radius:var(--radius);
background:var(--card);box-shadow:var(--shadow);
}
.ahead-live{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.ahead-live b{font-size:26px;font-weight:820;line-height:1;font-variant-numeric:tabular-nums}
.ahead-live i{font-style:normal;font-size:13px;color:var(--hint)}
.ahead-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ahead-nums div{text-align:center;min-width:0}
.ahead-nums b{
display:block;font-size:17px;font-weight:780;font-variant-numeric:tabular-nums;
}
.ahead-nums i{
display:block;font-style:normal;font-size:10.5px;color:var(--hint);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;
}
/* ---- разделы плиткой: в строку семь штук не влезало и распирало экран ---- */
.anav{
/* десять разделов — два ряда по пять */
display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px;
}
.anav button{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
min-width:0;padding:11px 3px;border:0;border-radius:15px;cursor:pointer;
background:var(--bg2);color:var(--hint);
font-family:inherit;font-size:11px;font-weight:640;
transition:background .18s,color .18s,transform .12s ease;
}
.anav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anav button .ic-slot{font-size:19px;line-height:0}
.anav button:active{transform:scale(.95)}
.anav button.on{
background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);
box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--accent) 35%, transparent);
}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.two-up .btn{margin:0}
.astrip div{text-align:center;min-width:0}
.astrip b{display:block;font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.astrip i{font-style:normal;font-size:10px;color:var(--hint);line-height:1.2;display:block;margin-top:2px}
label.mini,p.mini{
display:block;margin:2px 2px 6px;font-size:11.5px;font-weight:700;
letter-spacing:.4px;text-transform:uppercase;color:var(--hint);
}
p.mini{text-transform:none;font-weight:400;letter-spacing:0;font-size:12px;margin-bottom:10px}
/* превью сообщения — как оно придёт в Telegram */
.preview{
margin:2px 0 10px;padding:12px 14px;border-radius:14px;
background:var(--bg2);border-left:3px solid var(--accent);
}
.pv-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--accent);margin-bottom:6px}
.pv-body{font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.pv-body i{color:var(--hint)}
.pv-sign{margin-top:8px;padding-top:7px;border-top:1px solid var(--sep);font-size:12px;color:var(--hint);font-style:italic}
.hist{
position:relative;padding:10px 40px 10px 0;border-bottom:1px solid var(--sep);
}
.hist:last-child{border-bottom:0}
.hist b{display:block;font-size:13.5px;font-weight:640;line-height:1.35}
.hist i{font-style:normal;font-size:11.5px;color:var(--hint)}
.hist .drop{position:absolute;top:8px;right:0}
.danger-zone{box-shadow:var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent)}
.danger-zone h3 .ic-slot{color:var(--danger)}
.astat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.astat div{padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.astat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.astat i{font-style:normal;font-size:12px;color:var(--hint)}
.block{margin-bottom:12px;padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.block h3{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:15px;font-weight:720}
.block h3 .ic-slot{font-size:17px;color:var(--accent)}
.block .row{display:flex;gap:8px;font-size:13px;padding:5px 0;color:var(--hint)}
.block .row b{margin-left:auto;color:var(--text);font-weight:640;text-align:right}
.ulist{max-height:340px;overflow-y:auto;margin:0 -4px}
/* ------------------------------------------------ реферальные ссылки */
.refcard{
padding:12px;margin-bottom:10px;border-radius:16px;background:var(--bg2);
}
.reftop{display:flex;align-items:center;gap:10px;min-width:0}
.reftop .uinfo{flex:1;min-width:0}
.reftop b{display:block;font-size:14.5px;font-weight:750}
.reftop i{
display:block;font-style:normal;font-size:11.5px;color:var(--hint);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.refnum{
flex:0 0 auto;display:grid;place-items:center;min-width:34px;height:30px;padding:0 9px;
border-radius:11px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);
}
.refstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:11px 0 10px}
.refstats .ustat{padding:9px 4px;background:var(--card)}
.refstats .ustat b{font-size:15px}
.refstats .ustat i{font-size:10px}
.refacts{display:flex;flex-wrap:wrap;gap:7px}
.chip-btn.danger{color:var(--danger)}
.refcard .ulist{margin-top:10px}
.onchip{
display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 8px;
margin-left:6px;border-radius:999px;font-size:13px;font-weight:800;
font-variant-numeric:tabular-nums;
background:color-mix(in srgb, var(--ok) 22%, transparent);color:var(--ok);
}
.dot-live{
flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--ok);
box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent);
animation:livePulse 2s ease-out infinite;
}
@keyframes livePulse{
0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 65%, transparent)}
70%{box-shadow:0 0 0 7px transparent}
100%{box-shadow:0 0 0 0 transparent}
}
.uitem{
display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;
border:0;border-bottom:1px solid var(--sep);background:transparent;
text-align:left;cursor:pointer;
}
.uitem:last-child{border-bottom:0}
.uitem:active{background:var(--bg2)}
.uinfo{min-width:0;flex:1}
.uinfo b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uinfo i{display:block;font-style:normal;font-size:11.5px;color:var(--hint)}
.utags{display:flex;gap:3px;flex:0 0 auto;color:var(--hint);font-size:12px}
.utags .on{color:var(--accent)}
textarea, select{
width:100%;padding:11px 13px;border:0;border-radius:13px;
background:var(--bg2);outline:none;resize:vertical;
}
textarea{min-height:84px;margin-bottom:10px;line-height:1.4}
select{margin-bottom:10px;appearance:none}
select[hidden]{display:none}
.btn{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:13px;border:0;border-radius:14px;
background:var(--accent);color:var(--on-accent);
font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s ease,opacity .2s;
}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55}
.btn.ghost{background:var(--bg2);color:var(--text)}
.btn.danger{background:var(--danger);color:#fff}
.btn + .btn{margin-top:8px}
/* ------------------------------------------------------------- таб-бар */
.tabbar{
position:fixed;left:0;right:0;bottom:0;z-index:30;
display:flex;
padding:6px 8px calc(6px + env(safe-area-inset-bottom));
background:color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-top:1px solid var(--sep);
}
.tabbar button{
position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:6px 1px;border:0;background:transparent;color:var(--hint);cursor:pointer;
font-size:10px;font-weight:640;white-space:nowrap;letter-spacing:-.1px;
transition:color .2s,transform .15s ease;
}
.tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tabbar.six button{font-size:9px;letter-spacing:-.3px;padding-left:0;padding-right:0}
.tabbar.six button .ic{font-size:19px;width:19px;height:19px}
.tabbar.seven button{font-size:8.5px;letter-spacing:-.4px;padding-left:0;padding-right:0;gap:2px}
.tabbar.seven button .ic{font-size:18px;width:18px;height:18px}
.tabbar.seven .count{right:calc(50% - 18px)}
.tabbar button[hidden]{display:none}
.tabbar button .ic{font-size:21px;width:21px;height:21px}
.tabbar button.on{color:var(--accent)}
.tabbar button:active{transform:scale(.92)}
.tabbar .count{
position:absolute;top:2px;right:calc(50% - 22px);
min-width:16px;height:16px;padding:0 4px;border-radius:9px;
background:var(--danger);color:#fff;font-size:10px;font-style:normal;font-weight:800;
display:grid;place-items:center;
}
.tabbar .count[hidden]{display:none}
/* ---------------------------------------------------------------- шторки */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-wrap[hidden]{display:none}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.sheet{
position:relative;width:100%;max-height:86vh;display:flex;flex-direction:column;
background:var(--bg);border-radius:22px 22px 0 0;
padding:8px var(--pad) calc(14px + env(safe-area-inset-bottom));
animation:up .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes up{from{transform:translateY(100%)}}
.grabber{width:38px;height:4px;border-radius:2px;background:var(--sep);margin:2px auto 10px}
.sheet h2{margin:0 0 4px;font-size:18px;font-weight:720}
.sheet .sub{margin:0 0 10px;font-size:12.5px;color:var(--hint)}
.search{
width:100%;padding:11px 14px;margin-bottom:10px;border:0;border-radius:13px;
background:var(--bg2);outline:none;
}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.spec{margin:14px 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--hint)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.gitem{
padding:11px 8px;border:0;border-radius:13px;background:var(--bg2);
font-size:13.5px;font-weight:650;cursor:pointer;transition:transform .15s ease;
}
.gitem:active{transform:scale(.94)}
.gitem.on{background:var(--accent);color:var(--on-accent)}
.switch-row,.row-line{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--sep)}
.row-line{border-bottom:0}
.switch-row.locked{opacity:.5}
.switch-row .txt,.row-line .txt{flex:1;display:flex;flex-direction:column;min-width:0}
.switch-row .txt i,.row-line .txt i{font-style:normal;font-size:12px;color:var(--hint)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{
display:block;width:46px;height:28px;border-radius:999px;background:var(--sep);
position:relative;transition:background .22s ease;
}
.switch .track::after{
content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.3,1.4,.5,1);
}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track::after{transform:translateX(18px)}
.note{font-size:12px;color:var(--hint);margin:12px 4px 0}
.group-title{
margin:18px 4px 6px;font-size:11.5px;font-weight:750;letter-spacing:.6px;
text-transform:uppercase;color:var(--hint);
}
.group-title:first-child{margin-top:4px}
.row-line.tight{padding-bottom:4px}
/* ---------------------------------------------------------- эффекты фона */
/* Частицы рисуются CSS-фигурами: снежинка — мягкий круг с бликом,
звезда и сердце — SVG-маски. Ни одного эмодзи. */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* во время партии фон не виден за полем — снимаем его совсем,
иначе телефон впустую анимирует десятки частиц и игра дёргается */
body.playing .fx,
body.playing .glow{display:none}
.fx i{
position:absolute;top:-8vh;display:block;
animation:fxfall var(--dur,12s) linear var(--delay,0s) infinite;
will-change:transform;
}
.fx i b{
display:block;width:var(--size,7px);height:var(--size,7px);
animation:fxsway calc(var(--dur,12s) / 3.5) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes fxfall{
0%{transform:translate3d(0,-8vh,0);opacity:0}
6%{opacity:var(--o,.8)}
92%{opacity:var(--o,.8)}
100%{transform:translate3d(var(--drift,0px),112vh,0);opacity:0}
}
@keyframes fxsway{
from{transform:translateX(-9px) rotate(-12deg)}
to{transform:translateX(9px) rotate(12deg)}
}
/* снег — круглая снежинка с бликом и лёгким ореолом */
.fx-snow i b{
border-radius:50%;
background:radial-gradient(circle at 34% 32%,
color-mix(in srgb, var(--fx-ink) 30%, #fff) 0%,
var(--fx-ink) 46%,
color-mix(in srgb, var(--fx-ink) 80%, transparent) 72%,
transparent 74%);
box-shadow:0 0 6px color-mix(in srgb, var(--fx-ink) 55%, transparent);
}
/* звёзды — четырёхлучевая искра */
.fx-stars i b{
background:linear-gradient(160deg,#fff3c4,#ffd166);
clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
filter:drop-shadow(0 0 5px rgba(255,180,60,.85));
animation-name:fxsway,fxtwinkle;
animation-duration:calc(var(--dur,12s) / 3.5), 2.4s;
animation-iteration-count:infinite,infinite;
animation-direction:alternate,alternate;
animation-timing-function:ease-in-out,ease-in-out;
}
@keyframes fxtwinkle{from{opacity:.45}to{opacity:1}}
/* сердечки — настоящая форма через маску */
.fx-hearts i b{
background:linear-gradient(150deg,#ff9ec2,#ff5f97);
-webkit-mask:var(--heart) center/contain no-repeat;
mask:var(--heart) center/contain no-repeat;
filter:drop-shadow(0 0 5px rgba(255,110,160,.55));
}
/* лепестки сакуры — кувыркаются, а не просто падают */
.fx-petals i b{
background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
-webkit-mask:var(--petal) center/contain no-repeat;
mask:var(--petal) center/contain no-repeat;
filter:drop-shadow(0 0 4px rgba(255,150,190,.45));
animation-name:fxtumble;
}
@keyframes fxtumble{
from{transform:translateX(-11px) rotate(-40deg) scaleX(.75)}
to{transform:translateX(11px) rotate(50deg) scaleX(1)}
}
/* листья — переворачиваются на лету */
.fx-leaves i b{
background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
-webkit-mask:var(--leaf) center/contain no-repeat;
mask:var(--leaf) center/contain no-repeat;
filter:drop-shadow(0 0 4px rgba(70,160,100,.4));
animation-name:fxtumble;
}
/* угольки заката — тёплые точки со свечением */
.fx-embers i b{
border-radius:50%;
background:radial-gradient(circle at 40% 40%, #fff0d8, #ff9d5c 55%, #ff6b3d 80%);
box-shadow:0 0 8px rgba(255,140,80,.75);
}
/* кофейные зёрна */
.fx-beans i b{
border-radius:50% / 42%;
background:linear-gradient(135deg,#a9743f,#6f4522);
box-shadow:inset 0 0 0 1px rgba(255,235,210,.28);
animation-name:fxtumble;
}
.fx-beans i b{transform-origin:center}
/* пузыри — поднимаются снизу */
.fx-bubbles i{
top:auto;bottom:-8vh;
animation-name:fxrise;
}
.fx-bubbles i b{
border-radius:50%;background:transparent;
box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--accent) 60%, transparent),
inset -2px -3px 4px -2px #fff;
}
@keyframes fxrise{
0%{transform:translate3d(0,8vh,0);opacity:0}
8%{opacity:var(--o,.7)}
90%{opacity:var(--o,.7)}
100%{transform:translate3d(var(--drift,0px),-112vh,0);opacity:0}
}
/* выбор эффекта: в кнопке живая мини-частица, а не символ */
.fx-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:4px 4px 10px}
.fx-item{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:11px 4px;border:0;border-radius:14px;background:var(--bg2);
color:var(--text);cursor:pointer;transition:transform .15s ease;
}
.fx-item span{font-size:11px;color:var(--hint)}
.fx-item:active{transform:scale(.95)}
.fx-item.on{
background:color-mix(in srgb, var(--accent) 14%, transparent);
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fx-item.on span{color:var(--accent)}
.fx-dot{width:16px;height:16px;display:block}
.fx-dot.none{border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hint);opacity:.5}
.fx-dot.snow{border-radius:50%;background:radial-gradient(circle at 34% 32%,color-mix(in srgb, var(--fx-ink) 30%, #fff),var(--fx-ink) 55%,color-mix(in srgb, var(--fx-ink) 80%, transparent) 85%)}
.fx-dot.stars{background:linear-gradient(160deg,#fff3c4,#ffd166);
clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%)}
.fx-dot.hearts{background:linear-gradient(150deg,#ff9ec2,#ff5f97);
-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.fx-dot.petals{background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
-webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat}
.fx-dot.leaves{background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
-webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat}
.fx-dot.embers{border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff0d8,#ff9d5c 55%,#ff6b3d 85%)}
.fx-dot.beans{border-radius:50% / 42%;background:linear-gradient(135deg,#a9743f,#6f4522)}
.fx-dot.theme{border-radius:50%;background:conic-gradient(#ff8fb8,#8fd6a3,#ffd166,#9ec9ff,#ff8fb8)}
.fx-dot.bubbles{border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent)}
/* карточки тем */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 4px 10px}
.theme-card{
display:flex;flex-direction:column;align-items:center;gap:7px;
padding:11px 4px;border:0;border-radius:14px;background:var(--bg2);
color:var(--text);cursor:pointer;transition:transform .15s ease;
}
.theme-card:active{transform:scale(.95)}
.theme-card span{font-size:11px;color:var(--hint);line-height:1.2;text-align:center}
.theme-card.on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent)}
.theme-card.on span{color:var(--accent)}
.tprev{
width:34px;height:34px;border-radius:50%;position:relative;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(127,127,127,.35);
}
.tprev::after{
content:"";position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;
background:var(--tp-accent);
}
.ulist.tall{max-height:460px}
.swatches{display:flex;flex-wrap:wrap;gap:9px;padding:4px 4px 10px}
.sw{
width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;position:relative;
box-shadow:inset 0 0 0 1px rgba(127,127,127,.3);transition:transform .15s ease;
}
.sw:active{transform:scale(.9)}
.sw.on::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
box-shadow:0 0 0 2px currentColor;
}
.sw.auto{background:conic-gradient(#3b82f6,#22c55e,#f59e0b,#ec4899,#3b82f6);color:var(--text)}
/* ---------------------------------------------------------------- время */
.timer-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}
.ring-box{position:relative;width:min(74vw,268px);aspect-ratio:1;margin:4px 0 6px}
.ring{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-linecap:round}
.ring .track{stroke:var(--bg2);stroke-width:12}
.ring .fill{
stroke:var(--accent);stroke-width:12;
transition:stroke-dashoffset 1s linear, stroke .4s ease;
filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent));
}
.ring-box.break .fill{stroke:var(--warn);filter:drop-shadow(0 0 10px color-mix(in srgb, var(--warn) 45%, transparent))}
.ring-box.idle .fill{stroke:var(--hint);filter:none}
/* мягкое дыхание, пока пара идёт */
.ring-box.live::before{
content:"";position:absolute;inset:14%;border-radius:50%;
background:radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
animation:breathe 3.4s ease-in-out infinite;pointer-events:none;
}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.8;transform:scale(1.04)}}
.ring-face{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:4px;text-align:center;padding:0 14%;
}
.ring-face .big{
font-size:clamp(38px,13vw,52px);font-weight:800;letter-spacing:-2px;line-height:1;
font-variant-numeric:tabular-nums;
}
.ring-face .cap{font-size:12.5px;color:var(--hint);line-height:1.25}
.ring-face .pairno{
margin-bottom:2px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;
background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);
}
.ring-box.break .ring-face .pairno{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}
.now-card{
width:100%;display:flex;gap:12px;padding:14px;margin-top:2px;
border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);
animation:rise .4s cubic-bezier(.2,.8,.25,1) backwards;
}
.now-card .label{
font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
color:var(--hint);margin-bottom:3px;
}
.now-card h4{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.1px}
/* лента дня */
.strip{width:100%;margin:14px 0 4px}
.strip-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--hint);margin-bottom:6px}
.strip-bar{position:relative;display:flex;gap:4px;height:34px}
/* тонкая нить сквозь перемены — вместо мутного фона во всю полосу */
.strip-bar::before{
content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;
transform:translateY(-50%);border-radius:2px;background:var(--sep);
}
.tseg{
position:relative;z-index:1;display:grid;place-items:center;
font-size:11px;font-weight:750;transition:background .3s, color .3s;
}
.tseg.pair{
border-radius:10px;background:var(--bg2);color:var(--hint);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tseg.pair.past{box-shadow:none;opacity:.6}
.tseg.pair.live{
background:var(--accent);color:var(--on-accent);
box-shadow:0 2px 10px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tseg.rest{background:transparent}
.strip-now{
position:absolute;z-index:2;top:-4px;bottom:-4px;width:2px;border-radius:2px;
background:var(--text);box-shadow:0 0 0 3px var(--bg);
transition:left 1s linear;
}
.strip-now::after{
content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;
border-radius:50%;background:var(--text);
}
/* -------------------------------------------------------------- магазин */
.sheet.tall{max-height:92vh}
.shop-card{
position:relative;display:grid;grid-template-columns:1fr auto;
align-items:center;gap:8px 12px;
padding:12px 14px;margin-bottom:9px;border-radius:16px;
background:var(--card);box-shadow:var(--shadow);
}
.shop-card .badge-wrap{min-width:0}
.shop-card .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.shop-card .price{
display:inline-flex;align-items:center;gap:4px;
font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.shop-card .rar{
font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.rar.common{color:var(--hint)}
.rar.rare{color:#4b8bf4}
.rar.epic{color:#a855f7}
.rar.legend{color:#ffb020}
.rar.myth{color:#ffc233}
.shop-card.myth{
box-shadow:var(--shadow), inset 0 0 0 2px color-mix(in srgb,#ffc233 60%,transparent),
0 10px 30px -18px rgba(255,194,51,.9);
}
.shop-card.legend{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb,#ffb020 40%,transparent)}
.shop-card.epic{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb,#a855f7 32%,transparent)}
.shop-card .note{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--hint)}
.shop-buy{
padding:7px 13px;border:0;border-radius:11px;cursor:pointer;
background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:750;
}
.shop-buy:active{transform:scale(.96)}
.shop-buy.owned{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok)}
.shop-buy.worn{background:var(--bg2);color:var(--hint)}
.shop-buy[disabled]{opacity:.6}
.gift-row{
display:flex;align-items:center;gap:10px;padding:8px 0;
border-bottom:1px solid var(--sep);
}
.gift-row:last-child{border-bottom:0}
.gift-row .side{margin-left:auto;display:flex;align-items:center;gap:8px}
.gift-row .price{font-size:12px;color:var(--hint);white-space:nowrap}
.shop-open{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;margin-top:8px;padding:13px;border:0;border-radius:14px;cursor:pointer;
background:linear-gradient(135deg,
color-mix(in srgb,#ffb020 26%,transparent), color-mix(in srgb,#ff7a3d 16%,transparent));
box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#ffb020 40%,transparent);
color:#ffb020;font-size:15px;font-weight:750;
}
.shop-open:active{transform:scale(.98)}
/* --------------------------------------------------------------- профиль */
.prof-card{
display:flex;flex-direction:column;align-items:center;gap:10px;
padding:22px 16px 18px;margin-bottom:12px;
border-radius:22px;background:var(--card);box-shadow:var(--shadow);
}
.prof-card h2{margin:2px 0 0;font-size:20px;font-weight:750;letter-spacing:-.3px;text-align:center}
.prof-card .sub{margin:0;font-size:13px;color:var(--hint)}
.uid-badge{
display:inline-flex;align-items:center;gap:6px;margin-top:2px;
padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:750;
font-variant-numeric:tabular-nums;
background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--accent);
}
.bio-line{
display:inline-flex;align-items:center;gap:7px;max-width:100%;
margin-top:2px;padding:7px 13px;border:0;border-radius:14px;
background:var(--bg2);color:var(--text);
font-size:13.5px;font-style:italic;line-height:1.3;cursor:pointer;
transition:transform .15s ease;
}
.bio-line:active{transform:scale(.97)}
.bio-line.empty{color:var(--hint);font-style:normal}
.bio-line .ic{opacity:.5;flex:0 0 auto}
/* админская подпись: красная, с искрами */
.bio-line.admin,
.bio-item.admin{
--tag:#ff7a55; /* цвет искр вокруг бейджа */
position:relative;overflow:hidden;
background:linear-gradient(135deg,
color-mix(in srgb, #ff3b47 22%, transparent),
color-mix(in srgb, #ff8a3d 16%, transparent));
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, #ff3b47 45%, transparent),
0 4px 18px -8px color-mix(in srgb, #ff3b47 70%, transparent);
color:#ff5560;font-style:normal;font-weight:800;letter-spacing:1.4px;
text-transform:uppercase;
}
.bio-line.admin .ic,
.bio-item.admin .ic{color:#ff5560;opacity:.9}
/* сами частички: несколько точек, всплывающих вверх */
@keyframes spark{
0%{opacity:0;transform:translateY(0) scale(.6)}
15%{opacity:.95}
70%{opacity:.5}
100%{opacity:0;transform:translateY(-26px) scale(1.1)}
}
/* личная подпись: розовая, с сердечками */
.bio-line.secret,
.bio-item.secret{
--tag:#ff7ab5;
position:relative;overflow:hidden;
background:linear-gradient(135deg,
color-mix(in srgb, #ff5fa2 24%, transparent),
color-mix(in srgb, #ff9ecb 16%, transparent));
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, #ff5fa2 45%, transparent),
0 4px 18px -8px color-mix(in srgb, #ff5fa2 70%, transparent);
color:#ff7ab5;font-style:normal;font-weight:750;
}
.bio-line.secret .ic,
.bio-item.secret .ic{color:#ff7ab5}
@keyframes heart{
0%{opacity:0;transform:translateY(0) rotate(-8deg) scale(.7)}
20%{opacity:.95}
70%{opacity:.6}
100%{opacity:0;transform:translateY(-30px) rotate(10deg) scale(1.15)}
}
/* выданный админом тег: цвет задаёт админ */
.bio-line.tagged,
.bio-item.tagged{
position:relative;overflow:hidden;
background:linear-gradient(135deg,
color-mix(in srgb, var(--tag) 26%, transparent),
color-mix(in srgb, var(--tag) 14%, transparent));
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tag) 50%, transparent),
0 4px 18px -8px color-mix(in srgb, var(--tag) 70%, transparent);
color:var(--tag);font-style:normal;font-weight:750;
}
.bio-line.tagged .ic,.bio-item.tagged .ic{color:var(--tag)}
/* надпись всегда поверх частиц, сколько бы их ни было */
.bio-line .nm{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px}
.bio-item>span{position:relative;z-index:1}
/* Частицы бейджа. Форма задаётся вторым классом, цвет — переменной --tag. */
.bp{
position:absolute;bottom:-5px;opacity:0;pointer-events:none;
animation:spark 2.8s linear infinite;
}
.bp.spark{border-radius:50%;background:var(--tag)}
.bp.snow{
border-radius:50%;
background:radial-gradient(circle at 34% 32%,#ffffff,#eaf4ff 45%,#bcd8f5 78%,transparent 80%);
}
.bp.heart{
background:linear-gradient(150deg,#ffa8cd,#ff5f97);
-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;
}
.bp.star{
background:linear-gradient(160deg,#fff3c4,#ffd166);
clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
}
.bp.petal{
background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
-webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat;
}
.bp.leaf{
background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
-webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat;
}
.bp.ember{
border-radius:50%;
background:radial-gradient(circle at 40% 40%,#fff0d8,#ff9d5c 55%,#ff6b3d 85%);
}
/* ведро КФС */
.bp.kfc{
background:linear-gradient(150deg,#ff5a63,#c8001f);
-webkit-mask:var(--bucket) center/contain no-repeat;mask:var(--bucket) center/contain no-repeat;
}
/* «1000-7» — текстовая частица */
.bp.num{
width:auto !important;height:auto !important;
font-size:8px;font-weight:800;letter-spacing:-.3px;line-height:1;
color:#e8e8ef;text-shadow:0 0 5px rgba(0,0,0,.8);white-space:nowrap;
}
/* серая пыль */
.bp.ash{
border-radius:50%;
background:radial-gradient(circle at 36% 34%,#dfe4ea,#93a1b0 60%,rgba(147,161,176,0) 72%);
}
/* губы */
.bp.lips{
background:linear-gradient(150deg,#ff7ab0,#e01f6b);
-webkit-mask:var(--lips) center/contain no-repeat;mask:var(--lips) center/contain no-repeat;
}
/* нос клоуна */
.bp.nose{
border-radius:50%;
background:radial-gradient(circle at 34% 30%,#ff9b95,#ff2d20 62%,#c40e05 100%);
box-shadow:0 0 5px rgba(255,60,45,.6);
}
/* деньги */
.bp.money{
background:linear-gradient(150deg,#8ef0b4,#1f9d55);
-webkit-mask:var(--money) center/contain no-repeat;mask:var(--money) center/contain no-repeat;
filter:drop-shadow(0 0 4px rgba(45,190,110,.5));
}
/* золотая монета */
.bp.coin{
border-radius:50%;
background:radial-gradient(circle at 34% 30%,
#fff7d4 0 16%, #ffdd6b 38%, #f2ad20 72%, #b8760b 100%);
box-shadow:inset 0 0 0 1px rgba(120,70,0,.4), 0 0 6px rgba(255,195,60,.5);
}
/* алая искра администрации */
.bp.blaze{
background:linear-gradient(160deg,#fff3cf 0 18%,#ff6a4d 48%,#e00c2b 100%);
clip-path:polygon(50% 0%,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0% 50%,36% 36%);
filter:drop-shadow(0 0 5px rgba(255,45,60,.85));
}
/* голубое свечение помощника */
.bp.aura{
border-radius:50%;
background:radial-gradient(circle at 38% 34%,
#ffffff 0 14%, #b6e2ff 40%, #3aa0ff 74%, rgba(58,160,255,0) 80%);
box-shadow:0 0 7px rgba(58,160,255,.75);
}
/* Перелив на самой надписи у служебных ролей: у администрации золотом по
красному, у помощника белым по синему.
:has() понимают не все вебвью — где нет, останется просто цветной тег. */
.bio-line.tagged:has(.bp.blaze) .nm,
.nick.tagged:has(.bp.blaze) .nm,
.bio-line.tagged:has(.bp.aura) .nm,
.nick.tagged:has(.bp.aura) .nm{
background-size:280% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:rolesheen 4.5s linear infinite;
}
.bio-line.tagged:has(.bp.blaze) .nm,
.nick.tagged:has(.bp.blaze) .nm{
background-image:linear-gradient(100deg,
#ff2338 0 32%,#ffd9a0 46%,#fff 52%,#ffd9a0 58%,#ff2338 72%);
}
.bio-line.tagged:has(.bp.aura) .nm,
.nick.tagged:has(.bp.aura) .nm{
background-image:linear-gradient(100deg,
#1c7ce0 0 32%,#9fdcff 46%,#fff 52%,#9fdcff 58%,#1c7ce0 72%);
}
.bio-line.tagged:has(.bp.blaze){
box-shadow:0 0 0 1px color-mix(in srgb, #ff2338 45%, transparent),
0 6px 20px -10px rgba(255,35,56,.85);
}
.bio-line.tagged:has(.bp.aura){
box-shadow:0 0 0 1px color-mix(in srgb, #3aa0ff 45%, transparent),
0 6px 20px -10px rgba(58,160,255,.85);
}
@keyframes rolesheen{from{background-position:180% 0}to{background-position:-80% 0}}
/* корона */
.bp.crown{
background:linear-gradient(150deg,#ffe9a8,#d4af37);
-webkit-mask:var(--crownm) center/contain no-repeat;mask:var(--crownm) center/contain no-repeat;
}
.fx-row.wide{grid-template-columns:repeat(4,1fr)}
.fx-dot.spark{border-radius:50%;background:var(--accent)}
.fx-dot.heart{background:linear-gradient(150deg,#ffa8cd,#ff5f97);
-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.fx-dot.star{background:linear-gradient(160deg,#fff3c4,#ffd166);
clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%)}
.fx-dot.petal{background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
-webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat}
.fx-dot.leaf{background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
-webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat}
.fx-dot.ember{border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff0d8,#ff9d5c 55%,#ff6b3d 85%)}
.fx-dot.kfc{background:linear-gradient(150deg,#ff5a63,#c8001f);
-webkit-mask:var(--bucket) center/contain no-repeat;mask:var(--bucket) center/contain no-repeat}
.fx-dot.ash{border-radius:50%;background:radial-gradient(circle at 36% 34%,#dfe4ea,#93a1b0 65%)}
.fx-dot.lips{background:linear-gradient(150deg,#ff7ab0,#e01f6b);
-webkit-mask:var(--lips) center/contain no-repeat;mask:var(--lips) center/contain no-repeat}
.fx-dot.nose{border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9b95,#ff2d20 65%)}
.fx-dot.money{background:linear-gradient(150deg,#8ef0b4,#1f9d55);
-webkit-mask:var(--money) center/contain no-repeat;mask:var(--money) center/contain no-repeat}
.fx-dot.crown{background:linear-gradient(150deg,#ffe9a8,#d4af37);
-webkit-mask:var(--crownm) center/contain no-repeat;mask:var(--crownm) center/contain no-repeat}
.fx-dot.coin{border-radius:50%;
background:radial-gradient(circle at 34% 30%,#fff7d4 0 16%,#ffdd6b 38%,#f2ad20 72%,#b8760b 100%)}
.fx-dot.num{font-size:7px;font-weight:800;color:var(--text);display:grid;place-items:center;width:auto}
.uitem .utag{
flex:0 0 auto;max-width:88px;padding:2px 7px;border-radius:8px;
font-size:10.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:color-mix(in srgb, var(--tag) 20%, transparent);color:var(--tag);
}
/* корона над бейджем администратора */
.crowned{display:inline-flex;flex-direction:column;align-items:center;gap:0}
.crown{
color:#ffce4d;font-size:17px;line-height:0;margin-bottom:-3px;
filter:drop-shadow(0 1px 4px rgba(255,190,60,.55));
animation:crownFloat 3.2s ease-in-out infinite;
}
.crown .ic{fill:currentColor;stroke:none}
@keyframes crownFloat{
0%,100%{transform:translateY(0) rotate(-3deg)}
50%{transform:translateY(-2.5px) rotate(3deg)}
}
.bio-item.locked{opacity:.45;cursor:not-allowed}
.bio-item.locked .tick{opacity:1;color:var(--hint)}
.bio-item{
display:flex;align-items:center;gap:10px;width:100%;
padding:13px 14px;margin-bottom:7px;border:0;border-radius:14px;
background:var(--bg2);color:var(--text);
font-size:14px;text-align:left;cursor:pointer;transition:transform .15s ease;
}
.bio-item:active{transform:scale(.98)}
.bio-item.on{
background:color-mix(in srgb, var(--accent) 14%, transparent);
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bio-item .tick{flex:0 0 18px;color:var(--accent);opacity:0}
.bio-item.on .tick{opacity:1}
.bio-item.clear{color:var(--hint);font-size:13.5px}
.prof-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.ptag{
display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:10px;
font-size:12px;background:var(--bg2);color:var(--hint);
}
.ptag.on{background:color-mix(in srgb, var(--ok) 15%, transparent);color:var(--ok)}
/* ---------------------------------------------------------------- звонки */
.bell-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.bell-row .n{
flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:9px;
background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
font-size:13px;font-weight:800;
}
.bell-row .n.zero{background:var(--bg2);color:var(--hint)}
.uitem.banned{opacity:.55}
.uitem .utags i{font-style:normal;font-size:11px;white-space:nowrap}
.uitem .kind{flex:0 0 34px;height:34px;justify-content:center;border-radius:11px;
background:var(--bg2);color:var(--hint)}
.uitem .kind.new{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.uitem .kind.changed{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)}
.uitem .kind.manual{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger)}
#banned p a{color:var(--accent);text-decoration:none;font-weight:650}
.bell-row input{
flex:1;min-width:0;padding:8px 10px;border:0;border-radius:10px;
background:var(--bg2);outline:none;text-align:center;
font-variant-numeric:tabular-nums;font-size:13.5px;
}
.bell-row .dash{color:var(--hint);font-size:12px}
.bell-note{font-size:12px;color:var(--hint);margin:4px 2px 10px}
.bell-note b{color:var(--warn)}
.credits{
display:flex;align-items:center;justify-content:center;gap:7px;
margin:22px 0 4px;padding-top:14px;border-top:1px solid var(--sep);
font-size:12.5px;color:var(--hint);
}
.credits .ic-slot{font-size:14px;opacity:.7}
.credits a{color:var(--accent);text-decoration:none;font-weight:650}
/* ---------------------------------------------------------------- тост */
.toast{
position:fixed;left:50%;bottom:calc(var(--bar) + 22px + env(safe-area-inset-bottom));
transform:translateX(-50%);z-index:80;
padding:11px 18px;border-radius:14px;max-width:82vw;
background:var(--card);box-shadow:0 8px 32px -8px rgba(0,0,0,.5);
font-size:13.5px;font-weight:640;text-align:center;
animation:toast .3s cubic-bezier(.2,.9,.25,1);
}
.toast[hidden]{display:none}
@keyframes toast{from{opacity:0;transform:translate(-50%,12px)}}
/* ------------------------------------------------------------- скелетоны */
.skeleton{padding-top:4px}
.sk{border-radius:var(--radius);background:var(--bg2);position:relative;overflow:hidden;margin-bottom:10px}
.sk-title{height:26px;width:62%;border-radius:9px;margin-bottom:16px}
.sk-card{height:74px}
.sk::after{
content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--text) 8%, transparent),transparent);
animation:shimmer 1.3s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
/* ------------------------------------------------------- широкий экран */
/* В Telegram Desktop окно широкое: держим колонку по центру,
иначе карточки растягиваются на всю ширину и читать неудобно. */
@media (min-width: 620px){
:root{ --maxw: 560px }
.top, .tabs, main{
max-width:var(--maxw);
margin-left:auto;
margin-right:auto;
}
.top{padding-left:0;padding-right:0}
.tabs{padding-left:0;padding-right:0}
main{padding-left:0;padding-right:0}
.tabbar{
padding-left:calc((100% - var(--maxw)) / 2);
padding-right:calc((100% - var(--maxw)) / 2);
}
.toast{bottom:calc(var(--bar) + 26px)}
.sheet{
max-width:var(--maxw);
margin:0 auto;
border-radius:22px 22px 0 0;
}
.sheet-wrap{justify-content:center}
/* на широком экране влезает больше колонок */
.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.hello-groups{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:42vh}
.astrip{grid-template-columns:repeat(4,1fr)}
}
/* -------------------------------------------------------------- награды */
/* Ник в таблице лидеров: цвет и частицы берутся из тега человека. */
.nick{
position:relative;overflow:hidden;min-width:0;
padding:2px 7px;border:0;border-radius:9px;background:transparent;
font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.35;
white-space:nowrap;text-overflow:ellipsis;text-align:left;
color:var(--text);cursor:pointer;
}
.nick .nm{position:relative;z-index:1}
.nick .bp:not(.num){width:6px !important;height:6px !important}
.nick .bp.num{font-size:6px}
.nick.tagged{
color:var(--tag);
background:color-mix(in srgb, var(--tag) 14%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tag) 30%, transparent);
}
.nick:active{transform:scale(.97)}
.gcard{
padding:16px 14px;margin-bottom:12px;border-radius:20px;
background:var(--card);box-shadow:var(--shadow);
}
.gtop{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.gtop .ic-slot{font-size:22px;color:var(--accent);flex:0 0 auto}
.gtop>div{min-width:0}
.gtop b{display:block;font-size:16px;font-weight:750}
.gtop i{display:block;font-style:normal;font-size:12.5px;color:var(--hint);margin-top:2px}
.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
/* награда за игру */
.award{
position:relative;overflow:hidden;margin-top:12px;padding:13px;
border-radius:16px;background:var(--bg2);
}
.award.done{
background:linear-gradient(135deg,
color-mix(in srgb, var(--tag) 22%, transparent),
color-mix(in srgb, var(--tag) 10%, transparent));
box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--tag) 45%, transparent);
}
.aw-top{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.aw-top .ic{flex:0 0 auto;width:17px;height:17px;color:var(--hint)}
.award.done .aw-top .ic{color:var(--tag)}
.aw-top b{
flex:1;min-width:0;font-size:14px;font-weight:750;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.award.done .aw-top b{color:var(--tag)}
.aw-top span{
flex:0 0 auto;font-size:12px;font-weight:700;color:var(--hint);
font-variant-numeric:tabular-nums;
}
.aw-bar{height:6px;margin:10px 0 8px;border-radius:3px;background:var(--card);overflow:hidden}
.aw-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .4s ease}
.award .mini{margin:0;position:relative;z-index:1}
.award .chip-btn{margin-top:10px;position:relative;z-index:1}
/* фильтр таблицы по группе */
.bfilter{display:flex;gap:6px;margin:2px 0 10px;flex-wrap:wrap}
.bchip{
display:inline-flex;align-items:center;gap:4px;
padding:7px 12px;border:0;border-radius:999px;cursor:pointer;
background:var(--bg2);color:var(--hint);
font-family:inherit;font-size:12.5px;font-weight:660;
transition:transform .14s ease,background .18s ease,color .18s ease;
}
.bchip:active{transform:scale(.95)}
.bchip.on{background:var(--accent);color:var(--on-accent)}
.bchip.more .ic{width:13px;height:13px;opacity:.7}
.bnote{margin:-4px 0 8px;color:var(--hint)}
#gameBoard.dim{opacity:.5;transition:opacity .12s ease}
/* строка выбора группы в шторке */
.brow{
display:flex;align-items:baseline;gap:8px;width:100%;
padding:12px 10px;margin-bottom:6px;border:0;border-radius:13px;
background:var(--bg2);color:var(--text);cursor:pointer;
font-family:inherit;text-align:left;transition:transform .14s ease;
}
.brow:active{transform:scale(.98)}
.brow.on{background:var(--accent);color:var(--on-accent)}
.brow b{flex:1;min-width:0;font-size:14px;font-weight:700;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow i{flex:0 0 auto;font-style:normal;font-size:12px;color:var(--hint)}
.brow.on i{color:color-mix(in srgb, var(--on-accent) 75%, transparent)}
/* строка таблицы лидеров */
.lrow{
display:grid;grid-template-columns:26px 26px 1fr auto;align-items:center;
gap:9px;padding:8px 2px;border-bottom:1px solid var(--sep);
}
.lrow:last-child{border-bottom:0}
.lrow.me{
margin:0 -8px;padding:8px;border-radius:12px;border-bottom:0;
background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.lplace{
font-size:13px;font-weight:800;color:var(--hint);text-align:center;
font-variant-numeric:tabular-nums;
}
.lplace.p1{color:#ffce4d}
.lplace.p2{color:#c9d3dd}
.lplace.p3{color:#d9a06a}
.lwho{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.lwho .nick{max-width:100%}
.lgroup{font-size:11px;color:var(--hint);padding-left:7px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lscore{font-size:15px;font-weight:780;font-variant-numeric:tabular-nums}
.lscore i{font-style:normal;font-size:11px;font-weight:600;color:var(--hint);margin-left:3px}
/* --------------------------------------------------------- поле игры */
.stage{
position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
background:var(--bg);
}
.stage[hidden]{display:none}
.stage-top{
display:flex;align-items:center;gap:12px;
padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.stage-score{flex:1;text-align:center}
.stage-score b{
display:block;font-size:26px;font-weight:800;line-height:1;
font-variant-numeric:tabular-nums;
}
.stage-score i{display:block;font-style:normal;font-size:11px;color:var(--hint);margin-top:3px}
.stage-best{
flex:0 0 auto;min-width:44px;text-align:right;
font-size:11.5px;color:var(--hint);font-variant-numeric:tabular-nums;
}
.stage-body{
flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:0 12px;
}
#stageCanvas{
max-width:100%;max-height:100%;border-radius:18px;
background:var(--bg2);touch-action:none;user-select:none;
/* В тёмных темах --bg2 почти не отличается от --bg, и поле сливалось
со страницей. Тонкий контур отделяет поле при любой палитре. */
box-shadow:0 0 0 1px var(--sep);
}
#stageCanvas[hidden]{display:none}
.stage-mount{width:100%;max-width:460px;align-self:center}
.stage-mount[hidden]{display:none}
/* в экране партии счёт и рекорд показывает сам экран — свои у игр прячем */
.dk.embedded .dk-score,.dk.embedded .dk-best,.fl.embedded .fl-best{visibility:hidden}
.stage-hint{
padding:10px 16px calc(12px + env(safe-area-inset-bottom));
text-align:center;font-size:12px;color:var(--hint);min-height:18px;
}
/* «Счёт» */
.mathbox{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.mathbox[hidden]{display:none}
.mathbar{height:6px;border-radius:3px;background:var(--bg2);overflow:hidden}
.mathbar i{
display:block;height:100%;width:100%;transform-origin:left center;
background:var(--accent);
}
.mathbar i.hot{background:var(--danger)}
.mathlevel{text-align:center;font-size:12px;color:var(--hint)}
.mathtask{
text-align:center;font-size:44px;font-weight:800;letter-spacing:-1px;
font-variant-numeric:tabular-nums;line-height:1.1;
}
.mathopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mathopts button{
padding:20px 8px;border:0;border-radius:16px;cursor:pointer;
background:var(--card);box-shadow:var(--shadow);color:var(--text);
font-family:inherit;font-size:22px;font-weight:750;
font-variant-numeric:tabular-nums;transition:transform .12s ease,background .15s;
}
.mathopts button:active{transform:scale(.96)}
.mathopts button.right{background:color-mix(in srgb, var(--ok) 34%, var(--card))}
.mathopts button.wrong{background:color-mix(in srgb, var(--danger) 34%, var(--card))}
/* итог партии */
.stage-over{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
padding:20px;text-align:center;
background:color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
animation:fade .25s ease;
}
.stage-over[hidden]{display:none}
.over-mark{
width:66px;height:66px;border-radius:22px;display:grid;place-items:center;
background:var(--bg2);color:var(--accent);font-size:30px;
}
.over-mark .ic{width:30px;height:30px}
.stage-over h2{margin:4px 0 0;font-size:20px;font-weight:750}
.over-sub{margin:0;font-size:13.5px;color:var(--hint);max-width:280px}
.over-num{
font-size:52px;font-weight:820;line-height:1;letter-spacing:-2px;
font-variant-numeric:tabular-nums;margin:2px 0 6px;
}
.stage-over .btn{width:100%;max-width:280px}
.stage-over .chip-btn{max-width:280px}
.over-award{
position:relative;overflow:hidden;width:100%;max-width:280px;
margin:2px 0 6px;padding:12px;border-radius:16px;
background:linear-gradient(135deg,
color-mix(in srgb, var(--tag) 26%, transparent),
color-mix(in srgb, var(--tag) 12%, transparent));
box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--tag) 50%, transparent);
}
.over-award b{position:relative;z-index:1;display:block;color:var(--tag);font-size:15px;font-weight:780}
.over-award i{position:relative;z-index:1;display:block;font-style:normal;font-size:12px;color:var(--hint);margin-top:3px}
/* ------------------------------------------------- карточка участника */
.ucard{display:flex;flex-direction:column;align-items:center;gap:9px;padding:2px 0 6px}
.ucard h2{margin:2px 0 0;font-size:19px;font-weight:750;letter-spacing:-.3px;text-align:center}
.ucard .sub{margin:0;font-size:13px;color:var(--hint)}
.ustats{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:6px;
}
.ustat{
padding:11px 8px;border-radius:15px;background:var(--bg2);text-align:center;
}
.ustat b{display:block;font-size:17px;font-weight:780;font-variant-numeric:tabular-nums}
.ustat i{display:block;font-style:normal;font-size:11px;color:var(--hint);margin-top:2px}
.urow{
display:flex;justify-content:space-between;gap:12px;width:100%;
padding:10px 2px;border-bottom:1px solid var(--sep);font-size:13.5px;
}
.urow:last-of-type{border-bottom:0}
.urow b{font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis}
.uhidden{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:22px 12px;color:var(--hint);text-align:center;font-size:13.5px;
}
.uhidden .ic-slot{font-size:26px;color:var(--hint);opacity:.7}
.uacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:12px}
.uacts .btn{margin:0}
/* ------------------------------------------------- письмо администрации */
/* Сплошная заливка акцентом и стрелка справа: раньше полупрозрачная плашка
читалась как уведомление, и по ней не догадывались нажать. */
.askbig{
display:flex;align-items:center;gap:12px;width:100%;
margin-bottom:12px;padding:14px;border:0;border-radius:16px;
cursor:pointer;text-align:left;font-family:inherit;
background:var(--accent);color:var(--on-accent);
box-shadow:0 8px 24px -12px color-mix(in srgb, var(--accent) 95%, transparent);
transition:transform .14s ease,filter .18s ease;
}
.askbig:active{transform:scale(.98);filter:brightness(.94)}
.askbig-ic{
flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
border-radius:12px;background:color-mix(in srgb, #000 16%, transparent);
}
.askbig-ic .ic{width:20px;height:20px;color:var(--on-accent)}
.askbig-txt{flex:1;min-width:0}
.askbig-txt b{display:block;font-size:15px;font-weight:750;color:var(--on-accent)}
.askbig-txt i{
display:block;font-style:normal;font-size:12px;margin-top:3px;
color:color-mix(in srgb, var(--on-accent) 75%, transparent);
}
.askbig-go{flex:0 0 auto;display:grid;place-items:center}
.askbig-go .ic{
width:18px;height:18px;color:var(--on-accent);opacity:.75;
transform:rotate(-90deg); /* шеврон вниз разворачиваем вправо */
}
/* ------------------------------------------------------------- тикеты */
.acount{
position:absolute;top:5px;right:6px;
min-width:17px;height:17px;padding:0 4px;border-radius:9px;
background:var(--danger);color:#fff;
font-size:10px;font-style:normal;font-weight:800;
display:grid;place-items:center;
}
.anav button{position:relative}
.acount.solid{position:static;flex:0 0 auto}
.tcard{
display:block;width:100%;margin-bottom:10px;padding:12px;
border:0;border-radius:16px;background:var(--bg2);
cursor:pointer;text-align:left;font-family:inherit;color:var(--text);
transition:transform .14s ease;
}
.tcard:active{transform:scale(.99)}
.ttop{display:flex;align-items:center;gap:10px;min-width:0}
.ttop .uinfo{flex:1;min-width:0}
.ttop b{display:block;font-size:14px;font-weight:750}
.ttop i{display:block;font-style:normal;font-size:11.5px;color:var(--hint);margin-top:2px}
.tlast{
margin:9px 0 8px;font-size:13px;color:var(--hint);line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ttags{display:flex;gap:6px}
/* переписка внутри шторки */
.tchat-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
.tchat-head .uinfo{flex:1;min-width:0}
.tchat-head b{display:block;font-size:14.5px;font-weight:750}
.tchat-head i{display:block;font-style:normal;font-size:11.5px;color:var(--hint);margin-top:2px}
.tchat{
max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
display:flex;flex-direction:column;gap:9px;
padding:12px;margin-bottom:12px;border-radius:16px;background:var(--bg2);
}
.tmsg{max-width:88%;align-self:flex-start}
.tmsg.mine{align-self:flex-end}
.tmsg-text{
padding:9px 12px;border-radius:14px 14px 14px 5px;
background:var(--card);box-shadow:var(--shadow);
font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
}
.tmsg.mine .tmsg-text{
border-radius:14px 14px 5px 14px;
background:color-mix(in srgb, var(--accent) 18%, var(--card));
}
.tmsg-when{margin-top:4px;font-size:10.5px;color:var(--hint)}
.tmsg.mine .tmsg-when{text-align:right}
#ticketCard textarea{min-height:74px}
@media (prefers-reduced-motion: reduce){
/* Частицы тега — крошечная декорация, ради которой люди и берут теги.
Их анимацию оставляем, иначе на телефонах с экономией батареи
(там включается «уменьшить движение») тег стоит вообще без эффекта. */
*:not(.bp):not(.crown):not(.nm){animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ------------------------------------------------------- служебные роли */
.rolebtn{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:11px;width:100%;
margin-bottom:9px;padding:13px;border:0;border-radius:15px;cursor:pointer;
background:var(--bg2);color:var(--text);font-family:inherit;text-align:left;
transition:transform .14s ease;
}
.rolebtn:active{transform:scale(.98)}
.rolebtn .rdot{
flex:0 0 auto;width:34px;height:34px;border-radius:11px;
background:color-mix(in srgb, var(--tag) 22%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tag) 55%, transparent);
}
.rolebtn .rtx{flex:1;min-width:0;position:relative;z-index:1}
.rolebtn .rtx b{display:block;font-size:14px;font-weight:730;color:var(--tag)}
.rolebtn .rtx i{display:block;font-style:normal;font-size:11.5px;color:var(--hint);margin-top:2px}
.rolebtn.on{box-shadow:inset 0 0 0 2px var(--tag)}
.rolebtn .rnow{
flex:0 0 auto;position:relative;z-index:1;
font-size:11px;font-weight:700;color:var(--tag);
}
/* строка «этот профиль закрыт, но админ видит» */
.peek{
display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:9px 11px;
border-radius:12px;font-size:12px;
background:color-mix(in srgb, var(--warn, #ffb020) 15%, transparent);
color:var(--warn, #ffb020);
}
.peek .ic{width:15px;height:15px;flex:0 0 auto}
/* -------------------------------------------- админский блок в профиле */
.dmpeek{margin:0 0 4px}
.admblock{
margin-top:14px;padding:12px;border-radius:14px;text-align:left;
background:var(--bg2);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.admhead{
display:flex;align-items:center;gap:7px;margin-bottom:6px;
font-size:11.5px;font-weight:750;letter-spacing:.2px;
color:var(--accent);text-transform:uppercase;
}
.admhead .ic{width:14px;height:14px}
.admblock .urow{border-bottom:1px solid var(--sep)}
.admblock .urow:last-of-type{border-bottom:0}
.admflags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.aflag{
padding:4px 9px;border-radius:999px;font-size:11px;font-weight:650;
background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);
}
/* ------------------------------------ ручной зачёт людей по ссылке */
/* Кнопка «убрать из ссылки» — в карточке профиля, у строки про ссылку. */
.undrop{
flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
margin:-3px 0;border:0;border-radius:9px;cursor:pointer;
background:color-mix(in srgb, var(--danger) 14%, transparent);
color:var(--danger);transition:transform .14s ease;
}
.undrop:active{transform:scale(.9)}
.undrop .ic{width:15px;height:15px}
.admblock .urow b{flex:1}
/* ------------------------------------------------------- витрина скинов */
.skgroup{margin-bottom:18px}
.skhead{
display:flex;align-items:center;gap:8px;margin:0 0 10px;
font-size:15px;font-weight:750;
}
.skoff{
margin-left:auto;padding:3px 9px;border-radius:999px;
font-size:11px;font-weight:650;background:var(--bg2);color:var(--hint);
}
.skcard{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
margin-bottom:10px;padding:10px;border-radius:var(--radius);
background:var(--card);
/* тонкий контур: в тёмно-сливовых темах карточка иначе сливается с фоном */
box-shadow:var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
}
.skcard.on{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
/* Окошко превью подмешиваем к цвету карточки, а не берём --bg2:
в тёмных темах --bg2 темнее фона, и окно выглядело дырой в странице. */
.skprev{
flex:0 0 auto;border-radius:12px;width:128px;height:86px;
background:color-mix(in srgb, var(--card) 88%, var(--text) 12%);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}
.skinfo{min-width:0;display:flex;flex-direction:column;gap:3px}
.skinfo b{font-size:14.5px;font-weight:730}
.skinfo i{font-style:normal;font-size:11.5px;color:var(--hint);line-height:1.35}
.skinfo .rar{align-self:flex-start}
.skside{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:78px}
.skside .price{text-align:center;font-size:13px;font-weight:700}
/* редкость скина подсвечивает карточку слева */
.skcard.rare{border-left:3px solid #4aa8ff}
.skcard.epic{border-left:3px solid #a855f7}
.skcard.legend{border-left:3px solid #ffc233}
.skcard.myth{
border-left:3px solid #ff4d5e;
box-shadow:var(--shadow),
inset 0 0 0 2px color-mix(in srgb,#ffc233 55%,transparent),
0 12px 34px -20px rgba(255,120,40,.95);
}
.rar.myth{background:color-mix(in srgb,#ffc233 20%,transparent);color:#ffc233}
.rar.plain{background:var(--bg2);color:var(--hint)}
.rar.rare{background:color-mix(in srgb, #4aa8ff 18%, transparent);color:#4aa8ff}
.rar.epic{background:color-mix(in srgb, #a855f7 18%, transparent);color:#a855f7}
/* на узких экранах превью уезжает наверх, кнопки — во всю ширину */
@media (max-width:400px){
.skcard{grid-template-columns:auto 1fr;grid-template-areas:"prev info" "side side"}
.skprev{grid-area:prev;width:104px;height:72px}
.skinfo{grid-area:info}
.skside{grid-area:side;flex-direction:row;align-items:center}
.skside .price{flex:0 0 auto}
.skside .shop-buy{flex:1}
}
/* ------------------------------------------- выдача скинов из админки */
.gsgroup{margin-bottom:14px}
.gshead{
display:flex;align-items:center;gap:8px;margin:0 0 8px;
font-size:13px;font-weight:750;color:var(--hint);
}
.gshead .chip-btn{margin:0 0 0 auto}
.gskin{
display:flex;align-items:center;gap:10px;padding:6px 0;
border-bottom:1px solid var(--sep);
}
.gskin:last-child{border-bottom:0}
.gskin .uinfo{flex:1;min-width:0}
.gskin .uinfo b{font-size:13.5px}
.gskin .uinfo i{font-style:normal;font-size:11.5px;color:var(--hint)}
.gskin .chip-btn{flex:0 0 auto}
.gskin.on{
margin:0 -8px;padding:6px 8px;border-radius:12px;border-bottom:0;
background:color-mix(in srgb, var(--ok) 12%, transparent);
}
.gskin.on .chip-btn{color:var(--ok);background:transparent;pointer-events:none}
.skprev.tiny{width:76px;height:52px;border-radius:10px}
/* ============================================= поиск: преподаватель и кабинет */
/* Палитра — только токены темы: во всех девяти темах выглядит родным.
Зелёный — свободен или идёт пара, янтарный — кабинет занят. */
.fsec{
display:flex;align-items:center;gap:6px;margin:14px 2px 8px;
font-size:11.5px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:var(--hint);
}
.fsec:first-child{margin-top:4px}
.fsec .ic{color:#ffb020;fill:currentColor;width:13px;height:13px}
.fdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--hint) 45%, transparent)}
.fdot.live,.fdot.free{background:var(--ok)}
/* Пульс — внутри своей точки. Раньше расходилось кольцо на 7 px, и в узкой
строке оно вылезало за край и обрезалось. */
.fdot.live{animation:fdotBeat 1.6s ease-in-out infinite}
@keyframes fdotBeat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
.fdot.busy{background:var(--warn)}
/* строка преподавателя */
.frow{
display:flex;align-items:center;gap:12px;width:100%;
padding:10px 12px 10px 10px;margin-bottom:7px;border:0;border-radius:16px;
background:var(--bg2);color:var(--text);text-align:left;cursor:pointer;font-family:inherit;
transition:transform .14s ease;
}
.frow:active{transform:scale(.98)}
.fini{
flex:0 0 40px;height:40px;border-radius:14px;display:grid;place-items:center;
font-size:14px;font-weight:800;letter-spacing:.4px;
background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);
}
.frow .ftx{flex:1;min-width:0}
.frow .ftx b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .ftx i{
display:flex;align-items:center;gap:6px;margin-top:3px;
font-style:normal;font-size:12px;color:var(--hint);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fmini{flex:0 0 auto;display:grid;place-items:center;color:#ffb020}
.fmini .ic{width:15px;height:15px;fill:currentColor}
.fgo{flex:0 0 auto;display:grid;place-items:center;color:var(--hint);opacity:.6}
.fgo .ic{width:16px;height:16px;transform:rotate(-90deg)}
/* плитки кабинетов */
.frooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.froom{
position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
min-width:0;padding:12px 11px 11px;border:0;border-radius:16px;
background:var(--bg2);color:var(--text);text-align:left;cursor:pointer;font-family:inherit;
transition:transform .14s ease;
}
.froom:active{transform:scale(.96)}
.froom b{font-size:21px;font-weight:820;letter-spacing:-.4px;line-height:1.05;font-variant-numeric:tabular-nums}
.froom b.word{font-size:14.5px;letter-spacing:-.1px;line-height:1.2}
.froom i{
display:flex;align-items:center;gap:5px;max-width:100%;
font-style:normal;font-size:11px;color:var(--hint);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.froom.free{
background:color-mix(in srgb, var(--ok) 9%, var(--bg2));
box-shadow:inset 0 0 0 1.3px color-mix(in srgb, var(--ok) 32%, transparent);
}
.froom.busy{
background:color-mix(in srgb, var(--warn) 10%, var(--bg2));
box-shadow:inset 0 0 0 1.3px color-mix(in srgb, var(--warn) 38%, transparent);
}
.froom .fmini{position:absolute;top:9px;right:9px}
.froom i{font-weight:700;color:var(--text)}
.froom.free i{color:var(--ok)}
.froom.busy i{color:var(--warn)}
.froom em{margin-top:-3px;font-style:normal;font-size:11.5px;color:var(--hint);font-variant-numeric:tabular-nums}
/* шапка страницы */
.fhero{
position:relative;overflow:hidden;isolation:isolate;
display:flex;align-items:center;gap:14px;
padding:18px 14px 18px 16px;margin:4px 0 12px;border-radius:24px;
background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 20%, var(--card)), var(--card) 72%);
box-shadow:var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
animation:rise .38s cubic-bezier(.2,.8,.25,1) backwards;
}
.fhero::after{
content:"";position:absolute;z-index:-1;right:-46px;top:-56px;width:170px;height:170px;border-radius:50%;
background:radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 68%);
}
.fbig{
flex:0 0 60px;height:60px;border-radius:20px;display:grid;place-items:center;
font-size:22px;font-weight:820;letter-spacing:.5px;
background:var(--accent);color:var(--on-accent);
box-shadow:0 10px 24px -12px color-mix(in srgb, var(--accent) 95%, transparent);
}
.fbig .ic{width:28px;height:28px}
.fhero-txt{flex:1;min-width:0}
.fhero-txt i{
display:block;font-style:normal;font-size:11px;font-weight:780;
letter-spacing:.6px;text-transform:uppercase;color:var(--accent);
}
.fhero-txt b{
display:block;margin:3px 0 3px;font-size:23px;font-weight:820;letter-spacing:-.5px;line-height:1.12;
overflow-wrap:anywhere;
}
.fhero-txt span{display:block;font-size:12.5px;color:var(--hint)}
.fstar{
flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;
display:grid;place-items:center;cursor:pointer;
background:color-mix(in srgb, var(--card) 70%, transparent);color:var(--hint);
box-shadow:inset 0 0 0 1px var(--sep);
transition:transform .15s ease,color .2s,background .2s;
}
.fstar .ic{width:20px;height:20px}
.fstar:active{transform:scale(.86)}
.fstar.on{color:#ffb020;background:color-mix(in srgb, #ffb020 16%, transparent);box-shadow:none}
.fstar.on .ic{fill:currentColor;animation:starPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes starPop{from{transform:scale(.4) rotate(-30deg)}}
/* «Сейчас» */
.fnow{
position:relative;overflow:hidden;padding:15px 16px 16px;margin-bottom:14px;
border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);
animation:rise .42s cubic-bezier(.2,.8,.25,1) .05s backwards;
}
.fnow.live,.fnow.free{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 50%, transparent)}
.fnow.busy{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent)}
.fnow-top{
display:flex;align-items:center;gap:8px;
font-size:11.5px;font-weight:780;letter-spacing:.5px;text-transform:uppercase;color:var(--hint);
}
.fnow.live .fnow-top,.fnow.free .fnow-top{color:var(--ok)}
.fnow.busy .fnow-top{color:var(--warn)}
.fnow-top .left{
margin-left:auto;padding:3px 9px;border-radius:999px;
text-transform:none;letter-spacing:0;font-size:12px;font-weight:720;
font-variant-numeric:tabular-nums;background:var(--bg2);color:var(--text);
}
.fnow-big{margin:7px 0 4px;font-size:27px;font-weight:840;letter-spacing:-.7px;line-height:1.1}
.fnow-sub{font-size:13px;color:var(--hint);line-height:1.45}
.fnow-sub b{color:var(--text);font-weight:650}
.fbar{height:6px;margin-top:13px;border-radius:3px;background:var(--bg2);overflow:hidden}
.fbar i{display:block;height:100%;border-radius:3px;background:var(--ok);transition:width 1s linear}
.fnow.busy .fbar i{background:var(--warn)}
/* свободные окна кабинета */
.ffree{
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
margin:0 0 12px;padding:11px 12px;border-radius:15px;
background:color-mix(in srgb, var(--ok) 11%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent);
}
.ffree>b{display:inline-flex;align-items:center;gap:5px;margin-right:2px;font-size:12.5px;font-weight:760;color:var(--ok)}
.chip.free{background:var(--card);color:var(--ok);font-weight:700;font-variant-numeric:tabular-nums}
.chip.free.past{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}
/* группа на карточке — кнопка: открывает её расписание */
.chip.grp{
border:0;cursor:pointer;font-family:inherit;font-weight:660;
background:color-mix(in srgb, var(--accent) 11%, var(--bg2));color:var(--text);
transition:transform .12s ease;
}
.chip.grp:active{transform:scale(.94)}
/* ------------------------------------------- админка: статистика поиска */
.sbar{padding:8px 0 9px;border-bottom:1px solid var(--sep);animation:rise .35s cubic-bezier(.2,.8,.25,1) backwards}
.sbar:last-child{border-bottom:0}
.sbar-top{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.sbar-top b{flex:1;min-width:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar-top span{flex:0 0 auto;font-size:11.5px;color:var(--hint);font-variant-numeric:tabular-nums}
.sbar-line{height:6px;border-radius:3px;background:var(--bg2);overflow:hidden}
.sbar-line i{
display:block;height:100%;border-radius:3px;
background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
}
/* кнопки над карточкой преподавателя или кабинета */
.fnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}
.fnav-btn{
display:inline-flex;align-items:center;gap:7px;min-width:0;height:40px;padding:0 15px 0 12px;
border:0;border-radius:999px;cursor:pointer;font-family:inherit;
background:var(--card);box-shadow:var(--shadow), inset 0 0 0 1px var(--sep);color:var(--text);
font-size:13.5px;font-weight:680;transition:transform .14s ease;
}
.fnav-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnav-btn .ic{flex:0 0 auto;width:17px;height:17px;color:var(--hint)}
#findClose .ic{width:18px;height:18px;stroke-width:2.2;color:var(--text)}
.fnav-btn:active{transform:scale(.95)}
/* ============================================================ серия дней */
/* Уровни огонька — как в TikTok: серый до трёх дней, дальше цвет растёт.
--f1 светлый край, --f2 тёмный, --fg свечение вокруг. */
.t-spark{--f1:#c9d0d9;--f2:#8a94a4;--fg:rgba(138,148,164,.32)}
.t-flame{--f1:#ffc24d;--f2:#ff6a1a;--fg:rgba(255,122,30,.42)}
.t-fire{--f1:#ff9126;--f2:#e3201b;--fg:rgba(240,60,30,.48)}
.t-blue{--f1:#74d4ff;--f2:#1d63ff;--fg:rgba(40,120,255,.48)}
.t-legend{--f1:#d57dff;--f2:#ff3a96;--fg:rgba(220,70,200,.5)}
.flame{display:block;flex:0 0 auto;overflow:visible}
.flame .fl-out,.flame .fl-core{transform-box:fill-box;transform-origin:50% 100%}
/* живой огонёк чуть колышется — сердцевина в своём ритме */
.flame.live .fl-out,.flame.ignite .fl-out{animation:flOut 1.9s ease-in-out infinite}
.flame.live .fl-core,.flame.ignite .fl-core{animation:flCore 1.3s ease-in-out infinite}
@keyframes flOut{
0%,100%{transform:scale(1,1) skewX(0)}
30%{transform:scale(.97,1.05) skewX(-2deg)}
65%{transform:scale(1.03,.97) skewX(1.5deg)}
}
@keyframes flCore{0%,100%{transform:scale(1)}50%{transform:scale(.86,1.1)}}
/* вспышка — с пружинкой, как в Duolingo */
.flame.ignite{animation:ignite .75s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ignite{
0%{transform:scale(.15) translateY(35%);opacity:0}
55%{opacity:1}
100%{transform:scale(1) translateY(0)}
}
/* ---- огонёк в шапке ---- */
.streak-chip{
display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 11px 0 8px;
border:0;border-radius:999px;cursor:pointer;font-family:inherit;
background:linear-gradient(180deg, color-mix(in srgb, var(--f1) 18%, var(--card)), var(--card));
box-shadow:var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--f2) 32%, transparent);
transition:transform .15s ease;
}
.streak-chip[hidden]{display:none}
.streak-chip b{font-size:15px;font-weight:820;letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:var(--text)}
.streak-chip .flame{filter:drop-shadow(0 1px 4px var(--fg))}
.streak-chip.zero b{color:var(--hint)}
.streak-chip:active{transform:scale(.92)}
/* ---- короткая анимация при первом заходе за день ---- */
/* снизу, над панелью вкладок: сверху окошко закрывало дни недели */
.streak-toast{
position:fixed;left:50%;bottom:calc(var(--bar) + 14px + env(safe-area-inset-bottom));z-index:85;
display:flex;align-items:center;gap:12px;width:min(92vw,380px);
padding:11px 16px 11px 11px;border-radius:22px;cursor:pointer;
background:color-mix(in srgb, var(--card) 94%, transparent);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
box-shadow:0 16px 40px -14px rgba(0,0,0,.55), inset 0 0 0 1.5px color-mix(in srgb, var(--f2) 45%, transparent);
transform:translate(-50%,150%);opacity:0;
transition:transform .5s cubic-bezier(.2,1.3,.4,1), opacity .3s ease;
}
.streak-toast[hidden]{display:none}
.streak-toast.in{transform:translate(-50%,0);opacity:1}
.st-flame{
flex:0 0 auto;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
background:radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--f1) 38%, transparent), transparent 70%);
}
.st-flame .flame{filter:drop-shadow(0 4px 10px var(--fg))}
.st-txt{min-width:0}
.st-txt b{display:block;font-size:17px;font-weight:820;letter-spacing:-.3px}
.st-num{font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--f1) 45%, var(--f2))}
.st-txt i{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px;
font-style:normal;font-size:12.5px;color:var(--hint)}
.st-txt i .ic{width:14px;height:14px;color:#4fb6ff}
.streak-toast.lost{box-shadow:0 16px 40px -14px rgba(0,0,0,.55), inset 0 0 0 1.5px var(--sep)}
/* ---- большой праздник на рубежах ---- */
.streak-party{
position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;
background:color-mix(in srgb, var(--bg) 90%, #000);opacity:0;transition:opacity .3s ease;
}
.streak-party[hidden]{display:none}
.streak-party.in{opacity:1}
.sp-glow{
position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 42% at 50% 33%, var(--fg), transparent 72%);
animation:spGlow 2.6s ease-in-out infinite alternate;
}
@keyframes spGlow{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.sp-body{position:relative;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.sp-flame{position:relative;width:150px;height:150px;margin-bottom:2px}
.sp-flame .flame{width:150px;height:150px;filter:drop-shadow(0 12px 30px var(--fg))}
/* искры разлетаются по кругу, когда огонь вспыхнул */
.spk{
position:absolute;left:50%;top:60%;width:7px;height:7px;margin:-3.5px;border-radius:50%;
background:var(--f1);box-shadow:0 0 10px var(--f1);opacity:0;
animation:spkBurst .95s ease-out calc(.38s + var(--d)) both;
}
@keyframes spkBurst{
0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(1)}
15%{opacity:1}
100%{opacity:0;transform:rotate(var(--a)) translateY(-104px) scale(.35)}
}
.sp-num{
font-size:86px;font-weight:900;line-height:1;letter-spacing:-3px;font-variant-numeric:tabular-nums;
background:linear-gradient(180deg, var(--f1), var(--f2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
animation:spUp .55s cubic-bezier(.2,1.4,.4,1) .35s both;
}
.sp-cap{margin-top:2px;font-size:15px;font-weight:700;color:var(--hint);animation:spUp .45s ease .45s both}
.sp-title{margin:16px 0 4px;font-size:22px;font-weight:820;letter-spacing:-.3px;animation:spUp .45s ease .55s both}
.sp-sub{margin:0 0 18px;font-size:13.5px;line-height:1.4;color:var(--hint);animation:spUp .45s ease .62s both}
@keyframes spUp{from{opacity:0;transform:translateY(14px)}}
.sp-body .week{width:100%;margin-bottom:20px}
.sp-go{
max-width:300px;color:#fff;animation:spUp .45s ease 1.15s both;
background:linear-gradient(135deg, var(--f1), var(--f2));
box-shadow:0 10px 26px -12px var(--fg);
}
/* ---- неделя ---- */
.week{
display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
padding:12px 8px 14px;margin:0 0 12px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);
}
.wd{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.wd-mark{
position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;background:var(--bg2);color:var(--hint);
}
.wd-mark .flame{width:22px;height:22px}
.wd-mark .ic{width:15px;height:15px}
.wd.in .wd-mark{
background:color-mix(in srgb, var(--f1) 24%, var(--bg2));
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--f2) 45%, transparent);
}
.wd.freeze .wd-mark{background:color-mix(in srgb, #5ec8ff 20%, var(--bg2));color:#4fb6ff}
.wd.freeze .wd-mark .ic{width:18px;height:18px}
.wd.rest .wd-mark{background:transparent}
.wd-dot{width:6px;height:6px;border-radius:50%;background:var(--sep)}
.wd.miss .wd-mark{color:color-mix(in srgb, var(--danger) 75%, var(--hint))}
.wd.pending .wd-mark{background:transparent;border:2px dashed color-mix(in srgb, var(--f2) 55%, transparent)}
.wd.future .wd-mark{background:transparent;border:1.5px solid var(--sep)}
.wd-name{font-size:11px;font-weight:700;color:var(--hint)}
.wd.today .wd-name{color:var(--text)}
.wd.today::after{
content:"";position:absolute;bottom:-7px;width:4px;height:4px;border-radius:50%;
background:color-mix(in srgb, var(--f1) 40%, var(--f2));
}
/* идеальная неделя: засчитанные дни сливаются в одну огненную полосу */
.week.perfect{column-gap:0}
.week.perfect .wd.bar .wd-mark{
width:100%;border-radius:0;box-shadow:none;
background:linear-gradient(180deg, color-mix(in srgb, var(--f1) 60%, transparent), color-mix(in srgb, var(--f2) 45%, transparent));
}
.week.perfect .wd.bar-start .wd-mark{border-radius:17px 0 0 17px}
.week.perfect .wd.bar-end .wd-mark{border-radius:0 17px 17px 0}
.week.perfect .wd.bar-start.bar-end .wd-mark{border-radius:17px}
.week.perfect .wd.bar .flame{filter:drop-shadow(0 0 4px rgba(255,255,255,.55))}
.week.stagger .wd{animation:spUp .45s cubic-bezier(.2,1.4,.4,1) both}
/* ---- шторка серии ---- */
.stk-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:4px 0 14px;text-align:center}
.stk-hero::before{
content:"";position:absolute;top:-14px;left:50%;width:260px;height:210px;transform:translateX(-50%);
background:radial-gradient(circle at 50% 42%, var(--fg), transparent 66%);pointer-events:none;
}
.stk-flame{position:relative;filter:drop-shadow(0 8px 22px var(--fg))}
.stk-num{
position:relative;margin-top:-2px;font-size:62px;font-weight:900;line-height:1;letter-spacing:-2px;
font-variant-numeric:tabular-nums;
background:linear-gradient(180deg, var(--f1), var(--f2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.stk-cap{position:relative;font-size:14px;font-weight:700;color:var(--hint)}
.stk-tier{
position:relative;margin-top:9px;padding:4px 12px;border-radius:999px;
font-size:11.5px;font-weight:820;letter-spacing:.5px;text-transform:uppercase;
color:color-mix(in srgb, var(--f2) 85%, var(--text));
background:color-mix(in srgb, var(--f1) 22%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--f2) 30%, transparent);
}
.stk-status{
display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 12px;padding:10px 12px;
border-radius:14px;font-size:13px;font-weight:650;text-align:center;
}
.stk-status .ic{flex:0 0 auto;width:16px;height:16px}
.stk-status.ok{background:color-mix(in srgb, var(--ok) 13%, transparent);color:var(--ok)}
.stk-status.rest{background:var(--bg2);color:var(--hint)}
.stk-status.warn{background:color-mix(in srgb, var(--warn) 15%, transparent);color:var(--warn)}
.stk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stk-snow{display:inline-flex !important;align-items:center;justify-content:center;gap:4px;color:#4fb6ff}
.stk-snow .ic{width:16px;height:16px}
.stk-snow small{font-size:12px;font-weight:700;color:var(--hint)}
.stk-next{padding:12px 14px;margin-bottom:12px;border-radius:16px;background:var(--bg2)}
.stk-next-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px;color:var(--hint)}
.stk-next-top b{color:var(--text);font-variant-numeric:tabular-nums}
.stk-bar{height:8px;border-radius:4px;background:var(--card);overflow:hidden}
.stk-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg, var(--f1), var(--f2))}
.stk-next.legend-done{display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:700;color:var(--text)}
.stk-top h3{margin-bottom:6px}
.stk-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--sep)}
.stk-row:last-of-type{border-bottom:0}
.stk-row b{flex:1;min-width:0;font-size:14px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-row.me{margin:0 -8px;padding:8px;border-radius:12px;border-bottom:0;background:color-mix(in srgb, var(--accent) 12%, transparent)}
.stk-cnt{display:inline-flex;align-items:center;gap:3px;font-size:15px;font-weight:820;
font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--f2) 85%, var(--text))}
/* ---- огонёк в профиле и в карточке человека ---- */
.stk-pill{
display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:7px 15px 7px 10px;
border:0;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:650;
color:var(--text);transition:transform .15s ease;
background:linear-gradient(135deg, color-mix(in srgb, var(--f1) 24%, transparent), color-mix(in srgb, var(--f2) 12%, transparent));
box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--f2) 40%, transparent);
}
.stk-pill:active{transform:scale(.96)}
.stk-pill b{font-size:15px;font-weight:850;color:color-mix(in srgb, var(--f2) 85%, var(--text));font-variant-numeric:tabular-nums}
.stk-pill i{margin-left:4px;font-style:normal;font-size:11.5px;color:var(--hint)}
.stk-mini{display:inline-flex !important;align-items:center;justify-content:center;gap:3px;
color:color-mix(in srgb, var(--f2) 85%, var(--text))}
/* С огоньком в шапке стало тесно: название группы переносилось на две
строки. Группа — в одну строку (в крайнем случае с многоточием), а на
узких экранах кнопки справа чуть компактнее. */
.group-chip{min-width:0;flex:0 1 auto}
.group-chip .code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{flex:0 0 auto;align-items:center}
@media (max-width:400px){
.top{gap:8px}
.top-right{gap:6px}
.top-right .icon-btn{width:36px;height:36px;font-size:18px}
.streak-chip{height:36px;padding:0 9px 0 7px}
}
/* ---- имя огонька ---- */
.fl-name{width:100%;max-width:320px;text-align:center;animation:spUp .45s ease 1.1s both}
.fl-name label{display:block;margin-bottom:8px;font-size:15px;font-weight:750;color:var(--text)}
.fl-name .field{margin-bottom:10px;text-align:center;font-size:17px;font-weight:700}
.fl-name .btn{max-width:none}
.stk-name{position:relative;margin-top:10px}
.stk-name .chip-btn{display:inline-flex;align-items:center;gap:6px}
.stk-name .chip-btn .ic{width:14px;height:14px}
.stk-name-btn{
display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:0;border-radius:10px;
background:transparent;cursor:pointer;font-family:inherit;
font-size:17px;font-weight:800;color:var(--text);
}
.stk-name-btn .ic{width:14px;height:14px;color:var(--hint)}
.stk-name .fl-name{animation:none;margin:4px auto 0}
.stk-name .fl-name .chip-btn{margin-top:6px}
/* у серой «искры» кнопка тоже серая — белый текст на ней не читался;
делаем огненной: намёк, каким огонёк станет */
.t-spark .sp-go{background:linear-gradient(135deg, #ffc24d, #ff6a1a);box-shadow:0 10px 26px -12px rgba(255,122,30,.6)}
/* ================================================================== баны */
.anav button{padding:10px 2px;font-size:10.5px}
.anav button .ic-slot{font-size:18px}
/* экран блокировки у человека */
.ban-card{
margin:16px 0 4px;padding:6px 14px;border-radius:16px;text-align:left;
background:color-mix(in srgb, var(--danger) 10%, var(--bg2));
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent);
}
.ban-card .row{display:flex;gap:10px;padding:8px 0;font-size:13.5px;color:var(--hint);border-bottom:1px solid var(--sep)}
.ban-card .row:last-child{border-bottom:0}
.ban-card .row b{margin-left:auto;color:var(--text);font-weight:680;text-align:right}
.ban-contact{margin-top:14px !important;font-size:13px !important}
/* форма бана в карточке человека */
.ban-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ban-chips .bchip.on{background:var(--danger);color:#fff}
.ban-days button{padding:9px 2px;font-size:12px}
.ban-now{
margin-bottom:14px;padding:12px 14px;border-radius:16px;
background:color-mix(in srgb, var(--danger) 10%, var(--bg2));
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent);
}
.ban-now-top{display:flex;align-items:center;gap:7px;margin-bottom:4px;color:var(--danger);font-size:14px}
.ban-now-top .ic{width:16px;height:16px}
.ban-now .row{display:flex;gap:10px;padding:6px 0;font-size:13px;color:var(--hint)}
.ban-now .row b{margin-left:auto;color:var(--text);font-weight:650;text-align:right}
.ban-now .btn{margin-top:8px}
/* запрет на мероприятие */
.ev-ban{margin-top:18px;padding-top:14px;border-top:1px solid var(--sep)}
.ev-ban input{width:100%;margin:2px 0 10px;padding:11px 13px;border:0;border-radius:13px;
background:var(--bg2);color:var(--text);font:inherit;font-size:14px;outline:none}
.evban{
display:flex;gap:11px;align-items:flex-start;margin:14px 0 4px;padding:13px 14px;border-radius:16px;
background:color-mix(in srgb, var(--danger) 10%, var(--bg2));
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent);
}
.evban .ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--danger)}
.evban b{display:block;font-size:14.5px;font-weight:760;color:var(--danger)}
.evban i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--hint)}
/* партнёр: без сигналов в личку и без удаления/привязки ссылок */
.partner-view [data-del], .partner-view [data-add], .partner-view [data-adm],
.partner-view .block:has([data-adm]){display:none !important}
/* раздел «Баны» */
.ban-row{padding:10px 0 12px;border-bottom:1px solid var(--sep)}
.ban-row:last-child{border-bottom:0}
.ban-row.past{opacity:.75}
.ban-top{display:flex;align-items:center;gap:8px}
.ban-who{
flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;
background:transparent;color:var(--text);text-align:left;cursor:pointer;font-family:inherit;
}
.ban-who .uinfo b{font-size:14px}
.ban-info{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 44px}
.ban-reason{
padding:4px 10px;border-radius:9px;font-size:12.5px;font-weight:650;
background:color-mix(in srgb, var(--danger) 13%, transparent);color:var(--danger);
}
.ban-term{padding:4px 10px;border-radius:9px;font-size:12.5px;background:var(--bg2);color:var(--hint)}
.ban-term.forever{color:var(--danger);font-weight:700}
.ban-by{margin:6px 0 0 44px;font-size:11.5px;color:var(--hint)}
/* ============================================= серия: зажечь кнопкой */
.streak-chip.unlit .flame{filter:grayscale(1) opacity(.5)}
.streak-chip.unlit b{color:var(--hint)}
.streak-chip.ask{animation:chipAsk 1.8s ease-in-out infinite}
@keyframes chipAsk{
0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, #ff8a3d 0%, transparent)}
50%{box-shadow:0 0 0 5px color-mix(in srgb, #ff8a3d 28%, transparent)}
}
.streak-toast.nudge{cursor:pointer}
.st-x{flex:0 0 auto;margin-left:auto;width:30px;height:30px;border:0;border-radius:50%;
display:grid;place-items:center;background:var(--bg2);color:var(--hint);font-size:17px;line-height:1}
.streak-toast.nudge .flame{filter:grayscale(1) opacity(.6)}
.stk-light{
width:100%;display:flex;align-items:center;gap:12px;margin:2px 0 12px;padding:13px 16px;
border:0;border-radius:18px;cursor:pointer;font-family:inherit;text-align:left;color:#fff;
background:linear-gradient(135deg, var(--f1, #ffb03a), var(--f2, #ff5a2a));
box-shadow:0 8px 22px -8px var(--f2, #ff5a2a);
animation:lightBreath 2.2s ease-in-out infinite;
transition:transform .15s ease, filter .3s ease;
}
.stk-light:active{transform:scale(.97)}
.stk-light:disabled{filter:saturate(.7)}
.stk-light b{display:block;font-size:17px;font-weight:820;letter-spacing:-.2px}
.stk-light i{display:block;font-style:normal;font-size:12.5px;opacity:.9;margin-top:1px}
.stk-light-fl{
flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
background:rgba(255,255,255,.2);
}
.stk-light-fl .flame{filter:grayscale(1) brightness(1.6);transition:filter .4s ease, transform .4s ease}
.stk-light.lit .stk-light-fl .flame{filter:none;transform:scale(1.25)}
@keyframes lightBreath{
0%,100%{box-shadow:0 8px 22px -8px var(--f2, #ff5a2a)}
50%{box-shadow:0 10px 30px -6px var(--f2, #ff5a2a)}
}
@media (prefers-reduced-motion: reduce){
.streak-chip.ask,.stk-light{animation:none}
}
.stk-hero.unlit::before{opacity:.15}
.stk-hero.unlit .stk-flame,.stk-hero.unlit .stk-num,.stk-hero.unlit .stk-tier{filter:grayscale(1) opacity(.55)}
.stk-hero.unlit .stk-flame .flame{animation:none}
/* ===================================================== итоги недели */
.wrap{
position:fixed;inset:0;z-index:300;overflow:hidden;color:#fff;
display:flex;flex-direction:column;
padding:calc(env(safe-area-inset-top) + 14px) 22px calc(env(safe-area-inset-bottom) + 22px);
background:var(--wr-bg);opacity:0;transition:opacity .3s ease, background .6s ease;
user-select:none;-webkit-user-select:none;cursor:pointer;
}
.wrap[hidden]{display:none}
.wrap.in{opacity:1}
.wr-intro {--wr-bg:linear-gradient(165deg,#1d0b33 0%,#5b1647 52%,#e5522a 100%);--wr-a:#ff8a3d;--wr-b:#a43cff}
.wr-pairs {--wr-bg:linear-gradient(165deg,#081733 0%,#173f9e 55%,#2fb4f0 100%);--wr-a:#4cc9ff;--wr-b:#3d5bff}
.wr-subject{--wr-bg:linear-gradient(165deg,#170a36 0%,#5b21b6 52%,#e2468f 100%);--wr-a:#ff5fb0;--wr-b:#8b5cf6}
.wr-teacher{--wr-bg:linear-gradient(165deg,#04241f 0%,#0d6b5f 52%,#8fd43a 100%);--wr-a:#b6f24a;--wr-b:#14b8a6}
.wr-flame {--wr-bg:linear-gradient(165deg,#220805 0%,#a3170f 50%,#f59e0b 100%);--wr-a:#ffb12e;--wr-b:#ff3b1f}
.wr-college{--wr-bg:linear-gradient(165deg,#0d1220 0%,#2b3553 50%,#5b5ff0 100%);--wr-a:#818cf8;--wr-b:#22d3ee}
.wr-final {--wr-bg:linear-gradient(165deg,#0f0820 0%,#35104f 50%,#f2542a 100%);--wr-a:#ff7a3d;--wr-b:#a855f7}
/* мягкие пятна света, плавают */
.wr-blob{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
.wr-blob.a{background:var(--wr-a);top:-30vmax;right:-30vmax;animation:wrFloat 9s ease-in-out infinite}
.wr-blob.b{background:var(--wr-b);bottom:-35vmax;left:-30vmax;animation:wrFloat 11s ease-in-out infinite reverse}
@keyframes wrFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vmax,5vmax) scale(1.12)}}
.wr-bars{position:relative;z-index:2;display:flex;gap:4px;margin-bottom:10px}
.wr-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.wr-bars b{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.wr-bars i.done b{width:100%}
.wr-bars i.now b{animation:wrBar var(--wr-dur) linear forwards}
@keyframes wrBar{to{width:100%}}
.wr-x{
position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 26px);right:16px;
width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;
background:rgba(0,0,0,.22);color:#fff;cursor:pointer;
}
.wr-x .ic{width:18px;height:18px}
.wr-stage{position:relative;z-index:1;flex:1;display:flex;min-height:0}
.wr-slide{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;min-height:0}
.wr-slide > *{animation:wrIn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k, 0) * 110ms + 80ms)}
@keyframes wrIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.wr-kicker{
display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:7px 14px;border-radius:99px;
background:rgba(255,255,255,.16);font-size:13px;font-weight:750;letter-spacing:.3px;text-transform:uppercase;
}
.wr-kicker .ic{width:15px;height:15px}
.wr-h{margin:0;font-size:34px;font-weight:850;letter-spacing:-1px}
.wr-p{margin:4px 0;font-size:18px;line-height:1.35;opacity:.92}
.wr-p b{font-weight:800}
.wr-hint{margin-top:18px;font-size:13px;opacity:.6;animation:wrIn .7s both, wrPulse 2s 1.5s ease-in-out infinite}
@keyframes wrPulse{50%{opacity:.25}}
.wr-big{display:block;font-size:110px;line-height:.95;font-weight:900;letter-spacing:-5px;font-variant-numeric:tabular-nums;
text-shadow:0 10px 40px rgba(0,0,0,.25)}
.wr-big small{font-size:46px;letter-spacing:-1px;opacity:.6}
.wr-unit{font-size:22px;font-weight:800;margin-top:-2px;margin-bottom:8px}
.wr-name{margin:6px 0;font-size:36px;line-height:1.08;font-weight:880;letter-spacing:-.8px;max-width:100%;overflow-wrap:anywhere}
.wr-note{margin-top:14px;font-size:15px;line-height:1.45;opacity:.88}
.wr-flame{margin:14px 0 8px;filter:drop-shadow(0 12px 40px rgba(255,120,40,.6));animation:wrIn .8s both, wrBob 3s 1s ease-in-out infinite}
.wr-flame.sm{margin:0 0 4px}
@keyframes wrBob{50%{transform:translateY(-8px)}}
/* пары по дням — столбики */
.wr-days{display:flex;align-items:flex-end;gap:10px;height:130px;margin:18px 0 0;width:100%;max-width:330px}
.wr-day{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.wr-day i{width:100%;height:var(--h);min-height:4px;border-radius:9px 9px 4px 4px;background:rgba(255,255,255,.35);
transform-origin:bottom;animation:wrGrow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:.6s}
.wr-day.best i{background:#fff;box-shadow:0 0 24px rgba(255,255,255,.6)}
.wr-day em{font-style:normal;font-size:13px;font-weight:800;opacity:.85}
.wr-day span{font-size:12px;font-weight:700;opacity:.75;text-transform:uppercase}
@keyframes wrGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* топ-3 предметов */
.wr-rank{width:100%;max-width:340px;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.wr-rrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.14);text-align:left}
.wr-rrow:first-child{background:rgba(255,255,255,.26)}
.wr-rrow span{width:24px;font-size:18px;font-weight:900;opacity:.75}
.wr-rrow b{flex:1;font-size:15px;font-weight:750;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-rrow i{font-style:normal;font-size:15px;font-weight:850}
.wr-card-sm{display:flex;align-items:center;gap:12px;max-width:340px;margin-top:22px;padding:14px 16px;border-radius:18px;
background:rgba(0,0,0,.22);font-size:14.5px;line-height:1.4;text-align:left}
.wr-card-sm .ic{flex:none;width:22px;height:22px;opacity:.8}
.wrap .week{width:100%;max-width:340px;margin-top:14px;background:rgba(0,0,0,.2)}
.wr-pct{margin:4px 0 18px;padding:9px 16px;border-radius:99px;background:rgba(255,255,255,.18);font-size:15px}
.wr-facts{width:100%;max-width:340px;display:flex;flex-direction:column;gap:8px}
.wr-facts > div{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.12);text-align:left}
.wr-facts > div > i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18)}
.wr-facts .ic{width:18px;height:18px}
.wr-facts span{font-size:13px;opacity:.9;display:flex;flex-direction:column}
.wr-facts span b{font-size:16px;font-weight:800;opacity:1}
/* итоговая карточка для истории */
.wr-share{
width:100%;max-width:340px;padding:20px 20px 16px;border-radius:28px;text-align:left;
background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 24px 60px -20px rgba(0,0,0,.5);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.wr-sc-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.wr-sc-top i{font-style:normal;opacity:.7;text-transform:none;letter-spacing:0}
.wr-sc-who{display:flex;align-items:center;gap:12px;margin:14px 0}
.wr-sc-who b{display:block;font-size:20px;font-weight:850}
.wr-sc-who i{font-style:normal;font-size:13px;opacity:.75}
.wr-sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.wr-sc-grid div{padding:12px;border-radius:16px;background:rgba(0,0,0,.2)}
.wr-sc-grid b{display:block;font-size:28px;font-weight:900;letter-spacing:-1px;line-height:1.05}
.wr-sc-grid i{font-style:normal;font-size:12px;opacity:.8}
.wr-sc-row{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-top:1px solid rgba(255,255,255,.16);font-size:13px}
.wr-sc-row span{opacity:.75;flex:none}
.wr-sc-row b{font-weight:800;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-sc-foot{margin-top:8px;text-align:center;font-size:12px;font-weight:800;opacity:.65;letter-spacing:.3px}
.wr-btn{width:100%;max-width:340px;margin-top:16px;background:#fff;color:#1a1030;font-weight:850}
.wr-btn .ic{width:17px;height:17px}
.wr-again{max-width:340px;margin-top:6px;background:rgba(255,255,255,.14);color:#fff}
@media (max-height:700px){
.wr-big{font-size:84px}.wr-name{font-size:30px}.wr-days{height:100px}.wr-flame svg{max-height:100px}
}
@media (prefers-reduced-motion: reduce){
.wr-blob,.wr-flame,.wr-hint{animation:none}
}
/* время утренней и вечерней сводки — ряд под переключателем */
.time-seg{margin:-2px 0 12px 54px}
.time-seg button{font-variant-numeric:tabular-nums}
.time-seg.off{opacity:.45}
.time-seg[hidden]{display:none}
/* ================================================= нижнее меню на 8 вкладок */
.tabbar.eight button{font-size:8px;letter-spacing:-.45px;padding-left:0;padding-right:0;gap:2px}
.tabbar.eight button .ic{font-size:17px;width:17px;height:17px}
.tabbar.eight .count{right:calc(50% - 17px)}
/* ================================================= бета: список тестов */
.beta-head{display:flex;gap:12px;align-items:center;margin:4px 0 14px}
.beta-head .ic-slot{font-size:22px;color:var(--accent)}
.beta-head b{display:block;font-size:20px;font-weight:820}
.beta-head i{font-style:normal;font-size:13px;color:var(--hint)}
.beta-card{
width:100%;display:flex;align-items:center;gap:14px;padding:14px;margin-bottom:10px;border:0;cursor:pointer;
border-radius:20px;background:var(--card);box-shadow:var(--shadow);color:var(--text);text-align:left;font-family:inherit;
}
.beta-card img{width:62px;height:62px;flex:none;filter:drop-shadow(0 6px 14px rgba(255,120,40,.35))}
.beta-card span{flex:1;min-width:0}
.beta-card b{display:block;font-size:17px;font-weight:800}
.beta-card i{display:block;font-style:normal;font-size:12.5px;color:var(--hint);line-height:1.35;margin-top:2px}
.beta-card em{font-style:normal;font-size:13px;font-weight:800;padding:9px 14px;border-radius:12px;
background:var(--accent);color:var(--on-accent, #fff)}
#betaBack{margin-bottom:10px}
/* ================================================= утиная башня */
.dk{display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none;-webkit-user-select:none}
.dk-top{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px}
.dk-score b{display:block;font-size:40px;line-height:1;font-weight:900;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.dk-score i,.dk-best i,.dk-next i{font-style:normal;font-size:11px;color:var(--hint);text-transform:uppercase;letter-spacing:.4px}
.dk-best{text-align:right}
.dk-best b{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.dk-next{display:flex;flex-direction:column;align-items:center}
.dk-next canvas{width:44px;height:44px}
.dk-glass{
position:relative;width:100%;max-width:460px;display:flex;justify-content:center;
border-radius:0 0 28px 28px;padding:0 0 4px;
background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent));
box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--text) 18%, transparent),
inset 3px 0 0 color-mix(in srgb, var(--text) 12%, transparent),
inset -3px 0 0 color-mix(in srgb, var(--text) 12%, transparent);
}
.dk-glass canvas{display:block;touch-action:none;cursor:pointer}
.dk-ladder{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.dk-ladder img{width:24px;height:24px;opacity:.22;filter:grayscale(1)}
.dk-ladder img.got{opacity:1;filter:none}
.dk-over{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;
background:color-mix(in srgb, var(--bg) 70%, transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dk-over[hidden]{display:none}
.dk-over-card{text-align:center;padding:22px;max-width:280px}
.dk-over-duck img{width:96px;height:96px;filter:drop-shadow(0 10px 24px rgba(255,120,40,.4))}
.dk-over-card h3{margin:8px 0 2px;font-size:20px;font-weight:850}
.dk-over-score{font-size:52px;font-weight:900;letter-spacing:-2px;line-height:1.05}
.dk-over-card p{margin:4px 0 14px;font-size:13px;color:var(--hint)}
/* ================================================= флаппи-утка */
.fl{display:flex;flex-direction:column;align-items:center;gap:8px;user-select:none;-webkit-user-select:none}
.fl-glass{position:relative;width:100%;max-width:440px;display:flex;justify-content:center;
border-radius:24px;overflow:hidden;box-shadow:0 14px 40px rgba(30,20,70,.35)}
.fl-glass canvas{display:block;touch-action:none;cursor:pointer}
.fl-best{font-size:12px;color:var(--hint);text-transform:uppercase;letter-spacing:.4px}
.fl-best b{font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.fl-over{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
background:rgba(16,12,40,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.fl-over[hidden]{display:none}
.fl-over-card{text-align:center;padding:22px;max-width:280px}
.fl-medal{font-size:64px;line-height:1;filter:drop-shadow(0 8px 20px rgba(255,200,60,.45))}
.fl-over-card h3{margin:10px 0 2px;font-size:20px;font-weight:850}
.fl-over-score{font-size:56px;font-weight:900;letter-spacing:-2px;line-height:1.05;font-variant-numeric:tabular-nums}
.fl-over-card p{margin:4px 0 16px;font-size:13px;color:rgba(255,255,255,.7)}
/* хэллоуинские частицы тегов: продаются в сезон, носятся всегда */
.bp.pumpkin{background:url(/static/fest/pumpkin.svg) center/contain no-repeat}
.bp.bat{
background:linear-gradient(180deg,#b88cff,#6a3fb0);
-webkit-mask:url(/static/fest/bat.svg) center/contain no-repeat;mask:url(/static/fest/bat.svg) center/contain no-repeat;
}
.bp.ghost{
background:linear-gradient(180deg,#ffffff,#d9c8f2);
-webkit-mask:url(/static/fest/ghost.svg) center/contain no-repeat;mask:url(/static/fest/ghost.svg) center/contain no-repeat;
}
/* полка сезонных товаров */
.shop-season{
position:relative;overflow:hidden;margin:4px 0 10px;padding:14px 16px 14px 62px;border-radius:var(--radius);
background:linear-gradient(135deg,#2a1636,#170d20);color:#ffe2bd;
box-shadow:inset 0 0 0 1px rgba(255,122,26,.35), 0 8px 26px -12px rgba(255,110,20,.6);
}
.shop-season .ss-jack{
position:absolute;left:12px;top:50%;width:38px;height:38px;margin-top:-19px;padding:0;border:0;cursor:pointer;
background:url(/static/fest/jack.svg) center/contain no-repeat;
filter:drop-shadow(0 0 calc(var(--heat, 0) * 14px) rgba(255,150,30,.95));
-webkit-tap-highlight-color:transparent;
}
.shop-season .ss-jack.tap{animation:eggWobble .28s ease}
@keyframes eggWobble{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.18) rotate(-10deg)}70%{transform:scale(.95) rotate(6deg)}}
/* привет от Марата */
.egg{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
background:rgba(8,5,12,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:eggIn .35s ease}
.egg-card{width:100%;max-width:340px;text-align:center;animation:eggPop .45s cubic-bezier(.3,1.5,.5,1)}
.egg-card img{width:100%;max-height:60vh;object-fit:cover;border-radius:24px;
box-shadow:0 0 0 3px rgba(255,138,42,.6),0 20px 60px rgba(0,0,0,.6),0 0 60px rgba(255,120,20,.35)}
.egg-card p{margin:16px 0 14px;font-size:20px;font-weight:700;color:#fff}
@keyframes eggIn{from{opacity:0}}
@keyframes eggPop{from{opacity:0;transform:scale(.7) rotate(-4deg)}}
.shop-season b{display:block;font-size:17px;font-weight:850;letter-spacing:-.2px}
.shop-season i{display:block;font-style:normal;font-size:12.5px;color:#c9a9d8;margin-top:2px}
/* ================================================= рамки на аватарку */
/* Кольцо — граница с конусным градиентом, оно медленно вращается.
Внутри граница прозрачная, фон под буквой тот же, что у обычной аватарки. */
@property --fra{syntax:"";inherits:false;initial-value:0deg}
.ava.fr{
--avabg:color-mix(in srgb, var(--accent) 22%, var(--bg2));
border:2px solid transparent;
background:
linear-gradient(var(--avabg), var(--avabg)) padding-box,
conic-gradient(from var(--fra), var(--f1), var(--f2), var(--f3, var(--f1)), var(--f1)) border-box;
animation:frSpin var(--fs, 5s) linear infinite;
}
.ava.lg.fr{border-width:3.5px}
@keyframes frSpin{to{--fra:360deg}}
.ava.fr-pumpkin{
--f1:#ff7a1a;--f2:#ffd34d;--f3:#c94f08;--fs:4s;
box-shadow:0 0 10px -1px rgba(255,120,20,.65);
}
.ava.fr-web{
--f1:#efe8fb;--f2:#5d4c78;--f3:#b8a6d8;--fs:9s;
outline:1px dashed rgba(233,226,245,.55);outline-offset:2px;
box-shadow:0 0 8px -2px rgba(210,190,240,.5);
}
.ava.lg.fr-web{outline-offset:4px;outline-width:1.5px}
.ava.fr-ghost{
--f1:#ffffff;--f2:#b9a3e3;--f3:#f3ecff;--fs:6s;
box-shadow:0 0 12px 1px rgba(240,230,255,.55);
}
.ava.lg.fr-pumpkin{box-shadow:0 0 22px 1px rgba(255,120,20,.55)}
.ava.lg.fr-ghost{box-shadow:0 0 24px 3px rgba(240,230,255,.45)}
:root[data-motion="0"] .ava.fr{animation:none}
@media (prefers-reduced-motion: reduce){
html .ava.fr.fr{animation-duration:var(--fs, 5s) !important}
}
/* живые украшения рамок: аватарка в рамке не обрезает края, фото режется само,
а вокруг ползают и летают ::before / ::after. Всё — transform и opacity. */
.ava.fr{overflow:visible}
.ava.fr img{border-radius:50%}
.ava.fr::before,.ava.fr::after{content:"";position:absolute;pointer-events:none;z-index:2;background-repeat:no-repeat}
/* кольцо вокруг аватарки, по которому бегают украшения */
.ava.fr::after{inset:-24%}
@keyframes frOrbit{to{transform:rotate(360deg)}}
@keyframes frOrbitBack{to{transform:rotate(-360deg)}}
/* паутина: в углу сетка, по кругу ползёт паучок — то бежит, то замирает */
.ava.fr-web::before{left:-22%;top:-22%;width:62%;height:62%;background:url(/static/fest/web.svg) 0 0/contain;opacity:.75}
.ava.fr-web::after{background-image:url(/static/fest/spider.svg);background-position:50% 0;background-size:42% 42%;
animation:frCrawl 10s cubic-bezier(.5,0,.5,1) infinite}
@keyframes frCrawl{
0%{transform:rotate(0)}
22%,34%{transform:rotate(95deg)}
52%{transform:rotate(80deg)}
70%,78%{transform:rotate(210deg)}
100%{transform:rotate(360deg)}
}
/* тыквенная: тыковка сидит у края и подпрыгивает, кольцо искрит */
.ava.fr-pumpkin::after{inset:auto -18% -14% auto;width:52%;height:52%;
background:url(/static/fest/pumpkin.svg) center/contain no-repeat;
filter:drop-shadow(0 0 3px rgba(255,140,30,.8));
animation:frHop 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes frHop{
0%,60%,100%{transform:translateY(0) scale(1,1)}
68%{transform:translateY(0) scale(1.12,.86)}
78%{transform:translateY(-38%) scale(.94,1.08) rotate(-8deg)}
88%{transform:translateY(0) scale(1.08,.92)}
}
/* призрачная: привидение облетает аватарку и покачивается */
.ava.fr-ghost::after{background-image:url(/static/fest/ghost-w.svg);background-position:50% 0;background-size:34% 40%;
opacity:.92;animation:frOrbit 7s linear infinite}
.ava.fr-ghost::before{inset:-10%;border-radius:50%;
background:radial-gradient(closest-side, transparent 72%, rgba(240,230,255,.35) 86%, transparent);
animation:frPulse 2.8s ease-in-out infinite}
@keyframes frPulse{0%,100%{opacity:.4;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
/* летучие мыши: две кружат навстречу друг другу */
.ava.fr-bats::after{background-image:url(/static/fest/bat-p.svg);background-position:50% 0;background-size:46% 22%;
animation:frOrbit 4.2s linear infinite}
.ava.fr-bats::before{inset:-34%;background-image:url(/static/fest/bat-p.svg);background-position:50% 100%;background-size:36% 17%;
animation:frOrbitBack 6.4s linear infinite;opacity:.85}
.ava.fr-bats{--f1:#b48cff;--f2:#3a2156;--f3:#7a4aa3;--fs:5s;box-shadow:0 0 10px -1px rgba(160,110,255,.6)}
/* неон: два кольца, оранжевое и фиолетовое, фиолетовое иногда мигает, как вывеска */
.ava.fr-neon{
--f1:#ff8a2a;--f2:#ffc27a;--f3:#ff6a00;--fs:8s;
box-shadow:0 0 5px rgba(255,138,42,.95), 0 0 16px rgba(255,110,20,.6), inset 0 0 6px rgba(255,138,42,.55);
}
.ava.fr-neon::before{inset:-22%;border-radius:50%;border:1.5px solid #d7a6ff;
box-shadow:0 0 5px #b46bff, 0 0 14px rgba(160,90,255,.75), inset 0 0 6px rgba(180,110,255,.7);
animation:frNeon 5s linear infinite}
.ava.lg.fr-neon::before{border-width:2.5px}
.ava.fr-neon::after{display:none}
@keyframes frNeon{
0%,40%,49%,100%{opacity:1}
42%{opacity:.2} 44%{opacity:.95} 46%{opacity:.35}
}
/* затмение: чёрный диск, по краю бежит раскалённая корона, вокруг дышит свет */
.ava.fr-eclipse{
--f1:#120b16;--f2:#2a1a24;--f3:#120b16;--fs:20s;
box-shadow:0 0 0 1px rgba(255,220,160,.28);
}
.ava.fr-eclipse::before{inset:-16%;border-radius:50%;
background:conic-gradient(from 0deg, transparent 0 58%, rgba(255,200,120,.15) 66%,
rgba(255,226,170,.95) 84%, #fff 87%, rgba(255,190,110,.7) 91%, transparent 98%);
-webkit-mask:radial-gradient(closest-side, transparent 70%, #000 75%, #000 90%, transparent 100%);
mask:radial-gradient(closest-side, transparent 70%, #000 75%, #000 90%, transparent 100%);
animation:frOrbit 3.4s linear infinite}
.ava.fr-eclipse::after{inset:-34%;border-radius:50%;
background:radial-gradient(closest-side, transparent 52%, rgba(255,196,120,.32) 64%, rgba(255,150,60,.08) 78%, transparent 90%);
animation:frPulse 3.2s ease-in-out infinite}
/* глаза во тьме: дымное кольцо, вокруг то тут, то там открываются глаза */
.ava.fr-eyes{
--f1:#2a1640;--f2:#7a4aa3;--f3:#120a1c;--fs:7s;
box-shadow:0 0 14px 1px rgba(120,60,200,.6);
}
.ava.fr-eyes::before,.ava.fr-eyes::after{inset:-34%;
--eye:radial-gradient(ellipse closest-side, #fffbd0, #ffd23a 45%, rgba(255,150,20,.6) 70%, transparent);
background-image:var(--eye),var(--eye),var(--eye),var(--eye);
background-size:12% 8%;
filter:drop-shadow(0 0 3px rgba(255,200,40,.9));
animation:frEyes 4.6s ease-in-out infinite}
.ava.fr-eyes::before{background-position:9% 20%, 22% 20%, 80% 84%, 93% 84%}
.ava.fr-eyes::after{background-position:78% 10%, 91% 10%, 6% 76%, 19% 76%;animation-duration:6.2s;animation-delay:-2.4s}
@keyframes frEyes{
0%,18%{opacity:0;transform:scaleY(.2)}
26%,60%{opacity:1;transform:scaleY(1)}
62%{opacity:1;transform:scaleY(.1)}
64%,78%{opacity:1;transform:scaleY(1)}
86%,100%{opacity:0;transform:scaleY(.2)}
}
/* «инферно» — тег ограниченного тиража: глянцевая плашка с бегущим бликом,
золото-огненная надпись и угольки. :has() понимают не все вебвью —
там останется просто красный тег с угольками. */
.bp.inferno{
border-radius:50%;
background:radial-gradient(circle at 40% 38%, #fff6d0, #ffb02e 45%, #ff4a1c 80%, rgba(255,40,10,0) 86%);
box-shadow:0 0 6px rgba(255,90,20,.9);
}
.bio-line.tagged:has(.bp.inferno),
.bio-item.tagged:has(.bp.inferno),
.nick.tagged:has(.bp.inferno){
position:relative;overflow:hidden;
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 48%),
linear-gradient(120deg, #1c0503, #5c1206 42%, #2a0704 70%, #120302);
box-shadow:0 0 0 1px rgba(255,120,40,.75), inset 0 1px 0 rgba(255,220,180,.35),
inset 0 -6px 14px rgba(0,0,0,.45), 0 0 18px -3px rgba(255,70,20,.8);
animation:infernoGlow 2.6s ease-in-out infinite;
}
.bio-line.tagged:has(.bp.inferno)::after,
.bio-item.tagged:has(.bp.inferno)::after,
.nick.tagged:has(.bp.inferno)::after{
content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;z-index:2;pointer-events:none;
background:linear-gradient(100deg, transparent, rgba(255,240,220,.08) 30%, rgba(255,250,240,.55) 50%, rgba(255,240,220,.08) 70%, transparent);
transform:translateX(-130%) skewX(-18deg);
animation:infernoShine 3.4s ease-in-out infinite;
}
.bio-line.tagged:has(.bp.inferno) .nm,
.bio-item.tagged:has(.bp.inferno)>span:last-child,
.nick.tagged:has(.bp.inferno) .nm{
background-image:linear-gradient(100deg, #ff6a1f 0 30%, #ffd27a 44%, #fff 50%, #ffd27a 56%, #ff6a1f 70%);
background-size:280% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
filter:drop-shadow(0 0 4px rgba(255,110,30,.75));
animation:rolesheen 3.8s linear infinite;
}
.bio-line.tagged:has(.bp.inferno) .ic{color:#ffb02e}
@keyframes infernoGlow{
0%,100%{box-shadow:0 0 0 1px rgba(255,120,40,.75), inset 0 1px 0 rgba(255,220,180,.35),
inset 0 -6px 14px rgba(0,0,0,.45), 0 0 14px -3px rgba(255,70,20,.65)}
50%{box-shadow:0 0 0 1px rgba(255,170,70,.95), inset 0 1px 0 rgba(255,230,200,.45),
inset 0 -6px 14px rgba(0,0,0,.45), 0 0 26px -2px rgba(255,90,20,.95)}
}
@keyframes infernoShine{
0%,55%{transform:translateX(-130%) skewX(-18deg)}
100%{transform:translateX(330%) skewX(-18deg)}
}
/* карточка рамки в магазине: аватарка покупателя уже в рамке */
.frame-card .badge-wrap{display:flex;align-items:center;gap:14px}
.frame-card .ava.lg{width:64px;height:64px;font-size:26px}
.fr-name{font-weight:800;font-size:15px}
/* ограниченный тираж */
.shop-card .left{display:block;margin-top:7px;font-size:11.5px;font-weight:800;color:#ffb020;letter-spacing:.2px}
.shop-card .left.out{color:var(--danger)}
.shop-card.limited{
box-shadow:var(--shadow), inset 0 0 0 1.5px rgba(255,74,28,.55), 0 0 28px -10px rgba(255,74,28,.8);
}
/* «Охота на привидений»: битва групп */
.battle{margin-top:14px;padding:14px;border-radius:16px;background:var(--bg2)}
.battle .bhead{display:flex;align-items:center;gap:8px;font-size:15px}
.battle .bhead .ic{width:18px;height:18px;color:var(--accent)}
.battle .mini{margin:6px 0 10px}
.bgrow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px}
.bgrow.me{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.bgrow b{font-size:14px}
.bgrow i{font-style:normal;font-size:12px;color:var(--hint)}
.bgrow .btotal{margin-left:auto;font-weight:850;font-variant-numeric:tabular-nums}
.battle #battleAll{margin-top:8px}
/* админка: битва групп */
.bacard{border-radius:14px;margin-bottom:6px;background:var(--bg2)}
.bacard.open{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent)}
.batop{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.batop .uinfo{flex:1;min-width:0}
.batop .btotal{font-weight:850;font-size:16px;font-variant-numeric:tabular-nums}
.plus{color:var(--ok)} .minus{color:var(--danger)}
.babody{padding:0 10px 12px}
.baform{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.baacts{display:flex;gap:6px;flex-wrap:wrap}
.bah4{margin:12px 0 6px;font-size:13px;color:var(--hint);font-weight:700}
.baplayer,.bahist{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--sep)}
.baplayer .uinfo,.bahist .uinfo{flex:1;min-width:0}
.baplayer.off{opacity:.55}
.baplayer .trap{display:block;font-style:normal;font-size:11.5px;color:var(--hint);margin-top:2px}
.baplayer .trap.bad{color:var(--danger)}
.bgap{text-align:center;color:var(--hint);line-height:1;padding:2px 0}
/* ================================================= хэллоуин */
/* Включается атрибутом data-fest на . :not(#_) поднимает вес правила,
чтобы праздник перекрыл любую выбранную тему и свой акцент.
Всё живое анимирует только opacity и transform — это считает видеокарта,
слабые телефоны не греются. Тени и фильтры стоят на месте. */
:root[data-fest="halloween"]:not(#_){
--fx-ink:#ffb36b;
--bg:#0f0a16; --bg2:#09060e; --card:#1b1224;
--text:#f7ecdf; --hint:#a892b4;
--accent:#ff7a1a; --on-accent:#1d0b00;
--danger:#ff4d6d; --warn:#ffb02e; --ok:#9be15d;
--sep:rgba(190,150,220,.16);
--shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.95);
color-scheme:dark;
}
[data-fest="halloween"] .glow{
inset:-30% 0 auto 0;height:420px;opacity:.75;
background:
radial-gradient(45% 55% at 25% 45%, rgba(255,110,20,.32), transparent 70%),
radial-gradient(50% 60% at 80% 35%, rgba(140,60,220,.34), transparent 70%);
}
[data-fest="halloween"] .top{background:color-mix(in srgb, var(--bg) 88%, transparent)}
/* ведьмина шляпа на аватарке */
[data-fest="halloween"] .group-chip{position:relative}
[data-fest="halloween"] .group-chip::before{
content:"";position:absolute;left:1px;top:-12px;width:30px;height:23px;z-index:1;pointer-events:none;
background:url(/static/fest/hat.svg) center/contain no-repeat;
transform:rotate(-16deg);transform-origin:50% 100%;
}
/* своя рамка на аватарке — праздничную шляпу не надеваем поверх */
[data-fest="halloween"] .group-chip:has(.ava.fr)::before{display:none}
[data-fest="halloween"] .card{
background:linear-gradient(160deg, #21152c, #170f1f);
box-shadow:var(--shadow), inset 0 0 0 1px rgba(190,140,230,.08);
}
[data-fest="halloween"] .gap::before{content:"🕸️ "}
/* тыквы вместо номеров пар: сама тыква — ::after, свечение — ::before,
мерцает только прозрачность свечения */
[data-fest="halloween"] .card .num:not(.bp){
position:relative;z-index:0;background:none;border-radius:0;
padding-top:7px;font-size:16px;font-weight:900;color:#fff4bf;cursor:pointer;
text-shadow:0 0 3px #ffd34d, 0 0 9px #ff9a1f, 0 1px 0 #6b2300;
}
[data-fest="halloween"] .card .num:not(.bp)::after{
content:"";position:absolute;inset:0;z-index:-1;
background:url(/static/fest/pumpkin.svg) center/contain no-repeat;
}
[data-fest="halloween"] .card .num:not(.bp)::before{
content:"";position:absolute;inset:-10px;z-index:-2;border-radius:50%;
background:radial-gradient(closest-side, rgba(255,150,30,.75), rgba(255,110,20,.28) 55%, transparent);
animation:festGlow 3.2s ease-in-out infinite;
}
[data-fest="halloween"] .card:nth-child(2n) .num:not(.bp)::before{animation-delay:-1.1s}
[data-fest="halloween"] .card:nth-child(3n) .num:not(.bp)::before{animation-delay:-2.3s}
@keyframes festGlow{
0%,100%{opacity:.55;transform:scale(.92)}
18%{opacity:.95;transform:scale(1.04)}
22%{opacity:.4;transform:scale(.9)}
48%{opacity:.85;transform:scale(1)}
70%{opacity:.5;transform:scale(.94)}
}
/* прошедшая пара — тыква погасла */
[data-fest="halloween"] .card.done .num:not(.bp){background:none;color:#5b4a52;text-shadow:none}
[data-fest="halloween"] .card.done .num:not(.bp)::after{filter:grayscale(.85) brightness(.55)}
[data-fest="halloween"] .card.done .num:not(.bp)::before{display:none}
/* идущая пара — тыква горит ярче всех, карточка в отсветах */
[data-fest="halloween"] .card.now{
box-shadow:var(--shadow), inset 0 0 0 1.5px var(--accent), 0 0 26px -6px rgba(255,120,20,.55);
}
[data-fest="halloween"] .card.now .num:not(.bp)::before{inset:-14px;animation:festGlowHot 1.4s ease-in-out infinite}
@keyframes festGlowHot{
0%,100%{opacity:.8;transform:scale(1)}
30%{opacity:1;transform:scale(1.12)}
55%{opacity:.65;transform:scale(.95)}
}
[data-fest="halloween"] .card.now::after{content:"горит сейчас"}
/* тыкнули по тыкве — вспыхивает и подпрыгивает */
[data-fest="halloween"] .card .num:not(.bp).boo{animation:festBoo .55s cubic-bezier(.3,1.6,.5,1)}
[data-fest="halloween"] .card .num:not(.bp).boo::before{animation:festBooGlow .55s ease-out}
@keyframes festBoo{0%{transform:scale(1)}35%{transform:scale(1.28) rotate(-8deg)}70%{transform:scale(.94) rotate(4deg)}100%{transform:none}}
@keyframes festBooGlow{0%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1.8)}100%{opacity:.6;transform:scale(1)}}
.fest-spark{
position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;z-index:26;pointer-events:none;
background:radial-gradient(circle, #fff6c8, #ffb02e 55%, #ff6a00);
animation:festSpark .7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes festSpark{
from{transform:translate(0,0) scale(1);opacity:1}
to{transform:translate(var(--dx), var(--dy)) scale(.4);opacity:0}
}
/* приветствие: большая тыква с лицом покачивается, свечение дышит отдельно */
[data-fest="halloween"] .hello{
background:
radial-gradient(70% 45% at 50% 40%, rgba(255,110,20,.16), transparent 70%),
radial-gradient(90% 50% at 50% 110%, rgba(120,40,170,.35), transparent 65%),
var(--bg);
}
[data-fest="halloween"] .hello-mark{
position:relative;width:132px;height:132px;margin-bottom:14px;border-radius:0;
background:url(/static/fest/jack.svg) center/contain no-repeat;box-shadow:none;
animation:festJack 2.6s ease-in-out infinite;
}
[data-fest="halloween"] .hello-mark > *{display:none}
[data-fest="halloween"] .hello-mark::before{
content:"";position:absolute;inset:-34px;z-index:-1;border-radius:50%;
background:radial-gradient(closest-side, rgba(255,140,30,.5), rgba(255,100,20,.16) 60%, transparent);
animation:festGlow 2.4s ease-in-out infinite;
}
@keyframes festJack{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-6px) rotate(2deg)}
}
[data-fest="halloween"] .hello h1{color:#ffe2bd;text-shadow:0 0 18px rgba(255,120,20,.45)}
/* таб-бар: активная вкладка горит оранжевым */
[data-fest="halloween"] .tabbar{
background:color-mix(in srgb, #0b0710 92%, transparent);
border-top-color:rgba(255,122,26,.18);
}
[data-fest="halloween"] .tabbar button.on{color:#ff8a2a;text-shadow:0 0 10px rgba(255,120,20,.55)}
[data-fest="halloween"] .tabbar button.on .ic{filter:drop-shadow(0 0 5px rgba(255,130,20,.8))}
[data-fest="halloween"] .badge-rel{background:var(--accent);color:var(--on-accent)}
[data-fest="halloween"] .btn:not(.ghost):not(.danger){box-shadow:0 6px 22px -8px rgba(255,120,20,.7)}
/* сцена позади карточек: луна с ведьмой, паутина, туман, глаза в темноте */
.fest{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fest-moon{
position:absolute;top:calc(70px + env(safe-area-inset-top));right:-34px;width:118px;height:118px;border-radius:50%;
background:radial-gradient(circle at 38% 36%, #fff6dc, #ffe2a6 45%, #f2b765 75%, #d89040);
box-shadow:0 0 40px 10px rgba(255,200,120,.22), 0 0 120px 40px rgba(255,170,80,.1);
opacity:.5;
}
.fest-moon::before,.fest-moon::after{content:"";position:absolute;border-radius:50%;background:rgba(180,120,60,.22)}
.fest-moon::before{width:22px;height:22px;left:30px;top:40px}
.fest-moon::after{width:13px;height:13px;left:58px;top:70px}
.fest-witch{
position:absolute;left:0;top:calc(96px + env(safe-area-inset-top));width:64px;height:40px;opacity:0;
background:linear-gradient(180deg,#5a3478,#2a1640);
-webkit-mask:url(/static/fest/witch.svg) center/contain no-repeat;mask:url(/static/fest/witch.svg) center/contain no-repeat;
animation:festWitch 26s linear 4s infinite;
}
@keyframes festWitch{
0%{opacity:0;transform:translate(-80px,40px) rotate(-6deg)}
2%{opacity:.9}
22%{transform:translate(55vw,-10px) rotate(-10deg)}
30%{opacity:.9}
34%,100%{opacity:0;transform:translate(calc(100vw + 80px),-40px) rotate(-12deg)}
}
.fest-web{
position:absolute;top:env(safe-area-inset-top);left:0;width:110px;height:110px;opacity:.13;
background:url(/static/fest/web.svg) 0 0/contain no-repeat;
}
.fest-web.r{left:auto;right:0;transform:scaleX(-1);top:calc(54px + env(safe-area-inset-top));width:84px;height:84px;opacity:.1}
.fest-fog{
position:absolute;left:-10%;right:-10%;bottom:calc(var(--bar) - 10px + env(safe-area-inset-bottom));height:110px;
background:radial-gradient(50% 60% at 30% 100%, rgba(170,120,230,.16), transparent 70%),
radial-gradient(45% 55% at 75% 100%, rgba(170,120,230,.13), transparent 70%);
animation:festFog 14s ease-in-out infinite alternate;
}
@keyframes festFog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
/* пара глаз светится в тумане и моргает */
.fest-eyes{
position:absolute;bottom:calc(var(--bar) + 26px + env(safe-area-inset-bottom));width:22px;height:6px;opacity:0;
animation:festEyes var(--dur,9s) ease-in-out var(--delay,0s) infinite;
}
.fest-eyes::before,.fest-eyes::after{
content:"";position:absolute;top:0;width:7px;height:6px;border-radius:50% 50% 45% 45%;
background:radial-gradient(circle at 50% 60%, #fff7b0, #ffd34d 45%, #ff9a1f);
box-shadow:0 0 8px 2px rgba(255,190,40,.55);
animation:festBlink var(--dur,9s) linear var(--delay,0s) infinite;
}
.fest-eyes::before{left:0}
.fest-eyes::after{right:0}
@keyframes festEyes{0%,8%{opacity:0}14%,46%{opacity:.9}54%,100%{opacity:0}}
@keyframes festBlink{0%,26%,30%,38%,41%,100%{transform:scaleY(1)}28%,40%{transform:scaleY(.1)}}
/* верхний слой: что пролетает и свисает поверх карточек */
.fest-top{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.fest-spider{
position:absolute;top:calc(56px + env(safe-area-inset-top));right:18px;width:18px;height:18px;
animation:festSpider 11s ease-in-out infinite;
}
.fest-spider::before{ /* нитка */
content:"";position:absolute;left:50%;bottom:14px;width:1px;height:260px;
background:linear-gradient(to bottom, transparent, rgba(255,255,255,.35));
}
.fest-spider svg{display:block;width:18px;height:18px}
@keyframes festSpider{
0%,100%{transform:translateY(-80px)}
40%,55%{transform:translateY(56px)}
47%{transform:translateY(50px) rotate(5deg)}
}
/* летучая мышь: внешний слой летит, внутренний машет крыльями */
.fest-bat{
position:absolute;left:0;top:0;opacity:0;
animation:festBatFly var(--dur,9s) linear var(--delay,0s) infinite;
}
.fest-bat b{
display:block;width:calc(34px * var(--s,1));height:calc(16px * var(--s,1));
background:linear-gradient(180deg,#4a2b63,#26153a);
-webkit-mask:url(/static/fest/bat.svg) center/contain no-repeat;mask:url(/static/fest/bat.svg) center/contain no-repeat;
animation:festFlap .22s ease-in-out infinite alternate;
}
@keyframes festFlap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
@keyframes festBatFly{
0%{opacity:0;transform:translate(-50px, var(--y0,120px))}
5%{opacity:.95}
30%{transform:translate(30vw, calc(var(--y0,120px) - 30px))}
55%{transform:translate(58vw, calc(var(--y0,120px) + 18px))}
75%{opacity:.95}
82%,100%{opacity:0;transform:translate(calc(100vw + 60px), calc(var(--y0,120px) - 40px))}
}
body.playing .fest, body.playing .fest-top{display:none}
:root[data-motion="0"] .fest-top,
:root[data-motion="0"] .fest-witch,
:root[data-motion="0"] .fest-eyes{display:none}
/* привидения — фоновый эффект на время праздника; без фильтров, только прозрачность */
.fx-ghosts i{top:auto;bottom:-8vh;animation-name:fxrise}
.fx-ghosts i b{
height:calc(var(--size,12px) * 1.17);
background:linear-gradient(180deg,#ffffff,#cdb8ee);
-webkit-mask:url(/static/fest/ghost.svg) center/contain no-repeat;
mask:url(/static/fest/ghost.svg) center/contain no-repeat;
}
/* «Уменьшить движение» на многих телефонах включает экономия батареи, и тогда
общее правило замораживает всё: привидения повисли бы в ряд, тыквы погасли.
Праздник — как и частицы тегов — оставляем живым. Своя кнопка «Анимации»
в настройках по-прежнему выключает всё. */
@media (prefers-reduced-motion: reduce){
:root[data-fest="halloween"] .card .num:not(.bp)::before{animation-duration:3.2s !important}
:root[data-fest="halloween"] .card.now .num:not(.bp)::before{animation-duration:1.4s !important}
:root[data-fest="halloween"] .card .num:not(.bp).boo,
:root[data-fest="halloween"] .card .num:not(.bp).boo::before{animation-duration:.55s !important}
:root[data-fest="halloween"] body .fest-spark{animation-duration:.7s !important}
:root[data-fest="halloween"] .hello .hello-mark{animation-duration:2.6s !important}
:root[data-fest="halloween"] .hello .hello-mark::before{animation-duration:2.4s !important}
:root[data-fest="halloween"] body .fest .fest-fog{animation-duration:14s !important}
:root[data-fest="halloween"] body .fest .fest-witch{animation-duration:26s !important}
:root[data-fest="halloween"] body .fest .fest-eyes,
:root[data-fest="halloween"] body .fest .fest-eyes::before,
:root[data-fest="halloween"] body .fest .fest-eyes::after{animation-duration:var(--dur,9s) !important}
:root[data-fest="halloween"] body .fest-top .fest-spider{animation-duration:11s !important}
:root[data-fest="halloween"] body .fest-top .fest-bat{animation-duration:var(--dur,9s) !important}
:root[data-fest="halloween"] body .fest-top .fest-bat b{animation-duration:.22s !important}
:root[data-fest="halloween"] body .fx-ghosts i{animation-duration:var(--dur,12s) !important}
:root[data-fest="halloween"] body .fx-ghosts i b{animation-duration:calc(var(--dur,12s) / 3.5) !important}
}