/*
╔══════════════════════════════════════════════════════╗
║ ЗАБЕЙСЯ — DESIGN SYSTEM v1.0 ║
║ Используй классы и CSS-переменные при создании ║
║ новых страниц. Не хардкоди цвета напрямую. ║
╚══════════════════════════════════════════════════════╝
*/
/* ── 1. TOKENS ─────────────────────────────────────── */
:root {
--transition: 180ms ease;
--container: 1160px;
--font-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
--font-mono: 'SF Mono', ui-monospace, monospace;
/* Главная V2: единые вертикальные отступы у всех полос (сверху и снизу одинаково) */
--v2-home-section-pad-y:clamp(3.25rem,6vw,5.5rem);
--v2-home-section-pad-y-sm:clamp(2.5rem,5vw,4rem);
/* Сетки с gap:1px: фон под «швами» = основной фон (--bg), иначе пустые колонки заливаются тёмным var(--border) */
--v2-grid-gap-bg:var(--bg);
/* V2: горизонтальные поля. Мобилка — узкие боковые отступы; от 640px — как legacy .wrap */
--v2-gutter-x-mobile:8px;
--v2-gutter-x:24px;
/* V2 поля: базовая геометрия (скос), палитра задаётся в [data-theme] */
--v2-field-cut:10px;
}
[data-theme="dark"] {
--bg:#0A0E1A; --bg-alt:#0F1426; --surface:#141930; --surface2:#1B2240; --surface3:#222A4A;
--text:#F4F1EA; --text2:#9896A6; --text3:#52506A;
--border:#232B50; --border2:#1A2040;
--red:#FF3D3D; --red-dim:rgba(255,61,61,.10); --red-glow:rgba(255,61,61,.22);
--yellow:#FFE500; --yellow-dim:rgba(255,229,0,.10);
--teal:#00FFCC; --teal-dim:rgba(0,255,204,.10);
--info:#4D7CFF; --info-dim:rgba(77,124,255,.10);
--shadow:0 4px 28px rgba(0,0,0,.5);
--stripe:rgba(255,255,255,.018); --stroke:rgba(255,255,255,.055);
--nav-bg:rgba(10,14,26,.92); --overlay:rgba(0,0,0,.75);
--hero-bg:linear-gradient(140deg,#0A0E1A 0%,#121836 55%,#1A103A 100%);
--hero-vs:rgba(255,255,255,.08);
--chat-me:#1B2240; --chat-other:#141930;
/* V2: «вдавленные» скошенные поля (dark) */
--v2-field-bg:#151B2E;
--v2-field-border:rgba(255,255,255,0.11);
--v2-field-inset:inset 1px 1px 3px rgba(0,0,0,0.55), inset -1px -1px 1px rgba(255,255,255,0.045);
--v2-field-focus-glow:0 0 0 1px rgba(0,255,204,0.45);
--v2-field-label:#8B9AB0;
}
[data-theme="light"] {
--bg:#F7F4EE; --bg-alt:#EDEAE2; --surface:#FFFFFF; --surface2:#F2EFE9; --surface3:#E8E5DE;
--text:#0A0E1A; --text2:#5C5A6F; --text3:#9896A6;
--border:#DDD9CF; --border2:#E8E5DE;
--red:#E83232; --red-dim:rgba(232,50,50,.08); --red-glow:rgba(232,50,50,.18);
--yellow:#E8CF00; --yellow-dim:rgba(232,207,0,.10);
--teal:#00C8A0; --teal-dim:rgba(0,200,160,.10);
--info:#2E5FE8; --info-dim:rgba(46,95,232,.08);
--shadow:0 4px 28px rgba(10,14,26,.10);
--stripe:rgba(0,0,0,.018); --stroke:rgba(0,0,0,.055);
--nav-bg:rgba(247,244,238,.97); --overlay:rgba(0,0,0,.55);
--hero-bg:linear-gradient(140deg,#F7F4EE 0%,#EEE9DF 55%,#EAE0F0 100%);
--hero-vs:rgba(0,0,0,.07);
--chat-me:#EEE9DF; --chat-other:#FFFFFF;
/* V2: «вдавленные» скошенные поля (light) */
--v2-field-bg:#EBE8E2;
--v2-field-border:rgba(10,14,26,0.14);
--v2-field-inset:inset 1px 1px 2px rgba(0,0,0,0.07), inset -1px -1px 1px rgba(255,255,255,0.75);
--v2-field-focus-glow:0 0 0 1px rgba(0,168,130,0.45);
--v2-field-label:#6B7A90;
}
/* ── 2. RESET ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s;width:100%;max-width:100%;}
a{text-decoration:none;color:inherit;}ul{list-style:none;}button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-thumb{background:var(--border);}
/* ── 3. LAYOUT ──────────────────────────────────────── */
/* Hybrid fallback: базовая геометрия дублируется Tailwind-утилитами в design-system.html. */
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
@media(max-width:639px){
body.v2-page .wrap{
padding-left:max(var(--v2-gutter-x-mobile), env(safe-area-inset-left));
padding-right:max(var(--v2-gutter-x-mobile), env(safe-area-inset-right));
}
}
.section{padding:80px 0;}.section-sm{padding:56px 0;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--v2-grid-gap-bg);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--v2-grid-gap-bg);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--v2-grid-gap-bg);}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
/* ── 4. UTILITIES ───────────────────────────────────── */
/* Нестандартные эффекты (clip-path, stripes, typo-bg, vs-bg) пока остаются CSS-first. */
.clip-sm{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
.clip-md{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.clip-lg{clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);}
.stripes{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--stripe) 7px,var(--stripe) 8px);}
/* Типографический фон — outline-текст на весь блок */
.typo-bg{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;}
.typo-bg-text{font-family:var(--font-head);font-size:clamp(120px,20vw,260px);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.85;color:transparent;-webkit-text-stroke:1px var(--stroke);user-select:none;white-space:nowrap;padding-right:24px;transition:-webkit-text-stroke-color .3s;}
/* VS фон — для hero / challenge секций */
.vs-bg{position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--font-head);font-size:clamp(180px,28vw,380px);font-weight:900;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--stroke);user-select:none;pointer-events:none;line-height:1;letter-spacing:-.04em;transition:-webkit-text-stroke-color .3s;}
.c-red{color:var(--red);}.c-yellow{color:var(--yellow);}.c-teal{color:var(--teal);}.c-info{color:var(--info);}.c-muted{color:var(--text2);}.c-dim{color:var(--text3);}
.appear{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.appear.vis{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;}
.stagger.vis>*:nth-child(1){opacity:1;transform:none;transition-delay:0ms}
.stagger.vis>*:nth-child(2){opacity:1;transform:none;transition-delay:70ms}
.stagger.vis>*:nth-child(3){opacity:1;transform:none;transition-delay:140ms}
.stagger.vis>*:nth-child(4){opacity:1;transform:none;transition-delay:210ms}
.stagger.vis>*:nth-child(5){opacity:1;transform:none;transition-delay:280ms}
.stagger.vis>*:nth-child(6){opacity:1;transform:none;transition-delay:350ms}
.stagger.vis>*:nth-child(7){opacity:1;transform:none;transition-delay:420ms}
.stagger.vis>*:nth-child(8){opacity:1;transform:none;transition-delay:490ms}
@media (prefers-reduced-motion: reduce) {
.appear,
.appear.vis {
opacity: 1;
transform: none;
transition: none;
}
.stagger > *,
.stagger.vis > * {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0ms !important;
}
}
/* ── 5. TYPOGRAPHY ──────────────────────────────────── */
.t-display{font-family:var(--font-head);font-size:clamp(42px,7vw,88px);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.03em;}
.t-h1{font-family:var(--font-head);font-size:clamp(28px,4vw,48px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;}
.t-h2{font-family:var(--font-head);font-size:clamp(20px,3vw,32px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;}
.t-h3{font-family:var(--font-head);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;}
.t-body{font-size:15px;color:var(--text2);line-height:1.7;}
.t-small{font-size:13px;color:var(--text2);line-height:1.6;}
.t-mono{font-family:var(--font-mono);letter-spacing:.04em;}
.t-label{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);}
/*
* Кикер секций (V2 + design-system): единая точка правки.
* Шаблоны: Подпись
рядом с .s-title внутри .wrap.
* Токены: --t-kicker-bar / --t-kicker-gap / --t-kicker-shift / --t-kicker-mb (нижний отступ).
*/
.t-kicker{
--t-kicker-bar:20px;
--t-kicker-gap:10px;
--t-kicker-shift:30px;
--t-kicker-mb:10px;
margin-top:0;
margin-right:0;
margin-bottom:var(--t-kicker-mb);
margin-left:calc(-1 * var(--t-kicker-shift));
padding-left:var(--t-kicker-shift);
box-sizing:border-box;
max-width:calc(100% + var(--t-kicker-shift));
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
color:var(--red);
text-transform:uppercase;
letter-spacing:.12em;
display:flex;
align-items:center;
gap:var(--t-kicker-gap);
}
.t-kicker::before{
content:"";
display:block;
flex-shrink:0;
width:var(--t-kicker-bar);
height:2px;
background:var(--red);
}
.s-head{margin-bottom:48px;}
.s-head.center{text-align:center;}
.s-head.center .t-kicker{
margin-left:0;
padding-left:0;
max-width:100%;
justify-content:center;
}
.s-title{font-family:var(--font-head);font-size:clamp(28px,4.5vw,48px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;margin-bottom:10px;}
.s-sub{font-size:16px;color:var(--text2);line-height:1.65;}
/* ── 6. BUTTONS ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:900;text-transform:uppercase;letter-spacing:.04em;border:none;transition:all var(--transition);white-space:nowrap;}
.btn-sm{font-size:11px;padding:9px 18px;}.btn-md{font-size:13px;padding:13px 26px;}.btn-lg{font-size:14px;padding:17px 34px;}.btn-xl{font-size:16px;padding:20px 42px;}
.btn-full{width:100%;justify-content:center;}
.btn-red{background:var(--red);color:#fff;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.btn-red:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 24px var(--red-glow);}
.btn-red:active{transform:scale(.97);}
.btn-yellow{background:var(--yellow);color:#0A0E1A;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.btn-yellow:hover{filter:brightness(1.08);transform:translateY(-2px);}
.btn-teal{background:var(--teal);color:#0A0E1A;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.btn-teal:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--text);border:2px solid var(--border);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.btn-ghost:hover{border-color:var(--red);color:var(--red);}
.btn-icon{width:36px;height:36px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:16px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);}
.btn-icon:hover{border-color:var(--red);color:var(--red);}
.btn[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none;}
/* ── 7. BADGES & TAGS ───────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);}
.b-red{background:var(--red);color:#fff;}.b-yellow{background:var(--yellow);color:#0A0E1A;}.b-teal{background:var(--teal);color:#0A0E1A;}.b-info{background:var(--info);color:#fff;}.b-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}
.b-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.8s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 11px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);}
.tag:hover{border-color:var(--red);color:var(--red);}
.tag-close{cursor:pointer;opacity:.6;font-size:12px;}
.tag.t-red{background:var(--red-dim);border-color:var(--red);color:var(--red);}
.tag.t-teal{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.tag.t-yellow{background:var(--yellow-dim);border-color:var(--yellow);color:var(--yellow);}
.tag.t-info{background:var(--info-dim);border-color:var(--info);color:var(--info);}
/* ── 8. INPUTS ──────────────────────────────────────── */
.inp-grp{margin-bottom:16px;}
.inp-lbl{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:6px;}
.inp{width:100%;padding:13px 16px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:border-color var(--transition);border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;appearance:none;}
.inp:focus{border-color:var(--red);}.inp:disabled{opacity:.4;cursor:not-allowed;}
.inp.state-err{border-color:var(--red);}.inp.state-ok{border-color:var(--teal);}
.inp::placeholder,.textarea::placeholder,.chat-inp::placeholder{color:var(--text2);opacity:.95;}
.inp-msg{font-family:var(--font-mono);font-size:11px;margin-top:5px;}
.inp-err{color:var(--red);}.inp-ok{color:var(--teal);}
.inp-icon-wrap{position:relative;}.inp-icon-wrap .inp{padding-left:42px;}
.inp-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none;}
.textarea{width:100%;padding:13px 16px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:border-color var(--transition);resize:vertical;min-height:96px;line-height:1.6;border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;appearance:none;}
.textarea:focus{border-color:var(--red);}
.sel-wrap{position:relative;}.sel-wrap::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;font-size:12px;}
.form-sel{width:100%;padding:13px 16px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;appearance:none;-webkit-appearance:none;border-radius:0;-webkit-border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:border-color var(--transition);}
.form-sel:focus{border-color:var(--red);}
/* ── 8b. V2 shell: скошенные поля, светлая/тёмная тема (все .inp / textarea / select на body.v2-page) ─ */
body.v2-page .inp,
body.v2-page input.inp,
body.v2-page .textarea,
body.v2-page textarea.textarea,
body.v2-page select.inp,
body.v2-page .form-sel{
background:var(--v2-field-bg);
border:1px solid var(--v2-field-border);
box-shadow:var(--v2-field-inset);
clip-path:polygon(var(--v2-field-cut) 0,100% 0,calc(100% - var(--v2-field-cut)) 100%,0 100%);
transition:border-color var(--transition),box-shadow var(--transition);
border-radius:0;
-webkit-border-radius:0;
-webkit-appearance:none;
appearance:none;
}
body.v2-page .inp:focus,
body.v2-page input.inp:focus,
body.v2-page .textarea:focus,
body.v2-page textarea.textarea:focus,
body.v2-page select.inp:focus,
body.v2-page .form-sel:focus{
border-color:var(--teal);
box-shadow:var(--v2-field-inset),var(--v2-field-focus-glow);
outline:none;
}
body.v2-page .inp.state-err,
body.v2-page .textarea.state-err{
border-color:var(--red);
box-shadow:var(--v2-field-inset),0 0 0 1px rgba(255,61,61,.35);
}
body.v2-page .inp.state-ok,
body.v2-page .textarea.state-ok{
border-color:var(--teal);
box-shadow:var(--v2-field-inset),var(--v2-field-focus-glow);
}
body.v2-page select.inp,
body.v2-page .form-sel{
padding-right:38px;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}
body.v2-page .inp-lbl{color:var(--v2-field-label);margin-bottom:2px;}
/* Вертикальный ритм между группами полей (label + input): padding не схлопывается с margin соседей */
body.v2-page label.inp-grp{display:block;margin-bottom:0;padding-bottom:1.5rem;}
body.v2-page form > .inp-msg.inp-err{margin-bottom:1rem;}
/* iOS Safari: при font-size < 16px на поле ввода браузер увеличивает масштаб при фокусе */
@media (max-width:767px){
body.v2-page .inp,
body.v2-page input.inp,
body.v2-page .textarea,
body.v2-page textarea.textarea,
body.v2-page select.inp,
body.v2-page .form-sel,
body.v2-page .chat-input-bar .chat-inp{
font-size:16px;
}
}
body.v2-page .v2-profile-edit-gender-chip{
background:var(--v2-field-bg);
border:1px solid var(--v2-field-border);
box-shadow:var(--v2-field-inset);
}
body.v2-page .v2-profile-edit-gender-chip:has(input:checked){
box-shadow:var(--v2-field-inset),var(--v2-field-focus-glow);
}
body.v2-page .v2-profile-edit-add-sport-btn{
background:var(--v2-field-bg);
border-color:var(--v2-field-border);
box-shadow:var(--v2-field-inset);
}
/* ── 9. CHECKBOX / RADIO / TOGGLE ───────────────────── */
.check-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.check-wrap input{position:absolute;opacity:0;width:0;height:0;}
.check-box{width:20px;height:20px;flex-shrink:0;background:var(--surface);border:1.5px solid var(--border);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.check-wrap.on .check-box{background:var(--red);border-color:var(--red);}
.check-mark{color:#fff;font-size:10px;font-weight:900;display:none;}
.check-wrap.on .check-box .check-mark{display:block;}
.check-wrap input:checked~.check-box{background:var(--red);border-color:var(--red);}
.check-wrap input:checked~.check-box .check-mark{display:block;}
.radio-box{width:20px;height:20px;flex-shrink:0;background:var(--surface);border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.check-wrap input:checked~.radio-box{border-color:var(--red);}
.radio-dot{width:8px;height:8px;background:var(--red);border-radius:50%;display:none;}
.check-wrap input:checked~.radio-box .radio-dot{display:block;}
.check-lbl{font-size:14px;color:var(--text2);transition:color var(--transition);}
.check-wrap:hover .check-lbl{color:var(--text);}
.toggle-wrap{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;}
.toggle-track{width:44px;height:24px;background:var(--surface2);border:1.5px solid var(--border);border-radius:99px;position:relative;flex-shrink:0;transition:all var(--transition);}
.toggle-thumb{width:16px;height:16px;background:var(--text3);border-radius:50%;position:absolute;top:2px;left:2px;transition:all var(--transition);}
.toggle-wrap.on .toggle-track{background:var(--red-dim);border-color:var(--red);}
.toggle-wrap.on .toggle-thumb{background:var(--red);transform:translateX(20px);}
.toggle-lbl{font-size:14px;color:var(--text2);}
/* ── 10. CARDS ──────────────────────────────────────── */
.card{background:var(--surface);border:1.5px solid var(--border);padding:24px;position:relative;overflow:hidden;transition:border-color var(--transition);}
.card:hover{border-color:var(--red);}
.ca-red{border-left:4px solid var(--red)!important;}.ca-yellow{border-left:4px solid var(--yellow)!important;}.ca-teal{border-left:4px solid var(--teal)!important;}
.mc{background:var(--surface);border-left:4px solid var(--teal);padding:22px 20px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:background var(--transition);}
.mc.hot{border-left-color:var(--red);}
/* В сетке главной — чередование белого и приглушённо-серого; иначе hover даёт «всё серое» */
.mc:hover{background:var(--surface2);}
.mcards > .mc:nth-child(odd){background:var(--surface);}
.mcards > .mc:nth-child(even){background:var(--surface2);}
.mcards > .mc:nth-child(odd):hover{background:var(--surface2);}
.mcards > .mc:nth-child(even):hover{background:var(--surface3);}
.mcards > .mc:nth-child(odd) .mc-av{border-color:var(--surface);}
.mcards > .mc:nth-child(even) .mc-av{border-color:var(--surface2);}
.mc-sport{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-size:14px;font-weight:900;text-transform:uppercase;}
.mc-title{font-size:15px;font-weight:700;line-height:1.3;}
.mc-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);}
.mc-row svg{width:13px;height:13px;color:var(--text3);flex-shrink:0;}
.mc-prog{display:flex;align-items:center;gap:10px;}
.mc-pb{flex:1;height:5px;background:var(--border);overflow:hidden;}
.mc-pf{height:100%;transition:width .5s;}
.mc-pct{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text2);white-space:nowrap;}
.mc-foot{padding-top:12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.mc-foot-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;flex:1;min-width:min(100%,12rem);}
.mc-foot-form{display:inline;margin:0;}
.mc-foot-form .btn-sm{vertical-align:middle;}
.mc-avs{display:flex;align-items:center;}
.mc-av{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;margin-left:-5px;flex-shrink:0;}
.mc-av:first-child{margin-left:0;}.mc-avmore{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-left:5px;}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.mc-meta{display:flex;flex-direction:column;gap:5px;}
.mc-title{color:var(--text);}
.mc-title a{color:inherit;text-decoration:none;transition:color var(--transition);}
.mc-title a:hover{color:var(--red);}
.mfilter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px;}
.mcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--v2-grid-gap-bg);}
.mcards>[data-match-card]{min-width:0;}
.mcards-empty{grid-column:1 / -1;}
.v2-match-empty{padding:2rem 1.25rem;text-align:left;}
.v2-match-empty-title{font-family:var(--font-head);font-size:1.125rem;font-weight:900;text-transform:uppercase;color:var(--text);margin-bottom:.5rem;}
.v2-match-empty-text{font-size:.875rem;line-height:1.65;color:var(--text2);max-width:36rem;}
/* V2 home: полосы — чередование фона; отступы сверху/снизу из --v2-home-section-pad-y (не обнулять у первой секции) */
.v2-home-band{
width:100%;
padding:var(--v2-home-section-pad-y) 0;
box-sizing:border-box;
}
.v2-home-band--bg{background:var(--bg);}
.v2-home-band--surface{background:var(--surface);}
.v2-home-band--sm{padding:var(--v2-home-section-pad-y-sm) 0;}
/* матчи: прозрачный фон у полосы, но вертикальные отступы как у остальных .v2-home-band */
.v2-matches-section{margin:0;background:transparent;border:none;}
/* Ближайшие матчи: швы сетки = фон страницы (hero-bg), не отдельный --bg; карточки единые белые полосатые, серый только :hover */
.v2-matches-section .mcards{background:transparent;}
.v2-matches-section .mcards > .mc{background-color:var(--surface);}
.v2-matches-section .mcards > .mc:nth-child(even){background-color:var(--surface);}
.v2-matches-section .mcards > .mc:hover,
.v2-matches-section .mcards > .mc:nth-child(even):hover{background-color:var(--surface2);}
.v2-matches-section .mcards > .mc:nth-child(odd) .mc-av,
.v2-matches-section .mcards > .mc:nth-child(even) .mc-av{border-color:var(--surface);}
.v2-matches-section .mcards > .mc:hover .mc-av{border-color:var(--surface2);}
/* V2 главная: CTA «Бросай вызов» — полоса и VS на краю секции (как index (7).html: .chl-bar + .chl-vs) */
#create-challenge.v2-challenge-section{
position:relative;
overflow:hidden;
}
#create-challenge .v2-challenge-section__bar{
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:var(--red);
z-index:2;
pointer-events:none;
}
#create-challenge .v2-challenge-section__vs{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
z-index:0;
font-family:var(--font-head);
font-size:clamp(100px,18vw,200px);
font-weight:900;
line-height:1;
letter-spacing:-0.04em;
text-transform:uppercase;
color:var(--hero-vs);
user-select:none;
pointer-events:none;
}
#create-challenge .v2-challenge-section__wrap{
position:relative;
z-index:1;
}
#create-challenge .v2-challenge-cta{
--v2-challenge-yellow:#fdd835;
position:relative;
max-width:none;
padding:clamp(1.75rem,4vw,2.75rem) 0;
text-align:left;
background:transparent;
}
html[data-theme="dark"] #create-challenge .v2-challenge-cta{
--v2-challenge-yellow:var(--yellow);
}
#create-challenge .v2-challenge-cta .t-kicker{
position:relative;
z-index:1;
--t-kicker-mb:0.75rem;
}
#create-challenge .v2-challenge-cta__title{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:.1em;
margin:0 0 .75rem;
font-family:var(--font-head);
font-size:clamp(1.5rem,3.8vw,2.35rem);
font-weight:900;
line-height:1.05;
letter-spacing:.02em;
text-transform:uppercase;
}
#create-challenge .v2-challenge-cta__title-line{
color:var(--text);
}
#create-challenge .v2-challenge-cta__title-accent{
color:var(--v2-challenge-yellow);
}
#create-challenge .v2-challenge-cta__lead{
position:relative;
z-index:1;
margin:0 0 .35rem;
max-width:28rem;
font-size:15px;
line-height:1.65;
color:var(--text2);
}
#create-challenge .v2-challenge-cta__lead--tight{
margin-bottom:1.1rem;
}
#create-challenge .v2-challenge-cta__actions{
position:relative;
z-index:1;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.65rem 1rem;
}
#create-challenge .v2-challenge-cta__btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
min-height:3rem;
padding:0 1.35rem;
font-family:var(--font-head);
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
text-decoration:none;
border-radius:0;
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:filter .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
#create-challenge .v2-challenge-cta__btn--primary{
background:var(--red);
color:#fff;
border:none;
}
#create-challenge .v2-challenge-cta__btn--primary:hover{
filter:brightness(1.06);
}
#create-challenge .v2-challenge-cta__bolt{
flex-shrink:0;
width:1.125rem;
height:1.125rem;
color:var(--v2-challenge-yellow);
}
#create-challenge .v2-challenge-cta__btn--outline{
background:transparent;
color:var(--text);
border:1px solid var(--border);
}
#create-challenge .v2-challenge-cta__btn--outline:hover{
border-color:var(--red);
color:var(--red);
}
html[data-theme="dark"] #create-challenge .v2-challenge-cta__btn--outline{
background:transparent;
color:var(--text);
border-color:rgba(255,255,255,.25);
}
html[data-theme="dark"] #create-challenge .v2-challenge-cta__btn--outline:hover{
border-color:var(--red);
color:var(--red);
}
@media(max-width:768px){
#create-challenge .v2-challenge-section__vs{
font-size:clamp(72px,22vw,140px);
right:-0.25rem;
}
#create-challenge .v2-challenge-section__bar{
width:3px;
}
}
@media(max-width:1024px){.mcards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){.mcards{grid-template-columns:1fr;}}
.sport-tile{background:var(--surface);padding:28px 12px;text-align:center;cursor:pointer;transition:background var(--transition),transform var(--transition);position:relative;overflow:hidden;}
.sport-tile:hover{background:var(--red-dim);transform:translateY(-2px);}
.sport-tile:hover .sport-emoji{transform:scale(1.2);}
.sport-emoji{font-size:32px;display:block;margin-bottom:8px;transition:transform .2s;}
.sport-name{font-family:var(--font-head);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.sport-count{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.player-card{background:var(--surface);border:1.5px solid var(--border);padding:24px;position:relative;overflow:hidden;transition:border-color var(--transition);}
.player-card:hover{border-color:var(--red);}
.pc-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.pc-av{width:52px;height:52px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0;}
.pc-name{font-family:var(--font-head);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px;}
.pc-role{font-family:var(--font-mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.pc-stats{display:flex;border:1px solid var(--border);background:var(--bg-alt);overflow:hidden;}
.pc-stat{flex:1;padding:10px;text-align:center;position:relative;}
.pc-stat+.pc-stat::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--border);}
.pc-stat-n{font-family:var(--font-mono);font-size:18px;font-weight:700;line-height:1;}
.pc-stat-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.pc-foot{margin-top:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.rev{background:var(--surface);padding:28px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;transition:background var(--transition);min-height:100%;}
.rev:hover{background:var(--surface2);}
.rev-stars{color:var(--yellow);font-size:15px;line-height:1;}
.rev-txt{font-size:14px;color:var(--text2);line-height:1.75;flex:1;margin:0;}
.rev-auth{
display:flex;
align-items:center;
gap:12px;
margin-top:auto;
padding-top:16px;
border-top:1px solid var(--border);
}
.rev-av{
width:38px;
height:38px;
clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:800;
flex-shrink:0;
}
.rev.ca-red .rev-av{background:var(--red);color:#fff;}
.rev.ca-yellow .rev-av{background:var(--yellow);color:#0a0e1a;}
.rev.ca-teal .rev-av{background:var(--teal);color:#0a0e1a;}
.rev-name{
font-family:var(--font-head);
font-size:13px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
color:var(--text);
line-height:1.25;
}
.rev-meta{
margin-top:4px;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
color:var(--text3);
text-transform:uppercase;
letter-spacing:.08em;
}
/* Сетка отзывов (как index (7).html): 1px «швы» через фон и gap */
.rev-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:var(--border);
}
@media(max-width:1024px){
.rev-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
.rev-grid{grid-template-columns:1fr;}
}
.sblk{background:var(--surface);padding:40px 28px;text-align:center;transition:background var(--transition);position:relative;overflow:hidden;}
.sblk:hover{background:var(--surface2);}
.sblk-n{font-family:var(--font-mono);font-size:48px;font-weight:700;line-height:1;margin-bottom:8px;letter-spacing:-.02em;}
.sblk-l{font-family:var(--font-mono);font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--v2-grid-gap-bg);}
#how .steps-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
.step{background:var(--surface);padding:36px 28px;position:relative;transition:background var(--transition);}
.step:hover{background:var(--surface2);}
.step-n{font-family:var(--font-mono);font-size:52px;font-weight:700;color:var(--border);line-height:1;margin-bottom:16px;transition:color var(--transition);}
.step:hover .step-n{color:var(--red);}
.step.is-active{background:var(--bg-alt);}
.step.is-active .step-n{color:var(--red);}
.step-icon{font-size:26px;margin-bottom:14px;}
.step-title{font-family:var(--font-head);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;}
.step-desc{font-size:13px;color:var(--text2);line-height:1.7;}
@media(max-width:1024px){.steps-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr;}}
@media(max-width:1024px){#how .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:768px){#how .steps-grid{grid-template-columns:1fr !important;}}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--v2-grid-gap-bg);}
#features .feat-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.feat{background:var(--surface);padding:32px 28px;position:relative;overflow:hidden;transition:background var(--transition);}
.feat::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--stripe) 7px,var(--stripe) 8px);}
.feat>*{position:relative;z-index:1;}
.feat:hover{background:var(--surface2);}
.feat-icon{width:48px;height:48px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:background var(--transition);}
.feat:hover .feat-icon{background:var(--red-dim);}
.feat-title{font-family:var(--font-head);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;}
.feat-desc{font-size:13px;color:var(--text2);line-height:1.7;}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.feat-grid{grid-template-columns:1fr;}}
@media(max-width:900px){#features .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:640px){#features .feat-grid{grid-template-columns:1fr !important;}}
#sports-catalog .v2-sports-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--v2-grid-gap-bg);}
#sports-catalog .v2-sport-tile{min-height:auto;clip-path:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 12px;text-align:center;background:var(--surface);border:none;box-shadow:none;}
#sports-catalog .v2-sport-tile::after{display:none;}
#sports-catalog .v2-sport-tile:hover{background:var(--red-dim);transform:translateY(-2px);}
#sports-catalog .v2-sport-tile .se{font-size:32px;display:block;margin-bottom:8px;transition:transform .2s;}
#sports-catalog .v2-sport-tile:hover .se{transform:scale(1.2);}
#sports-catalog .v2-sport-tile .sn{font-family:var(--font-head);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;line-height:1;}
#sports-catalog .v2-sport-tile .sc{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
@media(max-width:1100px){#sports-catalog .v2-sports-grid{grid-template-columns:repeat(4,1fr);}}
/* ── 11. NAV ────────────────────────────────────────── */
/* Выше .v2-home-float-card (z-index:110), иначе бейдж перекрывает клики по шапке */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background .3s;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px;}
.logo-txt{font-family:var(--font-head);font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.logo-txt .ac{color:var(--red);}
.nav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-lnk{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text3);padding:6px 12px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--transition),border-color var(--transition);}
.nav-lnk:hover,.nav-lnk.on{color:var(--red);border-bottom-color:var(--red);}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.theme-btn{width:36px;height:36px;background:var(--surface);border:1.5px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);}
.theme-btn:hover{border-color:var(--red);}
.nav-notif-btn{position:relative;width:36px;height:36px;background:var(--surface);border:1.5px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);}
.nav-notif-btn:hover{border-color:var(--red);}
.nav-notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--red);border-radius:50%;border:1.5px solid var(--surface);}
/* Гамбургер: всегда виден в шапке V2 (и десктоп, и мобилка); на мобилке скрываем дубли в .nav-links */
.ham{display:flex;width:36px;height:36px;background:var(--surface);border:1.5px solid var(--border);flex-direction:column;align-items:center;justify-content:center;gap:5px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);}
.ham span{display:block;width:16px;height:1.5px;background:var(--text2);}
@media(max-width:768px){
.nav-links,.nav-actions .btn{display:none;}
.nav-v2-login-desktop{display:none;}
}
/* V2 mobile nav drawer (гамбургер; z-index ниже city modal 500 и notif 450/460) */
.v2-nav-drawer-overlay{
position:fixed;
inset:0;
z-index:200;
background:var(--overlay);
backdrop-filter:blur(4px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease,visibility .25s;
}
.v2-nav-drawer-overlay.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.v2-nav-drawer{
position:fixed;
top:0;
right:0;
bottom:0;
z-index:210;
display:flex;
flex-direction:column;
width:min(100%,20rem);
min-height:100dvh;
background:var(--surface);
border-left:1.5px solid var(--border);
box-shadow:-8px 0 24px rgba(0,0,0,.12);
transform:translateX(100%);
pointer-events:none;
transition:transform .3s ease;
}
html.dark .v2-nav-drawer{
box-shadow:-8px 0 32px rgba(0,0,0,.45);
}
.v2-nav-drawer.is-open{
transform:none;
pointer-events:auto;
}
.v2-nav-drawer-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
padding:16px 18px;
border-bottom:1px solid var(--border);
}
.v2-nav-drawer-title{
font-family:var(--font-head);
font-size:14px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.v2-nav-drawer-body{
flex:1;
overflow-y:auto;
padding:16px 18px 24px;
display:flex;
flex-direction:column;
gap:20px;
}
.v2-nav-drawer-links{
display:flex;
flex-direction:column;
gap:2px;
}
.v2-nav-drawer-lnk{
display:block;
width:100%;
box-sizing:border-box;
border-bottom-width:0 !important;
padding:12px 0 !important;
}
.v2-nav-drawer-lnk.on{
border-bottom-color:transparent !important;
}
.v2-nav-drawer-actions{
display:flex;
flex-direction:column;
gap:10px;
padding-top:8px;
border-top:1px solid var(--border);
}
/* Боковое меню по гамбургеру доступно и на десктопе (раньше скрывали min-width:769px). */
/* ── 12. PROGRESS ───────────────────────────────────── */
.prog-wrap{margin-bottom:16px;}
.prog-header{display:flex;justify-content:space-between;margin-bottom:7px;}
.prog-lbl{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);}
.prog-val{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text3);}
.prog-bar{height:8px;background:var(--surface2);overflow:hidden;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);}
.prog-bar.thick{height:14px;}.prog-bar.thin{height:4px;}
.prog-fill{height:100%;transition:width .6s ease;}
.prog-fill.r{background:var(--red);}.prog-fill.y{background:var(--yellow);}.prog-fill.t{background:var(--teal);}.prog-fill.b{background:var(--info);}
/* ── 13. TOAST & ALERT ──────────────────────────────── */
.toast{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border:1.5px solid var(--border);border-left:4px solid var(--border);background:var(--surface);margin-bottom:8px;}
.toast-ico{font-size:17px;flex-shrink:0;line-height:1.4;}
.toast-body{flex:1;}
.toast-title{font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px;}
.toast-msg{font-size:12px;color:var(--text2);line-height:1.5;}
.toast-close{font-size:18px;color:var(--text3);cursor:pointer;line-height:1;flex-shrink:0;transition:color var(--transition);}
.toast-close:hover{color:var(--text);}
.toast.t-success{border-left-color:var(--teal);}.toast.t-error{border-left-color:var(--red);}.toast.t-warn{border-left-color:var(--yellow);}.toast.t-info{border-left-color:var(--info);}
.alert{padding:18px 20px;border:1.5px solid var(--border);border-left:4px solid var(--border);background:var(--surface);display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;}
.alert-ico{font-size:18px;flex-shrink:0;}
.alert-body{flex:1;}
.alert-title{font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px;}
.alert-txt{font-size:13px;color:var(--text2);line-height:1.6;}
.alert.a-success{border-left-color:var(--teal);background:var(--teal-dim);}
.alert.a-error{border-left-color:var(--red);background:var(--red-dim);}
.alert.a-warn{border-left-color:var(--yellow);background:var(--yellow-dim);}
.alert.a-info{border-left-color:var(--info);background:var(--info-dim);}
/* V2: плашки страницы (под навбаром, в потоке; dismiss через localStorage — см. page_banners_dismiss.js) */
.v2-plate-stack{
display:flex;
flex-direction:column;
gap:10px;
max-width:var(--container);
margin:0 auto 1rem;
padding-left:max(var(--v2-gutter-x-mobile),env(safe-area-inset-left));
padding-right:max(var(--v2-gutter-x-mobile),env(safe-area-inset-right));
box-sizing:border-box;
width:100%;
}
@media(min-width:640px){
.v2-plate-stack{
padding-left:var(--v2-gutter-x);
padding-right:var(--v2-gutter-x);
}
}
.v2-plate{
position:relative;
display:flex;
align-items:flex-start;
gap:14px;
padding:16px 42px 16px 18px;
border:1.5px solid var(--border);
border-left-width:4px;
background:var(--surface);
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
[data-theme="dark"] .v2-plate{filter:drop-shadow(0 4px 22px rgba(0,0,0,.5));}
[data-theme="light"] .v2-plate{filter:drop-shadow(0 4px 20px rgba(10,14,26,.12));}
.v2-plate--warn{background:var(--yellow-dim);border-left-color:var(--yellow);}
.v2-plate--info{background:var(--info-dim);border-left-color:var(--info);}
.v2-plate--success{background:var(--teal-dim);border-left-color:var(--teal);}
.v2-plate--error{background:var(--red-dim);border-left-color:var(--red);}
.v2-plate-ico{
width:40px;
height:40px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-head);
font-size:18px;
font-weight:900;
line-height:1;
background:var(--surface2);
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.v2-plate--warn .v2-plate-ico{color:var(--yellow);}
.v2-plate--info .v2-plate-ico{color:var(--info);}
.v2-plate--success .v2-plate-ico{color:var(--teal);}
.v2-plate--error .v2-plate-ico{color:var(--red);}
.v2-plate-body{flex:1;min-width:0;}
.v2-plate-title{
font-family:var(--font-head);
font-size:13px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.02em;
margin-bottom:4px;
color:var(--text);
}
.v2-plate-text{font-size:13px;color:var(--text2);line-height:1.6;}
.v2-plate-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-top:6px;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--text3);
}
.v2-plate-live-dot{
display:inline-block;
width:7px;
height:7px;
background:var(--teal);
clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);
flex-shrink:0;
}
.v2-plate-draft-dot{
display:inline-block;
width:7px;
height:7px;
background:var(--text3);
clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);
flex-shrink:0;
}
.v2-plate-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;}
.v2-plate-actions form{display:inline-flex;margin:0;}
.v2-plate-dismiss{
position:absolute;
top:8px;
right:8px;
width:32px;
height:32px;
padding:0;
border:none;
background:transparent;
color:var(--text3);
font-size:22px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:color var(--transition);
font-family:var(--font-body);
}
.v2-plate-dismiss:hover{color:var(--text);}
/* ── 14. TABS / FILTERS / FAQ ───────────────────────── */
.tabs-bar{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px;overflow-x:auto;scrollbar-width:none;}
.tabs-bar::-webkit-scrollbar{display:none;}
.tab-btn{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:11px 20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);cursor:pointer;margin-bottom:-2px;white-space:nowrap;transition:all var(--transition);}
.tab-btn:hover{color:var(--text2);}.tab-btn.on{color:var(--red);border-bottom-color:var(--red);}
.tab-pane{display:none;}.tab-pane.on{display:block;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;}
.fbtn{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:7px 16px;background:var(--surface);border:1.5px solid var(--border);color:var(--text2);cursor:pointer;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);}
.fbtn:hover,.fbtn.on{background:var(--red);color:#fff;border-color:var(--red);}
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--v2-grid-gap-bg);}
.faq-item{background:var(--surface);overflow:hidden;}
.faq-item:hover{background:var(--surface2);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 28px;font-size:15px;font-weight:700;background:none;border:none;cursor:pointer;text-align:left;gap:16px;transition:color var(--transition);}
.faq-q:hover{color:var(--red);}
.faq-ico{width:26px;height:26px;background:var(--surface2);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:14px;flex-shrink:0;transition:all var(--transition);}
.faq-item.open .faq-ico{background:var(--red);color:#fff;transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-item.open .faq-a{max-height:300px;}
.faq-ai{padding:0 28px 22px;font-size:14px;color:var(--text2);line-height:1.75;border-left:3px solid var(--red);margin:0 28px 22px;}
/* FAQ главная V2: заголовок — .s-head.center + .t-kicker (как отзывы); узкий список */
.v2-faq-section .faq-list{
max-width:760px;
margin-left:0;
margin-right:auto;
}
.v2-faq-section .faq-q{
font-family:var(--font-body);
font-weight:500;
color:var(--text);
}
.v2-faq-section .faq-q:hover{
color:var(--red);
}
.v2-faq-section .faq-item.open .faq-a{
max-height:800px;
}
/* ── 15. PAGINATION / BREADCRUMBS / TOOLTIP / DIVIDER ─ */
.pag{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.pag-btn{width:36px;height:36px;background:var(--surface);border:1.5px solid var(--border);color:var(--text2);font-family:var(--font-mono);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);transition:all var(--transition);}
.pag-btn:hover{border-color:var(--red);color:var(--red);}.pag-btn.on{background:var(--red);color:#fff;border-color:var(--red);}
.pag-btn:disabled{opacity:.3;cursor:not-allowed;}
.pag-dots{font-family:var(--font-mono);font-size:12px;color:var(--text3);padding:0 4px;}
.bread{display:flex;align-items:center;flex-wrap:wrap;}
.bread-item{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);transition:color var(--transition);}
.bread-item:hover{color:var(--red);}.bread-item.cur{color:var(--text);}
.bread-sep{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin:0 8px;opacity:.5;}
.tip-wrap{position:relative;display:inline-flex;}
.tip-wrap .tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface3);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:10px;padding:6px 12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:200;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);}
.tip-wrap:hover .tooltip{opacity:1;}
.divider{height:1px;background:var(--border);margin:24px 0;}
.divider-text{display:flex;align-items:center;gap:12px;margin:24px 0;}
.divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:var(--border);}
.divider-label{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);white-space:nowrap;}
/* ── 16. SKELETON ───────────────────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{background:var(--surface2);background-image:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);}
.skel-text{height:14px;margin-bottom:8px;}.skel-title{height:22px;margin-bottom:10px;}.skel-btn{height:42px;width:120px;}
.skel-avatar{width:40px;height:40px;border-radius:50%;clip-path:none;flex-shrink:0;}.skel-img{height:120px;}
/* ── 17. EMPTY STATE ────────────────────────────────── */
.empty{text-align:center;padding:64px 24px;background:var(--surface);border:1.5px dashed var(--border);}
.empty-ico{font-size:48px;margin-bottom:16px;opacity:.5;}
.empty-title{font-family:var(--font-head);font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;}
.empty-sub{font-size:14px;color:var(--text3);line-height:1.6;margin-bottom:24px;}
/* ── 18. MODAL (обычная) ────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-overlay.open .modal{animation:modalIn .25s ease;}
/* Потомки не должны перехватывать клики, пока оверлей «закрыт» (у родителя pointer-events: none, но у .modal по умолчанию — auto). */
.modal-overlay:not(.open) .modal{pointer-events:none;}
@keyframes modalIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal{background:var(--surface);border:1.5px solid var(--border);border-left:4px solid var(--red);max-width:520px;width:100%;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
.modal-title{font-family:var(--font-head);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;}
.modal-close{width:32px;height:32px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);transition:all var(--transition);}
.modal-close:hover{background:var(--red);color:#fff;border-color:var(--red);}
.modal-body{padding:24px;}
.modal-foot{padding:16px 24px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}
/* ── 19. MODAL FULLSCREEN ───────────────────────────── */
.modal-fs-overlay{position:fixed;inset:0;background:var(--bg);z-index:600;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(24px);transition:opacity .25s ease,transform .25s ease;}
.modal-fs-overlay.open{opacity:1;pointer-events:all;transform:none;}
.modal-fs-bar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:60px;border-bottom:1px solid var(--border);background:var(--nav-bg);backdrop-filter:blur(20px);flex-shrink:0;}
.modal-fs-title{font-family:var(--font-head);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.modal-fs-actions{display:flex;align-items:center;gap:8px;}
.modal-fs-body{flex:1;overflow-y:auto;}
/* ── 20. CHAT ───────────────────────────────────────── */
.chat-layout{display:grid;grid-template-columns:320px 1fr;background:var(--border);gap:1px;}
@media(max-width:768px){
.chat-layout{grid-template-columns:1fr;}
.chat-main-col{display:none;}
.chat-layout.chat-open .chat-list-col{display:none;}
.chat-layout.chat-open .chat-main-col{display:flex;}
}
.chat-list-col{background:var(--surface);display:flex;flex-direction:column;overflow:hidden;}
.chat-list-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;}
.chat-list-title{font-family:var(--font-head);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.chat-search{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
body:not(.v2-page) .chat-search .inp{clip-path:none;}
.chat-list{overflow-y:auto;flex:1;}
.chat-item{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background var(--transition);}
.chat-item:hover{background:var(--surface2);}
.chat-item.active{background:var(--red-dim);border-right:3px solid var(--red);}
.chat-item-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;position:relative;}
.chat-item-online::after{content:'';position:absolute;width:10px;height:10px;background:var(--teal);border-radius:50%;border:2px solid var(--surface);bottom:1px;right:1px;}
.chat-item-info{flex:1;min-width:0;}
.chat-item-name{font-size:14px;font-weight:700;margin-bottom:3px;}
.chat-item-preview{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.chat-item-time{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.chat-item-unread{background:var(--red);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.chat-main-col{background:var(--bg);display:flex;flex-direction:column;overflow:hidden;}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.chat-head-back{display:none;}
@media(max-width:768px){.chat-head-back{display:flex;}}
.chat-head-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;}
.chat-head-info{flex:1;}
.chat-head-name{font-family:var(--font-head);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
.chat-head-status{font-family:var(--font-mono);font-size:10px;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;}
.chat-head-status.offline{color:var(--text3);}
.chat-actions{display:flex;gap:6px;}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;}
.chat-day-sep{display:flex;align-items:center;gap:12px;margin:8px 0;}
.chat-day-sep::before,.chat-day-sep::after{content:'';flex:1;height:1px;background:var(--border);}
.chat-day-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.msg{display:flex;align-items:flex-end;gap:8px;max-width:72%;}
.msg.me{align-self:flex-end;flex-direction:row-reverse;}
.msg.other{align-self:flex-start;}
.msg-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
.msg-bubble{padding:10px 14px;font-size:14px;line-height:1.55;color:var(--text);}
.msg.me .msg-bubble{background:var(--chat-me);clip-path:polygon(10px 0,100% 0,100% 100%,0 100%);border:1px solid var(--border);}
.msg.other .msg-bubble{background:var(--chat-other);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);border:1px solid var(--border);border-left:3px solid var(--red);}
.msg-meta{font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:4px;display:flex;align-items:center;justify-content:flex-end;gap:4px;}
.msg-read{color:var(--teal);font-size:11px;}
.msg-system{align-self:center;font-family:var(--font-mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:6px 14px;background:var(--surface);border:1px solid var(--border);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);}
.msg-card{background:var(--surface);border:1.5px solid var(--border);border-left:3px solid var(--red);padding:14px 16px;max-width:280px;}
.msg-card-sport{font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.msg-card-row{font-size:12px;color:var(--text2);margin-bottom:4px;}
.msg-card-foot{margin-top:12px;}
.chat-input-bar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.chat-inp{flex:1;padding:11px 16px;color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color var(--transition),box-shadow var(--transition);border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;appearance:none;}
body:not(.v2-page) .chat-inp{background:var(--bg);border:1.5px solid var(--border);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
body:not(.v2-page) .chat-inp:focus{border-color:var(--red);}
body.v2-page .chat-input-bar .chat-inp{
background:var(--v2-field-bg);
border:1px solid var(--v2-field-border);
box-shadow:var(--v2-field-inset);
clip-path:polygon(var(--v2-field-cut) 0,100% 0,calc(100% - var(--v2-field-cut)) 100%,0 100%);
border-radius:0;
-webkit-border-radius:0;
-webkit-appearance:none;
appearance:none;
}
body.v2-page .chat-input-bar .chat-inp:focus{
border-color:var(--teal);
box-shadow:var(--v2-field-inset),var(--v2-field-focus-glow);
outline:none;
}
/* ── 21. FOOTER ─────────────────────────────────────── */
footer{background:var(--surface);border-top:1.5px solid var(--border);padding:60px 0 28px;}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.ft-desc{font-size:14px;color:var(--text2);line-height:1.7;margin:14px 0 22px;max-width:270px;}
.ft-soc{display:flex;gap:8px;}
.ft-sb{width:34px;height:34px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text3);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);transition:all var(--transition);}
.ft-sb:hover{background:var(--red);color:#fff;border-color:var(--red);}
.ft-col-h{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text);margin-bottom:16px;}
.ft-links{display:flex;flex-direction:column;gap:9px;}
.ft-links a{font-size:13px;color:var(--text2);transition:color var(--transition);}
.ft-links a:hover{color:var(--red);}
.ft-bot{padding-top:28px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ft-copy{font-family:var(--font-mono);font-size:11px;color:var(--text3);}
.ft-leg{display:flex;gap:20px;}
.ft-leg a{font-family:var(--font-mono);font-size:11px;color:var(--text3);transition:color var(--transition);}
.ft-leg a:hover{color:var(--text2);}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr;}.ft-grid>:first-child{grid-column:1/-1;}}
@media(max-width:600px){.ft-grid{grid-template-columns:1fr;}}
/* ── DS SHELL ───────────────────────────────────────── */
/* Hybrid fallback: shell/layout-классы сохранены как слой совместимости на время миграции. */
.ds-nav{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:56px;}
.ds-nav-inner{display:flex;align-items:center;height:56px;padding:0 20px;gap:12px;justify-content:space-between;}
.ds-logo{font-family:var(--font-head);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ds-badge{background:var(--red);color:#fff;font-size:9px;font-weight:900;padding:3px 8px;letter-spacing:.06em;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);}
.ds-tabs{display:flex;overflow-x:auto;scrollbar-width:none;flex:1;}
.ds-tabs::-webkit-scrollbar{display:none;}
.ds-tab{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text3);padding:8px 14px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;transition:color var(--transition),border-color var(--transition);}
.ds-tab:hover,.ds-tab.on{color:var(--red);border-bottom-color:var(--red);}
.ds-page{display:none;padding-top:56px;min-height:100vh;}
.ds-page.on{display:block;}
.ds-section{padding:40px 0 24px;}
.ds-block{background:var(--surface);border:1.5px solid var(--border);margin-bottom:2px;overflow:hidden;}
.ds-bhead{background:var(--bg-alt);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.ds-btitle{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);display:flex;align-items:center;gap:8px;}
.ds-btitle::before{content:'';width:10px;height:2px;background:var(--red);}
.ds-bhint{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.ds-bbody{padding:24px;}
.ds-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.ds-col{display:flex;flex-direction:column;gap:10px;}
.ds-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:8px;display:block;}
.ds-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;align-items:start;}
@media(max-width:900px){.ds-2col{grid-template-columns:1fr;}}
/* Fullscreen modal responsive grids */
.fs-grid-match{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;}
.fs-grid-profile{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;}
@media(max-width:768px){
.fs-grid-match{grid-template-columns:1fr;gap:20px;}
.fs-grid-profile{grid-template-columns:1fr;gap:20px;}
}
.swatches{display:flex;flex-wrap:wrap;gap:14px;}
.swatch{text-align:center;}
.sw-box{width:52px;height:52px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);margin-bottom:6px;}
.sw-name{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text2);}
.sw-val{font-family:var(--font-mono);font-size:9px;color:var(--text3);}
/* DS buttons: фиксируем отсутствие скруглений, чтобы nav-правки не давали глобальный регресс */
.btn,
.btn-red,
.btn-yellow,
.btn-teal,
.btn-ghost,
.btn-icon,
.theme-btn,
.ham,
.ds-tab,
.pag-btn,
.fbtn,
.modal-close,
.bn-center-btn{
border-radius:0;
-webkit-appearance:none;
appearance:none;
}
/* NAV brand */
.nav-brand{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.nav-brand-mobile{gap:8px;}
/*
Навбар: .nav-brand-mark = красный параллелограмм (CSS), внутри #logo-runner-icon — см. templates/design-system.html (Nav)
Футер: рядом с текстом только #logo-full без .nav-brand-mark
*/
.nav-brand-mark{
position:relative;
width:28px;
height:28px;
flex:0 0 28px;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:0;
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
background:transparent;
isolation:isolate;
}
.nav-brand-mark::before{
content:'';
position:absolute;
inset:0;
background-color:var(--red);
box-shadow:0 0 0 1px var(--red-glow);
z-index:0;
}
.nav-brand-mark svg.nav-brand-runner{
position:relative;
z-index:1;
display:block;
width:18px;
height:18px;
}
.v2-shell-foot .nav-brand > svg.v2-foot-logo{
display:block;
flex-shrink:0;
}
.nav-brand-wordmark{
flex-shrink:0;
}
/* V2 page layout */
.v2-main{padding-top:60px;padding-bottom:24px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
@media(max-width:768px){.v2-main{padding-top:60px;padding-bottom:84px;}}
.v2-shell-foot-row{
max-width:var(--container);
margin:0 auto;
padding-left:24px;
padding-right:24px;
}
@media(max-width:768px){
.v2-shell-foot-row{
padding-left:max(var(--v2-gutter-x-mobile), env(safe-area-inset-left));
padding-right:max(var(--v2-gutter-x-mobile), env(safe-area-inset-right));
}
}
/* V2 home adjustments (source of truth: design-system.css) */
.v2-home-visual{display:block;}
.v2-home-panel{display:block;}
/* Home: full-bleed background + centered content like reference */
.v2-shell-home{
border:none;
background:transparent;
}
.v2-shell-home .v2-shell-content{
padding:0 !important;
background:var(--hero-bg);
}
.v2-shell-home .v2-shell-content::before{
display:none !important;
}
.v2-shell-home .v2-shell-content::after{
content:"VS";
position:absolute;
right:0;
bottom:-20px;
font-family:var(--font-head);
font-size:clamp(180px,28vw,340px);
font-weight:900;
text-transform:uppercase;
line-height:1;
letter-spacing:-.04em;
color:var(--hero-vs);
user-select:none;
pointer-events:none;
}
.v2-shell-home .v2-home-hero{
margin:0;
border-left:4px solid var(--red);
/* Иначе .v2-home-float-card (top: -1.1rem) обрезается по верху секции */
overflow:visible;
box-sizing:border-box;
}
.v2-shell-home .v2-home-hero::before{
display:none !important;
}
.v2-shell-home .v2-home-hero-grid{
max-width:var(--container);
margin:0 auto;
padding-left:var(--v2-gutter-x);
padding-right:var(--v2-gutter-x);
min-width:0;
box-sizing:border-box;
}
.v2-home-steps .s-head{
margin-bottom:56px;
}
.v2-shell-home .v2-shell-foot{
padding-left:0;
padding-right:0;
}
@media(max-width:768px){
.v2-shell-home .v2-home-hero{
border-left-width:3px;
}
.v2-shell-home .v2-home-hero-grid{
padding-left:max(var(--v2-gutter-x-mobile), env(safe-area-inset-left));
padding-right:max(var(--v2-gutter-x-mobile), env(safe-area-inset-right));
}
.v2-home-steps .s-head{
margin-bottom:32px;
}
}
/* ═══ V2 (без tailwind.css): токены DS + паттерны из templates/design-system.html ═══ */
.v2-page{
min-height:100vh;
font-family:var(--font-body);
background:var(--bg);
color:var(--text);
width:100%;
max-width:100%;
}
.v2-shell{
position:relative;
border:1px solid var(--border);
background:var(--surface);
width:100%;
max-width:100%;
min-width:0;
box-sizing:border-box;
}
.v2-shell-content{
position:relative;
overflow:hidden;
padding-top:.75rem;
padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0));
padding-left:max(var(--v2-gutter-x-mobile), env(safe-area-inset-left));
padding-right:max(var(--v2-gutter-x-mobile), env(safe-area-inset-right));
background:var(--hero-bg);
}
/* Главная: не обрезать .t-kicker с margin-left:-30px (полоска уходит в padding .wrap) */
.v2-shell-home .v2-shell-content{
overflow:visible;
}
/* Детальная страница игры: контент идёт от края до края (без боковых и верхнего отступов оболочки) */
.v2-shell-content:has(.v2-game-detail-card){
padding-left:0;
padding-right:0;
padding-top:0;
overflow:visible;
}
@media(min-width:640px){
.v2-shell-content{
padding-top:1rem;
padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0));
padding-left:var(--v2-gutter-x);
padding-right:var(--v2-gutter-x);
}
}
/* Внутренние страницы: мягкий акцент справа (как на главной по настроению), на всю ширину вьюпорта */
.v2-shell:not(.v2-shell-home) .v2-shell-content::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
background:
radial-gradient(ellipse 65% 55% at 100% 32%, color-mix(in srgb, var(--info) 16%, transparent) 0%, transparent 58%),
radial-gradient(ellipse 45% 40% at 92% 88%, color-mix(in srgb, var(--red) 10%, transparent), transparent 55%);
opacity:.9;
}
/* Не трогаем .modal-overlay / .modal-fs-overlay: им нужен position:fixed отдельных правил,
иначе перебиваем stacking-правилом ниже и модалка уезжает в конец потока .v2-shell-content */
.v2-shell-content > *:not(.modal-overlay):not(.modal-fs-overlay){position:relative;z-index:1;}
/* Главная: hero не должен создавать «потолок» z-index:1 — иначе .v2-home-float-card не перекроет .nav (100) */
.v2-shell-home .v2-shell-content > .v2-home-hero:first-child{z-index:auto;}
.v2-shell-foot{
border-top:1px solid var(--border);
background:var(--surface);
padding:60px 0 28px;
}
.v2-shell-foot .logo{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
text-decoration:none;
color:inherit;
}
.v2-btn,.v2-btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.75rem 1.25rem;
font-family:var(--font-head);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
text-decoration:none;
border:none;
cursor:pointer;
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:opacity .15s ease,filter .15s ease;
}
.v2-btn-primary{background:var(--red);color:#fff;}
.v2-btn-primary:hover{opacity:.92;}
.v2-btn-primary.v2-btn-primary--icon{gap:.45rem;}
.v2-btn-primary .v2-ico-flash{
font-size:1.15em;
line-height:1;
position:relative;
top:.03em;
}
.v2-sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
.v2-btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.75rem 1.25rem;
font-family:var(--font-head);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
text-decoration:none;
border:2px solid var(--border);
background:var(--surface2);
color:var(--text);
cursor:pointer;
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:opacity .15s ease,border-color .15s ease,background .15s ease;
}
.v2-btn-secondary:hover{
border-color:var(--red);
background:var(--surface3);
}
.v2-btn-ghost{
border:none;
background:transparent;
color:var(--text);
position:relative;
padding-left:0;
padding-right:0;
clip-path:none;
}
.v2-btn-ghost::after{
content:"";
position:absolute;
left:0;right:0;bottom:-2px;height:1px;background:var(--border);
}
.v2-badge-accent{
display:inline-block;
padding:.25rem .75rem;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
background:var(--red);
color:#fff;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.v2-home-hero{
position:relative;
overflow:hidden;
border-left:4px solid var(--red);
padding:1.25rem 1.25rem 1.5rem;
color:var(--text);
background:linear-gradient(140deg,var(--bg) 0%,var(--bg-alt) 56%,var(--surface2) 100%);
margin-bottom:1.5rem;
}
@media(min-width:1024px){
.v2-home-hero{margin-bottom:2rem;padding:1.25rem 1.8rem 1.8rem;}
}
.v2-home-hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background-image:repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--stripe) 7px,var(--stripe) 8px);
opacity:.8;
}
.v2-home-hero::after{
content:"ЗАБЕЙСЯ";
position:absolute;
top:-0.45rem;
left:50%;
transform:translateX(-6%);
font-family:var(--font-head);
font-weight:900;
font-size:clamp(98px,17vw,260px);
letter-spacing:-.04em;
line-height:.85;
color:transparent;
-webkit-text-stroke:1px var(--stroke);
pointer-events:none;
user-select:none;
}
.v2-home-hero-grid{
position:relative;
z-index:1;
display:grid;
gap:1.75rem;
align-items:start;
min-width:0;
}
@media(min-width:1024px){
.v2-home-hero-grid{
grid-template-columns:minmax(0,1fr) 29.5rem;
gap:1.8rem;
align-items:center;
}
}
@media(max-width:1024px){
.v2-home-hero::after{
left:52%;
top:-0.3rem;
font-size:clamp(84px,20vw,180px);
}
}
/* Узкие экраны: водяной знак не должен раздувать горизонтальный layout */
@media(max-width:768px){
.v2-home-hero::after{
left:50%;
transform:translateX(-50%);
width:100%;
max-width:100%;
text-align:center;
white-space:nowrap;
overflow:hidden;
font-size:clamp(56px,18vw,130px);
top:-0.1rem;
}
/* Декор «VS»: на мобилке убираем — большой outline-текст часто даёт лишний горизонтальный overflow в WebKit */
.v2-shell-home .v2-shell-content::after{
display:none;
}
.v2-home-hero-copy,.v2-home-visual{
min-width:0;
}
}
.v2-home-hero-copy .t-kicker{
--t-kicker-mb:1rem;
}
.v2-home-title{
font-family:var(--font-head);
font-size:clamp(3rem,7.3vw,6.2rem);
font-weight:900;
text-transform:uppercase;
line-height:.88;
letter-spacing:-.04em;
color:var(--text);
}
.v2-home-title span{color:var(--yellow);}
.v2-home-lead{
margin-top:1.2rem;
max-width:36rem;
font-size:15px;
line-height:1.7;
color:var(--text2);
}
.v2-home-actions{
margin-top:1.9rem;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.75rem 1.2rem;
}
.v2-home-actions .v2-btn,.v2-home-actions .v2-btn-primary{min-height:3rem;padding-inline:2rem;}
.v2-home-stats{
margin-top:2.1rem;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border:1px solid var(--border);
background:color-mix(in srgb,var(--surface2) 40%,transparent);
}
.v2-home-stat{
border-right:1px solid var(--border);
padding:1rem 1.1rem .95rem;
background:transparent;
}
.v2-home-stat:last-child{border-right:none;}
.v2-home-stat-number{
font-family:var(--font-mono);
font-size:2.1rem;
font-weight:700;
line-height:1;
letter-spacing:-.02em;
color:var(--text);
}
.v2-home-stat-number .is-accent{color:var(--red);}
.v2-home-stat-number .is-yellow{color:var(--yellow);}
.v2-home-stat-number .is-teal{color:var(--teal);}
.v2-home-stat-label{
margin-top:.55rem;
font-family:var(--font-mono);
font-size:10px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--text3);
}
@media(max-width:1024px){
.v2-home-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
.v2-home-stat:nth-child(2n){border-right:none;}
.v2-home-stat:nth-child(n+3){border-top:1px solid var(--border);}
}
@media(max-width:768px){
.v2-home-actions .v2-btn,.v2-home-actions .v2-btn-primary,.v2-home-actions .v2-btn-ghost{width:100%;justify-content:center;}
.v2-home-actions .v2-btn-ghost{
padding-left:1rem;padding-right:1rem;
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
border:1px solid var(--border);
}
.v2-home-actions .v2-btn-ghost::after{display:none;}
.v2-home-stats{grid-template-columns:1fr;}
.v2-home-stat{border-right:none;border-top:1px solid var(--border);}
.v2-home-stat:first-child{border-top:none;}
}
.v2-home-visual{position:relative;}
.v2-home-panel{
position:relative;
overflow:visible;
border:1px solid var(--border);
border-left:4px solid var(--red);
background:var(--surface);
box-shadow:var(--shadow);
}
@media(max-width:768px){.v2-home-panel{overflow:hidden;}}
.v2-home-panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:.75rem;
border-bottom:1px solid var(--border);
background:var(--bg-alt);
padding:.9rem 1rem;
}
.v2-home-panel-eyebrow{
font-family:var(--font-head);
font-size:.875rem;
text-transform:uppercase;
color:var(--text);
}
.v2-home-map{
position:relative;
margin:.95rem;
height:11.2rem;
overflow:hidden;
border:1px solid var(--border);
background:var(--bg-alt);
}
.v2-home-map-grid{
position:absolute;
inset:0;
pointer-events:none;
background-image:linear-gradient(var(--stroke) 1px,transparent 1px),linear-gradient(90deg,var(--stroke) 1px,transparent 1px);
background-size:34px 34px;
opacity:.6;
}
.v2-home-pin{
position:absolute;
width:11px;height:11px;
border-radius:9999px;
border:2px solid var(--surface);
}
.v2-home-pin::after{
content:"";
position:absolute;
inset:-4px;
border:1px solid currentColor;
border-radius:9999px;
opacity:.45;
animation:v2-home-pin-ring 2.2s ease infinite;
}
.v2-home-pin.is-accent{background:var(--red);color:var(--red);}
.v2-home-pin.is-yellow{background:var(--yellow);color:var(--yellow);}
.v2-home-pin.is-teal{background:var(--teal);color:var(--teal);}
.v2-home-match-list > * + *{margin-top:.5rem;}
.v2-home-match-list{padding-bottom:.75rem;}
.v2-home-match-row{
margin:0 .95rem;
display:flex;
align-items:center;
gap:.7rem;
overflow:hidden;
border:1px solid var(--border);
border-left:3px solid var(--teal);
background:var(--bg-alt);
padding:.74rem .82rem;
text-decoration:none;
color:inherit;
transition:border-color .18s ease,background .18s ease;
}
.v2-home-match-row:hover{border-color:var(--red);background:var(--surface2);}
.v2-home-match-row.is-hot{border-left-color:var(--red);}
.v2-home-match-body{min-width:0;flex:1 1 auto;}
.v2-home-match-sport{
display:inline-flex;
width:32px;height:32px;
flex-shrink:0;
align-items:center;
justify-content:center;
background:var(--surface);
color:var(--text);
font-family:var(--font-head);
font-size:13px;
font-weight:900;
text-transform:uppercase;
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.v2-home-match-title{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px;
font-weight:800;
color:var(--text);
}
.v2-home-match-meta{
margin-top:2px;
font-family:var(--font-mono);
font-size:10px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--text2);
}
.v2-home-match-progress{
min-width:74px;
text-align:right;
font-family:var(--font-mono);
font-size:10px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--text2);
}
.v2-home-match-bar{margin-bottom:.3rem;height:5px;overflow:hidden;background:var(--border);}
.v2-home-match-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--yellow));}
.v2-home-float-card,.v2-home-score-badge{display:flex;}
.v2-home-float-card{
position:absolute;
top:-1.1rem;
right:-1.1rem;
z-index:2;
align-items:center;
gap:.65rem;
border:1px solid var(--border);
border-left:3px solid var(--yellow);
background:var(--surface);
padding:.65rem .9rem;
box-shadow:var(--shadow);
animation:v2-home-float 3.5s ease-in-out infinite;
}
.v2-home-float-card .v2-ico-xl{font-size:1.25rem;line-height:1;}
.v2-home-float-title{
font-family:var(--font-head);
font-size:13px;
font-weight:900;
text-transform:uppercase;
color:var(--text);
line-height:1.1;
}
.v2-home-float-meta{
margin-top:.2rem;
font-family:var(--font-mono);
font-size:10px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--text3);
}
.v2-home-score-badge{
position:absolute;
left:-1.2rem;
bottom:-1.05rem;
z-index:2;
align-items:center;
gap:.85rem;
background:var(--yellow);
color:var(--bg);
padding:.7rem .9rem;
box-shadow:var(--shadow);
animation:v2-home-float 3.5s ease-in-out infinite;
animation-delay:-1.8s;
}
.v2-home-score-caption{
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
opacity:.65;
}
.v2-home-score-value{
font-family:var(--font-mono);
font-size:2.1rem;
font-weight:700;
line-height:1;
letter-spacing:-.06em;
}
.v2-home-score-text{max-width:2rem;font-family:var(--font-head);font-size:1.65rem;line-height:1;}
@media(max-width:1023px){
.v2-home-visual{margin-bottom:1.35rem;}
.v2-home-float-card{
top:-0.4rem;
right:0;
max-width:calc(100% - 0.25rem);
padding:.55rem .72rem;
gap:.5rem;
}
/* Главная: тот же бейдж, что на десктопе — выше и поверх шапки/строки статистики */
.v2-shell-home .v2-home-float-card{
top:-2rem;
z-index:110;
}
.v2-home-float-title{font-size:12px;}
.v2-home-score-badge{
left:0;
bottom:-0.85rem;
padding:.55rem .72rem;
gap:.65rem;
}
.v2-home-score-value{font-size:1.65rem;}
}
@media(min-width:1024px){
/* Только бейдж «Матч через…»: выше к шапке, без сдвига всей сетки hero */
.v2-shell-home .v2-home-float-card{
top:-2.35rem;
z-index:110;
}
}
.v2-link-accent{
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--red);
text-decoration:none;
}
.v2-link-accent:hover{text-decoration:underline;}
@keyframes v2-home-pin-ring{
0%{transform:scale(1);opacity:.4;}
100%{transform:scale(2.8);opacity:0;}
}
@keyframes v2-home-float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}
.s-head--split{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:space-between;
gap:1rem 1.5rem;
margin-bottom:2rem;
}
.s-head--split .s-title{margin-bottom:0;}
.s-head--tight{margin-bottom:0 !important;}
.u-hidden{display:none !important;}
.u-underline{text-decoration:underline;text-underline-offset:3px;}
.u-flex{display:flex;}
.u-flex-wrap{flex-wrap:wrap;}
.u-items-end{align-items:flex-end;}
.u-justify-between{justify-content:space-between;}
.u-gap-2{gap:.5rem;}
.u-gap-3{gap:.75rem;}
.u-gap-4{gap:1rem;}
.u-mb-0{margin-bottom:0 !important;}
.u-mt-4{margin-top:1rem;}
.u-shrink-0{flex-shrink:0;}
.v2-community-band{
padding:var(--v2-home-section-pad-y) 0;
background:#f9f7f2;
text-align:left;
}
html[data-theme="dark"] .v2-community-band{
background:var(--bg);
}
.v2-community-head{
max-width:56rem;
margin:0 0 2.5rem;
text-align:left;
}
.v2-community-head .t-kicker{
--t-kicker-mb:1rem;
}
.v2-community-heading{
margin:0;
font-family:var(--font-head);
font-size:clamp(1.375rem,3.8vw,2.125rem);
font-weight:900;
text-transform:uppercase;
letter-spacing:.02em;
line-height:1.15;
color:#0a1120;
}
html[data-theme="dark"] .v2-community-heading{
color:var(--text);
}
.v2-community-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
max-width:56rem;
margin:0;
background:rgba(10,17,32,.12);
border-radius:0;
}
html[data-theme="dark"] .v2-community-stats{
background:rgba(255,255,255,.14);
}
.v2-community-stat{
position:relative;
overflow:hidden;
background:#fff;
padding:1.75rem 1rem 1.5rem;
text-align:center;
}
html[data-theme="dark"] .v2-community-stat{
background:var(--surface);
}
.v2-community-stat::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.5;
background-image:repeating-linear-gradient(
-42deg,
transparent,
transparent 6px,
rgba(10,17,32,.06) 6px,
rgba(10,17,32,.06) 7px
);
}
html[data-theme="dark"] .v2-community-stat::before{
background-image:repeating-linear-gradient(
-42deg,
transparent,
transparent 6px,
rgba(255,255,255,.04) 6px,
rgba(255,255,255,.04) 7px
);
}
.v2-community-stat__value{
position:relative;
z-index:1;
font-family:var(--font-head);
font-size:clamp(1.75rem,3.5vw,2.5rem);
font-weight:800;
line-height:1;
}
.v2-community-stat__value--red{color:#e13030;}
.v2-community-stat__value--ink{color:#0a1120;}
html[data-theme="dark"] .v2-community-stat__value--ink{color:var(--text);}
.v2-community-stat__value--teal{color:#1ab394;}
.v2-community-stat__label{
position:relative;
z-index:1;
margin-top:.75rem;
font-family:var(--font-head);
font-size:10px;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:#888;
}
html[data-theme="dark"] .v2-community-stat__label{
color:var(--text2);
}
@media(max-width:900px){
.v2-community-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:480px){
.v2-community-stats{grid-template-columns:1fr;}
}
/* Блок отзывов V2: тот же вертикальный ритм, что у .v2-home-band (без отдельного .section {80px}) */
.v2-reviews-band{
padding:var(--v2-home-section-pad-y) 0;
box-sizing:border-box;
background:#f8f5f1;
}
html[data-theme="dark"] .v2-reviews-band{
background:var(--bg);
}
.v2-reviews-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:var(--v2-grid-gap-bg);
max-width:100%;
}
@media(max-width:1024px){
.v2-reviews-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
.v2-reviews-list{grid-template-columns:1fr;}
}
.v2-rev{
position:relative;
overflow:hidden;
min-height:100%;
border-left-width:5px;
box-shadow:none;
background-color:var(--surface);
background-image:repeating-linear-gradient(
-45deg,
transparent,
transparent 7px,
rgba(10,14,26,.04) 7px,
rgba(10,14,26,.04) 8px
);
}
html[data-theme="dark"] .v2-rev{
background-image:repeating-linear-gradient(
-45deg,
transparent,
transparent 7px,
rgba(255,255,255,.035) 7px,
rgba(255,255,255,.035) 8px
);
}
.v2-rev > *{
position:relative;
z-index:1;
}
.v2-rev:hover{
background-color:var(--surface2);
background-image:repeating-linear-gradient(
-45deg,
transparent,
transparent 7px,
rgba(10,14,26,.045) 7px,
rgba(10,14,26,.045) 8px
);
}
html[data-theme="dark"] .v2-rev:hover{
background-color:var(--surface2);
background-image:repeating-linear-gradient(
-45deg,
transparent,
transparent 7px,
rgba(255,255,255,.04) 7px,
rgba(255,255,255,.04) 8px
);
}
.v2-rev .rev-txt{
flex:1 1 auto;
color:var(--text2);
font-size:14px;
line-height:1.75;
}
.v2-rev .rev-auth{
margin-top:auto;
padding-top:16px;
border-top:1px solid var(--border);
}
.v2-rev-auth{
flex-direction:row;
align-items:center;
gap:12px;
}
.v2-rev-person{
min-width:0;
}
.v2-rev-auth .rev-name{
font-family:var(--font-body);
font-size:15px;
font-weight:700;
text-transform:none;
letter-spacing:0;
color:var(--text);
}
.v2-rev-auth .rev-meta{
margin-top:4px;
font-family:var(--font-body);
font-size:13px;
font-weight:400;
text-transform:none;
letter-spacing:0;
color:var(--text2);
}
.v2-mob-nav{
display:flex;
position:fixed;
left:0;right:0;bottom:0;
z-index:30;
border-top:1px solid var(--border);
background:rgba(255,255,255,.95);
backdrop-filter:blur(8px);
padding-bottom:env(safe-area-inset-bottom,0);
}
html[data-theme="dark"] .v2-mob-nav{background:rgba(22,27,58,.95);}
@media(min-width:769px){
.v2-mob-nav{display:none;}
}
.v2-mob-nav-inner{
margin:0 auto;
display:flex;
height:3.5rem;
max-width:36rem;
align-items:flex-end;
justify-content:space-around;
padding:0 .5rem;
width:100%;
}
.v2-mob-tab{
display:flex;
flex:1;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.25rem;
padding:.25rem;
font-size:10px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.04em;
color:var(--text2);
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
.v2-mob-tab:hover,.v2-mob-tab.is-active{color:var(--red);}
.v2-mob-tab-icon{font-size:18px;line-height:1;}
.v2-mob-tab-label{
font-family:var(--font-mono);
font-size:9px;
font-weight:700;
text-transform:uppercase;
line-height:1;
letter-spacing:.08em;
}
.v2-mob-tab-center{
margin-bottom:.25rem;
display:inline-flex;
height:3rem;width:3rem;
flex-shrink:0;
align-items:center;
justify-content:center;
background:var(--red);
color:#fff;
font-size:1.5rem;
line-height:1;
text-decoration:none;
box-shadow:var(--shadow);
clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
-webkit-tap-highlight-color:transparent;
transition:transform .15s ease;
}
.v2-mob-tab-center:active{transform:scale(.96);}
/* V2 внутренние страницы: те же токены; разметка форм/списков — см. design-system.html (.ds-block, .grid-*) */
.v2-page-wrap{
margin-left:auto;
margin-right:auto;
max-width:min(80rem,100%);
padding-left:max(var(--v2-gutter-x-mobile), env(safe-area-inset-left));
padding-right:max(var(--v2-gutter-x-mobile), env(safe-area-inset-right));
}
@media(min-width:640px){
.v2-page-wrap{padding-left:var(--v2-gutter-x);padding-right:var(--v2-gutter-x);}
}
.v2-page-wrap > * + *{margin-top:1rem;}
@media(min-width:768px){
.v2-page-wrap > * + *{margin-top:1.25rem;}
}
.max-w-2xl{max-width:42rem;}
.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;}
.space-y-3 > * + *{margin-top:.75rem;}
.space-y-4 > * + *{margin-top:1rem;}
.v2-page-subtitle{
margin-top:.5rem;
font-size:.875rem;
line-height:1.75;
color:var(--text2);
}
.v2-page-panel{
border:1px solid var(--border);
border-left:4px solid var(--red);
background:var(--surface);
padding:1rem 1rem 1.25rem;
box-shadow:var(--shadow);
}
@media(min-width:640px){
.v2-page-panel{padding:1.25rem 1.25rem 1.5rem;}
}
.v2-page-header{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
justify-content:space-between;
gap:.75rem 1rem;
}
.v2-page-eyebrow{
margin:0;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--red);
}
.v2-page-title{
margin:.5rem 0 0;
font-family:var(--font-head);
font-size:clamp(1.75rem,3.6vw,2.4rem);
font-weight:900;
text-transform:uppercase;
line-height:1.02;
letter-spacing:-.03em;
color:var(--text);
}
.v2-page-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.5rem;
}
.v2-game-list-tabs{
position:relative;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.5rem .625rem;
margin-top:.75rem;
}
.v2-game-list-tabs .v2-tab-pill{
min-height:2.25rem;
padding:.45rem .9rem;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
border:none;
cursor:pointer;
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.v2-game-list-tabs .v2-tab-sep{
flex:0 0 auto;
width:1px;
height:1.25rem;
margin:0 .125rem;
background:var(--border);
align-self:center;
}
.v2-game-list-status-pack{
display:inline-flex;
flex-wrap:nowrap;
align-items:center;
gap:.5rem .625rem;
max-width:100%;
}
.v2-game-list-status-tabs{
display:inline-flex;
flex-wrap:nowrap;
align-items:center;
gap:.5rem .625rem;
}
@media(max-width:520px){
.v2-game-list-status-pack .v2-tab-sep{display:none;}
}
.v2-game-list-tabs .v2-tab-pill--status{
min-height:1.5rem;
padding:.22rem .55rem;
font-size:9px;
letter-spacing:.06em;
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
border:1px solid transparent;
box-sizing:border-box;
transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.v2-game-list-tabs .v2-tab-pill--status.v2-tab-pill--status-on{
background:var(--teal);
color:#0A0E1A;
border-color:var(--teal);
font-weight:800;
}
.v2-game-list-tabs .v2-tab-pill--status.v2-tab-pill--status-off{
background:var(--teal-dim);
color:var(--text);
border-color:var(--teal);
opacity:.92;
}
.v2-game-list-tabs .v2-tab-pill--status.v2-tab-pill--status-off:hover{
opacity:1;
filter:brightness(1.03);
}
.v2-game-list-filters{
margin-top:1.25rem;
padding-top:1.25rem;
border-top:1px solid var(--border);
}
.v2-filter-hint{
margin:0 0 .75rem;
font-size:.8125rem;
line-height:1.5;
color:var(--text3);
}
.v2-filter-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.5rem .625rem;
}
.v2-filter-chip{
display:inline-flex;
align-items:center;
gap:.5rem;
cursor:pointer;
margin:0;
padding:.5rem .75rem;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--text);
background:var(--surface2);
border:1px solid var(--border);
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.v2-filter-chip:hover{
border-color:var(--red);
}
.v2-filter-chip:has(input:checked){
background:var(--red-dim);
border-color:var(--red);
}
.v2-filter-chip input[type="checkbox"]{
width:1rem;
height:1rem;
margin:0;
accent-color:var(--red);
cursor:pointer;
}
.v2-list-grid{
display:grid;
gap:.75rem;
}
@media(min-width:640px){
.v2-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1280px){
.v2-list-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* Список игр /v2/games/: чуть выше индикатор заполненности, не трогая карточки на главной */
.v2-game-list .mc-pb{height:8px;border-radius:1px;}
.v2-form-grid{
display:grid;
gap:1rem;
}
@media(min-width:768px){
.v2-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.v2-card{
border:1px solid var(--border);
border-left:4px solid var(--red);
background:var(--surface);
color:var(--text);
padding:1.25rem;
box-shadow:var(--shadow);
}
.v2-surface{
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
}
.border-v2-light-border{border-color:var(--border);}
.grid{display:grid;}
.gap-3{gap:.75rem;}
.lg\:grid-cols-2{
grid-template-columns:1fr;
}
@media(min-width:1024px){
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:768px){
.md\:col-span-2{grid-column:span 2;}
}
/* Совместимость с разметкой V2 (раньше tailwind utilities) */
.flex{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.gap-2{gap:.5rem;}
.text-sm{font-size:.875rem;line-height:1.5;}
.text-base{font-size:1rem;}
.text-lg{font-size:1.125rem;}
.leading-7{line-height:1.75;}
.uppercase{text-transform:uppercase;}
.tracking-wide{letter-spacing:.04em;}
.tracking-wider{letter-spacing:.06em;}
.font-display{font-family:var(--font-head);}
.font-mono{font-family:var(--font-mono);}
.w-full{width:100%;}
/* ── V2 GAME DETAIL CARD ─────────────────────────────── */
.v2-game-detail-card{
display:flex;
flex-direction:column;
gap:2px;
}
.v2-game-detail-card .wrap-full{
max-width:var(--container);
margin:0 auto;
width:100%;
}
.v2-game-detail-card .v2g-topbar{
border-top:1px solid var(--border2);
border-bottom:1px solid var(--border);
background:var(--surface);
}
.v2-game-detail-card .v2g-topbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
height:46px;
}
.v2-game-detail-card .v2g-back-link{
display:inline-flex;
align-items:center;
gap:7px;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--text3);
transition:color var(--transition);
}
.v2-game-detail-card .v2g-back-link svg{
width:14px;
height:14px;
flex-shrink:0;
}
.v2-game-detail-card .v2g-back-link:hover{color:var(--red);}
.v2-game-detail-card .v2g-cover-wrap{
overflow:hidden;
border-top:1.5px solid var(--border);
border-bottom:1.5px solid var(--border);
}
.v2-game-detail-card .v2g-cover-placeholder{
position:relative;
height:220px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#0a1a0e 0%,#0d2a14 40%,#0a1628 100%);
}
.v2-game-detail-card .v2g-cover-emoji{
position:relative;
z-index:1;
font-size:64px;
}
.v2-game-detail-card .v2g-cover-title{
position:absolute;
right:-8px;
bottom:-20px;
font-family:var(--font-head);
font-size:clamp(74px,16vw,140px);
font-weight:900;
line-height:1;
letter-spacing:-.04em;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.34);
user-select:none;
}
.v2-game-detail-card .v2g-cover-vs{
position:absolute;
right:-10px;
bottom:-30px;
font-family:var(--font-head);
font-size:clamp(160px,40vw,260px);
font-weight:900;
text-transform:uppercase;
color:rgba(255,255,255,.10);
user-select:none;
pointer-events:none;
line-height:1;
letter-spacing:-.04em;
z-index:1;
}
.v2-game-detail-card .v2g-main-card{
position:relative;
overflow:hidden;
background:var(--surface);
border-left:4px solid var(--red);
border-top:1.5px solid var(--border);
border-bottom:1.5px solid var(--border);
}
.v2-game-detail-card .v2g-main-inner{
position:relative;
z-index:1;
padding:24px;
}
.v2-game-detail-card .v2g-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}
.v2-game-detail-card .v2g-title{
font-family:var(--font-head);
font-size:clamp(22px,4vw,30px);
font-weight:900;
text-transform:uppercase;
line-height:1.05;
letter-spacing:-.02em;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.v2-game-detail-card .v2g-game-num{
font-family:var(--font-mono);
font-size:16px;
color:var(--text3);
}
.v2-game-detail-card .v2g-status{
display:inline-flex;
align-items:center;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.07em;
padding:5px 12px;
clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.v2-game-detail-card .v2g-status.is-done{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(0,255,204,.25);}
.v2-game-detail-card .v2g-status.is-live{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,61,61,.25);}
.v2-game-detail-card .v2g-status.is-planned{background:var(--info-dim);color:var(--info);border:1px solid rgba(77,124,255,.25);}
.v2-game-detail-card .v2g-status.is-cancelled{background:var(--surface2);color:var(--text3);border:1px solid var(--border);}
.v2-game-detail-card .v2g-meta-rows{
display:flex;
flex-direction:column;
gap:11px;
}
.v2-game-detail-card .v2g-meta-row{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
color:var(--text2);
flex-wrap:wrap;
}
.v2-game-detail-card .v2g-meta-row svg{
width:14px;
height:14px;
color:var(--text3);
flex-shrink:0;
}
.v2-game-detail-card .v2g-meta-row strong{color:var(--text);}
.v2-game-detail-card .v2g-sep{
width:1px;
height:11px;
background:var(--border);
}
.v2-game-detail-card .v2g-level-tag{
display:inline-flex;
align-items:center;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
padding:3px 10px;
color:var(--info);
background:var(--info-dim);
border:1px solid rgba(77,124,255,.22);
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.v2-game-detail-card .v2g-blocks{
display:flex;
flex-direction:column;
gap:2px;
}
.v2-game-detail-card .v2g-block{
position:relative;
overflow:hidden;
border-top:1.5px solid var(--border);
border-bottom:1.5px solid var(--border);
background:var(--surface);
}
.v2-game-detail-card .v2g-block-head{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:13px 20px;
border-bottom:1.5px solid var(--border);
background:var(--bg-alt);
}
.v2-game-detail-card .v2g-block-title{
font-family:var(--font-head);
font-size:13px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
display:flex;
align-items:center;
gap:8px;
}
.v2-game-detail-card .v2g-block-title svg{
width:15px;
height:15px;
color:var(--red);
flex-shrink:0;
}
.v2-game-detail-card .v2g-block-meta{
font-family:var(--font-mono);
font-size:10px;
color:var(--text3);
}
.v2-game-detail-card .v2g-block-meta--link{
text-decoration:underline;
text-underline-offset:2px;
color:var(--text2);
transition:color var(--transition);
}
.v2-game-detail-card .v2g-block-meta--link:hover{
color:var(--red);
}
.v2-game-detail-card .v2g-block-body{
position:relative;
z-index:1;
padding:20px;
}
.v2-game-detail-card .v2g-empty{
font-size:13px;
line-height:1.6;
color:var(--text3);
}
/* Результаты матча (V2): по образцу game-card-football.html */
/* Убираем внутренние отступы блока-тела — контент идёт от края до края */
.v2-game-detail-card .v2g-result-block .v2g-block-body{
padding:0;
}
.v2-game-detail-card .v2g-results-list{
display:flex;
flex-direction:column;
gap:14px;
padding:14px;
}
/* Карточка одного матча */
.v2-game-detail-card .v2g-match-card{
border:1px solid var(--border);
background:var(--bg-alt);
overflow:hidden;
position:relative;
}
/* Сетка: команда | счёт | команда */
.v2-game-detail-card .v2g-result-teams{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:stretch;
cursor:pointer;
position:relative;
}
.v2-game-detail-card .v2g-result-team{
background:var(--bg-alt);
padding:20px 16px 18px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
position:relative;
overflow:hidden;
}
.v2-game-detail-card .v2g-result-team.is-win{
background:linear-gradient(160deg,var(--bg-alt) 0%,color-mix(in srgb,var(--teal) 7%,var(--bg-alt)) 100%);
border-left:3px solid var(--teal);
}
.v2-game-detail-card .v2g-result-team.is-lose{
opacity:.72;
}
/* Стек аватаров */
.v2-game-detail-card .v2g-av-stack{
display:flex;
align-items:center;
}
.v2-game-detail-card .v2g-av-item{
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:800;
color:#fff;
border:2px solid var(--bg-alt);
margin-left:-8px;
flex-shrink:0;
}
.v2-game-detail-card .v2g-av-item:first-child{
margin-left:0;
}
.v2-game-detail-card .v2g-av-more{
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:9px;
font-weight:800;
color:var(--red);
background:var(--red-dim);
border:2px solid rgba(255,61,61,.3);
margin-left:-8px;
flex-shrink:0;
}
/* Бейдж победа/поражение */
.v2-game-detail-card .v2g-result-badge{
display:inline-flex;
align-items:center;
gap:4px;
font-family:var(--font-mono);
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
padding:3px 8px;
clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.v2-game-detail-card .v2g-result-badge--win{
background:var(--teal);
color:#0A0E1A;
}
.v2-game-detail-card .v2g-result-badge--lose{
background:var(--surface3);
color:var(--text3);
}
/* Центральная колонка (счёт + тайм + раскрыть) */
.v2-game-detail-card .v2g-result-vs{
background:var(--bg-alt);
padding:20px 14px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
min-width:90px;
border-left:1px solid var(--border2);
border-right:1px solid var(--border2);
}
.v2-game-detail-card .v2g-result-score{
font-family:var(--font-mono);
font-size:28px;
font-weight:700;
color:var(--text);
line-height:1;
letter-spacing:.04em;
white-space:nowrap;
}
.v2-game-detail-card .v2g-result-score-sep{
color:var(--text3);
}
.v2-game-detail-card .v2g-result-sets{
display:flex;
flex-direction:column;
gap:3px;
margin-top:2px;
}
.v2-game-detail-card .v2g-result-set{
font-family:var(--font-mono);
font-size:10px;
color:var(--text3);
text-align:center;
}
.v2-game-detail-card .v2g-result-set span{
color:var(--text2);
}
/* Кнопка «Подробнее» / «Свернуть» внутри счёта */
.v2-game-detail-card .v2g-expand-hint{
display:flex;
align-items:center;
gap:4px;
font-family:var(--font-mono);
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--text3);
margin-top:8px;
transition:color var(--transition,180ms ease);
}
.v2-game-detail-card .v2g-result-teams:hover .v2g-expand-hint{
color:var(--red);
}
.v2-game-detail-card .v2g-expand-hint svg{
transition:transform .3s;
}
.v2-game-detail-card .v2g-expand-hint.is-open svg{
transform:rotate(180deg);
}
/* Список игроков по командам (раскрывается) */
.v2-game-detail-card .v2g-ft-teams{
display:grid;
grid-template-columns:1fr 1fr;
overflow:hidden;
max-height:600px;
opacity:1;
transition:max-height .3s ease,opacity .3s ease;
border-top:1px solid var(--border);
}
.v2-game-detail-card .v2g-ft-teams.is-collapsed{
max-height:0;
opacity:0;
pointer-events:none;
}
.v2-game-detail-card .v2g-ft-col{
background:var(--bg-alt);
display:flex;
flex-direction:column;
}
.v2-game-detail-card .v2g-ft-col--red{
border-right:1px solid var(--border);
}
.v2-game-detail-card .v2g-ft-col-head{
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.07em;
padding:9px 14px;
border-bottom:1px solid var(--border2);
}
.v2-game-detail-card .v2g-ft-col--red .v2g-ft-col-head{
color:var(--red);
}
.v2-game-detail-card .v2g-ft-col--blue .v2g-ft-col-head{
color:var(--info);
}
.v2-game-detail-card .v2g-ft-player{
display:flex;
align-items:center;
padding:9px 14px;
border-bottom:1px solid var(--border2);
gap:8px;
}
.v2-game-detail-card .v2g-ft-player:last-child{
border-bottom:none;
}
.v2-game-detail-card .v2g-ft-av{
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:9px;
font-weight:800;
color:#fff;
flex-shrink:0;
}
.v2-game-detail-card .v2g-ft-name{
font-size:11px;
font-weight:600;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
}
.v2-game-detail-card .v2g-players-count{
font-family:var(--font-mono);
font-size:18px;
font-weight:700;
color:var(--teal);
}
.v2-game-detail-card .v2g-players-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.v2-game-detail-card .v2g-player-pill{
display:flex;
align-items:center;
gap:10px;
padding:9px 12px;
border:1px solid var(--border);
background:var(--surface2);
transition:border-color var(--transition),background var(--transition);
}
.v2-game-detail-card .v2g-player-pill:hover{
border-color:var(--red);
background:var(--red-dim);
}
.v2-game-detail-card .v2g-player-avatar{
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
color:#fff;
background:var(--red);
flex-shrink:0;
}
.v2-game-detail-card .v2g-player-name{
font-size:13px;
font-weight:700;
color:var(--text);
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.v2-game-detail-card .v2g-chat-desc{
margin-bottom:14px;
font-size:13px;
line-height:1.65;
color:var(--text2);
}
.v2-game-detail-card .v2g-cover-ball{
width:84px;
height:84px;
border-radius:50%;
border:4px solid #0b0f1d;
background:rgba(255,255,255,.9);
display:flex;
align-items:center;
justify-content:center;
}
.v2-game-detail-card .v2g-players-avatars{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:10px;
padding-bottom:6px;
}
.v2-game-detail-card .v2g-player-avatar-wrap{
position:relative;
display:inline-flex;
width:48px;
height:48px;
flex-shrink:0;
overflow:visible;
}
.v2-game-detail-card .v2g-player-org-badge{
position:absolute;
left:50%;
bottom:-3px;
transform:translateX(-50%);
z-index:1;
pointer-events:none;
font-family:var(--font-mono);
font-size:8px;
font-weight:800;
letter-spacing:0.04em;
line-height:1.1;
padding:2px 6px;
border-radius:999px;
white-space:nowrap;
color:color-mix(in srgb,var(--red) 48%,var(--text));
background:color-mix(in srgb,var(--yellow) 32%,var(--surface2));
border:1px solid color-mix(in srgb,var(--yellow) 45%,var(--border));
box-shadow:0 1px 2px rgba(0,0,0,.12);
}
[data-theme="dark"] .v2-game-detail-card .v2g-player-org-badge{
background:color-mix(in srgb,var(--yellow) 24%,var(--surface3));
color:color-mix(in srgb,var(--red) 42%,var(--yellow));
border-color:color-mix(in srgb,var(--yellow) 35%,var(--border));
}
.v2-game-detail-card .v2g-player-avatar-link{
display:inline-flex;
cursor:pointer;
transition:transform var(--transition,180ms ease);
}
.v2-game-detail-card .v2g-player-avatar-link:hover{
transform:scale(1.12);
}
.v2-game-detail-card .v2g-player-avatar-link:hover .v2g-player-avatar{
border-color:var(--red);
}
.v2-game-detail-card .v2g-player-avatar{
width:48px;
height:48px;
border-radius:50%;
border:2px solid var(--border);
transition:border-color var(--transition,180ms ease);
}
.v2-game-detail-card .v2g-players-hint{
margin-top:12px;
font-size:12px;
color:var(--text3);
}
.v2-game-detail-card .v2g-player-slot-form{
display:inline-flex;
margin:0;
padding:0;
border:0;
background:transparent;
}
.v2-game-detail-card .v2g-player-slot{
box-sizing:border-box;
width:48px;
height:48px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:22px;
font-weight:600;
line-height:1;
text-decoration:none;
flex-shrink:0;
cursor:default;
border:2px dashed var(--border);
color:var(--text3);
background:transparent;
transition:border-color var(--transition,180ms ease),color var(--transition,180ms ease),background var(--transition,180ms ease),transform var(--transition,180ms ease);
}
.v2-game-detail-card .v2g-player-slot__clock{
opacity:.85;
}
.v2-game-detail-card button.v2g-player-slot{
padding:0;
margin:0;
appearance:none;
-webkit-appearance:none;
}
.v2-game-detail-card .v2g-player-slot--muted{
color:var(--text3);
}
.v2-game-detail-card .v2g-player-slot--action{
cursor:pointer;
border-color:color-mix(in srgb,var(--teal) 55%,var(--border));
color:var(--teal);
}
.v2-game-detail-card .v2g-player-slot--action:hover{
transform:scale(1.06);
border-color:var(--teal);
background:color-mix(in srgb,var(--teal) 12%,transparent);
}
.v2-game-detail-card a.v2g-player-slot--action:hover{
color:var(--teal);
}
.v2-game-detail-card .v2g-review-list{
display:flex;
flex-direction:column;
gap:1px;
background:var(--border);
}
.v2-game-detail-card .v2g-review-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
background:var(--surface2);
}
.v2-game-detail-card .v2g-review-player{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.v2-game-detail-card .v2g-review-avatar{
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
color:#fff;
background:var(--red);
border:2px solid var(--border);
flex-shrink:0;
}
/* Чередование цветов аватаров в списке отзывов */
.v2-game-detail-card .v2g-review-item:nth-child(2) .v2g-review-avatar{background:#4D7CFF;}
.v2-game-detail-card .v2g-review-item:nth-child(3) .v2g-review-avatar{background:var(--teal);color:#0A0E1A;}
.v2-game-detail-card .v2g-review-item:nth-child(4) .v2g-review-avatar{background:#9B59B6;}
.v2-game-detail-card .v2g-review-item:nth-child(5) .v2g-review-avatar{background:#E67E22;}
.v2-game-detail-card .v2g-review-item:nth-child(6) .v2g-review-avatar{background:#27AE60;}
.v2-game-detail-card .v2g-review-name{
font-size:14px;
font-weight:700;
color:var(--text);
}
.v2-game-detail-card .v2g-review-handle{
margin-top:2px;
font-family:var(--font-mono);
font-size:10px;
color:var(--text3);
}
.v2-game-detail-card .v2g-review-badge{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 10px;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
border:1px solid var(--border);
color:var(--text3);
background:var(--surface);
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
white-space:nowrap;
flex-shrink:0;
}
.v2-game-detail-card .v2g-review-badge svg{
width:9px;
height:9px;
flex-shrink:0;
}
.v2-game-detail-card .v2g-review-note{
margin-top:14px;
margin-bottom:0;
}
.v2-game-detail-card .v2g-revealed-title{
margin:18px 0 10px;
font-family:var(--font-head);
font-size:13px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
color:var(--text2);
}
.v2-game-detail-card .v2g-revealed-list{
display:flex;
flex-direction:column;
gap:8px;
}
.v2-game-detail-card .v2g-revealed-item{
border:1px solid var(--border);
background:var(--surface2);
padding:10px 12px;
}
.v2-game-detail-card .v2g-revealed-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
font-size:11px;
color:var(--text3);
}
.v2-game-detail-card .v2g-revealed-rating{
margin-top:6px;
font-family:var(--font-mono);
font-size:12px;
color:var(--yellow);
}
.v2-game-detail-card .v2g-revealed-rating span{
color:var(--text3);
margin-left:6px;
}
.v2-game-detail-card .v2g-revealed-text{
margin-top:6px;
font-size:13px;
line-height:1.6;
color:var(--text2);
}
.v2-game-detail-card .v2g-error-box{
border:1px solid rgba(255,61,61,.35);
background:var(--red-dim);
color:var(--red);
padding:10px 12px;
font-size:13px;
}
.v2-game-detail-card #resultsContainer .match-card{
border:1px solid var(--border);
background:var(--surface2);
padding:12px;
}
.v2-game-detail-card #resultsContainer .match-row{
display:grid;
grid-template-columns:1fr 220px;
gap:12px;
}
.v2-game-detail-card #resultsContainer .match-left{display:flex;flex-direction:column;gap:8px;}
.v2-game-detail-card #resultsContainer .match-right{display:flex;align-items:stretch;}
.v2-game-detail-card #resultsContainer .match-side-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
border:1px solid var(--border);
background:var(--surface);
}
.v2-game-detail-card #resultsContainer .match-side-row.is-winner{
border-left:3px solid var(--teal);
background:var(--teal-dim);
}
.v2-game-detail-card #resultsContainer .match-side-main{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}
.v2-game-detail-card #resultsContainer .match-avatar > div{
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
}
.v2-game-detail-card #resultsContainer .match-name{
font-size:13px;
font-weight:700;
color:var(--text);
}
.v2-game-detail-card #resultsContainer .match-subtitle{
margin-top:2px;
font-size:10px;
color:var(--text3);
}
.v2-game-detail-card #resultsContainer .match-winner-badge{
font-size:11px;
color:var(--teal);
}
.v2-game-detail-card #resultsContainer .match-score{
width:100%;
border:1px solid var(--border);
background:var(--surface);
padding:8px 10px;
}
.v2-game-detail-card #resultsContainer .match-toggle{
border:none;
background:transparent;
color:var(--text3);
}
.v2-game-detail-card #resultsContainer .match-sets{
margin-top:6px;
font-family:var(--font-mono);
font-size:11px;
color:var(--text2);
}
.v2-game-detail-card #resultsContainer .match-sets.is-collapsed{display:none;}
@media(max-width:768px){
.v2-game-detail-card .v2g-review-item{
flex-direction:column;
align-items:flex-start;
}
.v2-game-detail-card #resultsContainer .match-row{grid-template-columns:1fr;}
.v2-game-detail-card .v2g-cover-ball{
width:72px;
height:72px;
}
}
@media(max-width:768px){
.v2-game-detail-card .v2g-topbar-inner{
height:42px;
}
.v2-game-detail-card .v2g-cover-placeholder{
height:170px;
}
.v2-game-detail-card .v2g-cover-emoji{
font-size:52px;
}
.v2-game-detail-card .v2g-main-inner{
padding:18px 14px;
}
.v2-game-detail-card .v2g-title{
font-size:20px;
}
.v2-game-detail-card .v2g-block-head{
padding:12px 14px;
}
.v2-game-detail-card .v2g-block-body{
padding:14px;
}
.v2-game-detail-card .v2g-result-extra{
padding:0 14px 14px;
}
.v2-game-detail-card .v2g-players-grid{
grid-template-columns:1fr;
}
}
/* ── NOTIFICATION PANEL (V2 drawer, IDs совместимы с notifications.js) ─ */
.nav-notif-badge{
position:absolute;
top:-4px;
right:-4px;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:var(--red);
color:#fff;
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
line-height:18px;
text-align:center;
border:1.5px solid var(--surface);
}
.notif-overlay-ds{
position:fixed;
inset:0;
z-index:450;
background:var(--overlay);
backdrop-filter:blur(4px);
}
.notif-drawer-ds{
position:fixed;
inset:0 0 0 auto;
z-index:460;
display:flex;
flex-direction:column;
width:min(100%,24rem);
min-height:100dvh;
background:var(--surface);
border-left:1.5px solid var(--border);
box-shadow:-8px 0 24px rgba(0,0,0,.12);
transition:transform .3s ease;
}
html.dark .notif-drawer-ds{
box-shadow:-8px 0 32px rgba(0,0,0,.45);
}
.notif-drawer-ds--closed{
transform:translateX(100%);
pointer-events:none;
}
.notif-drawer-ds:not(.notif-drawer-ds--closed){
transform:none;
pointer-events:auto;
}
.notif-panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
padding:16px 18px;
border-bottom:1px solid var(--border);
}
.notif-panel-head-left{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px 14px;
min-width:0;
}
.notif-panel-title{
margin:0;
font-family:var(--font-head);
font-size:15px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
color:var(--text);
}
.notif-mark-all-btn{
margin:0;
padding:0;
border:none;
background:none;
cursor:pointer;
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--info);
text-decoration:underline;
text-underline-offset:3px;
transition:color var(--transition);
}
.notif-mark-all-btn:hover{
color:var(--red);
}
.notif-drawer-body{
flex:1;
min-height:0;
overflow-y:auto;
padding-bottom:env(safe-area-inset-bottom,0);
}
.notif-list{
list-style:none;
margin:0;
padding:0;
}
.notif-list > li{
border-bottom:1px solid var(--border2);
}
.notif-item-link{
display:block;
padding:14px 18px;
text-decoration:none;
color:var(--text2);
font-size:14px;
line-height:1.45;
transition:background var(--transition);
}
.notif-item-link:hover{
background:var(--surface2);
}
.notif-item-link--unread{
color:var(--text);
font-weight:700;
}
.notif-item-link--read{
color:var(--text3);
font-weight:400;
}
.notif-item-time{
margin-top:6px;
font-family:var(--font-mono);
font-size:10px;
font-weight:600;
color:var(--text3);
letter-spacing:.02em;
}
.notif-empty{
padding:20px 18px;
font-size:13px;
color:var(--text3);
}
.notif-empty--error{
color:var(--red);
}
/* ── V2 Profile: header dropdown + /v2/me + /v2/u/:user ───────── */
.nav-profile-dd-wrap{
position:relative;
display:flex;
align-items:center;
z-index:2;
}
@media(max-width:768px){
.nav-profile-dd-wrap{display:none !important;}
}
.nav-profile-btn{
display:inline-flex;
align-items:center;
gap:9px;
background:var(--surface);
border:1.5px solid var(--border);
padding:5px 12px 5px 6px;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
transition:border-color var(--transition),color var(--transition);
cursor:pointer;
font:inherit;
color:inherit;
}
.nav-profile-btn:hover{border-color:var(--red);}
.nav-profile-btn:hover .nav-profile-av-ring{border-color:var(--red);}
.nav-profile-btn.is-open .nav-profile-chevron{transform:rotate(180deg);}
.nav-profile-av-ring{
width:28px;height:28px;border-radius:50%;
border:2px solid var(--border);overflow:hidden;
flex-shrink:0;transition:border-color var(--transition);
}
.nav-profile-av-ring img{width:100%;height:100%;object-fit:cover;display:block;}
.nav-profile-av-fallback{
width:100%;height:100%;
background:linear-gradient(135deg,var(--red) 0%,#FF6B35 100%);
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;color:#fff;
}
.nav-profile-name{
font-family:var(--font-mono);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.04em;color:var(--text2);
max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
transition:color var(--transition);
}
.nav-profile-btn:hover .nav-profile-name{color:var(--text);}
.nav-profile-chevron{font-size:10px;color:var(--text3);transition:transform var(--transition);}
.nav-profile-panel{
position:absolute;
top:calc(100% + 8px);
right:0;
left:auto;
width:260px;
max-width:min(260px, calc(100vw - 24px));
background:var(--surface);
border:1.5px solid var(--border);
border-top:3px solid var(--red);
z-index:20;
box-shadow:0 8px 32px rgba(0,0,0,.4);
opacity:0;
pointer-events:none;
transform:translateY(-8px);
transition:opacity .18s ease,transform .18s ease;
}
.nav-profile-panel.is-open{
opacity:1;
pointer-events:auto;
transform:none;
}
.nd-head{padding:16px 18px 14px;border-bottom:1px solid var(--border);}
.nd-user{display:flex;align-items:center;gap:12px;}
.nd-av{width:44px;height:44px;border-radius:50%;border:2px solid var(--border);overflow:hidden;flex-shrink:0;}
.nd-av img{width:100%;height:100%;object-fit:cover;}
.nd-info{flex:1;min-width:0;}
.nd-name{font-family:var(--font-head);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nd-handle{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:2px;}
.nd-rating{display:flex;align-items:center;gap:4px;margin-top:4px;}
.nd-star{color:var(--yellow);font-size:11px;}
.nd-rating-val{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--yellow);}
.nd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin:0;}
.nd-stat{background:var(--bg-alt,var(--bg));padding:10px 8px;text-align:center;}
.nd-stat-n{font-family:var(--font-mono);font-size:16px;font-weight:700;line-height:1;}
.nd-stat-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.nd-links{padding:8px 0;}
.nd-link{
display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:13px;color:var(--text2);
transition:background var(--transition),color var(--transition);
text-decoration:none;cursor:pointer;border:none;background:none;width:100%;text-align:left;font:inherit;
}
.nd-link:hover{background:var(--surface2);color:var(--text);}
.nd-link-ico{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.nd-link-arr{margin-left:auto;font-size:10px;color:var(--text3);}
.nd-link.danger{color:var(--red);}
.nd-link.danger:hover{background:var(--red-dim);}
.nd-sep{height:1px;background:var(--border);margin:4px 0;}
.nd-public-link{
display:flex;align-items:center;gap:6px;margin:8px 18px;padding:8px 12px;
background:var(--surface2);border:1px solid var(--border);
font-family:var(--font-mono);font-size:10px;color:var(--text3);
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
transition:border-color var(--transition),color var(--transition);
cursor:pointer;text-decoration:none;
}
.nd-public-link:hover{border-color:var(--red);color:var(--red);}
.nd-public-link-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Profile page blocks (.me-*, .pub-*) */
.v2-profile-page{padding-top:8px;padding-bottom:24px;}
.me-hero{background:var(--surface);border-bottom:1px solid var(--border);position:relative;overflow:hidden;padding:28px 0 24px;}
.me-hero::before{
content:attr(data-bg-initials);
position:absolute;right:-20px;top:50%;transform:translateY(-50%);
font-family:var(--font-head);font-size:clamp(100px,20vw,200px);font-weight:900;
color:transparent;-webkit-text-stroke:1px var(--stroke);pointer-events:none;line-height:1;letter-spacing:-.04em;
}
.me-hero-inner{display:flex;align-items:flex-start;gap:20px;position:relative;}
.me-avatar-wrap{position:relative;flex-shrink:0;}
.me-avatar{width:80px;height:80px;border-radius:50%;border:3px solid var(--border);overflow:hidden;transition:border-color var(--transition);}
.me-avatar img{width:100%;height:100%;object-fit:cover;}
.me-avatar-edit{
position:absolute;bottom:2px;right:2px;width:24px;height:24px;background:var(--red);
border:2px solid var(--surface);border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:10px;
transition:transform var(--transition);
}
.me-avatar-edit:hover{transform:scale(1.1);}
.me-info{flex:1;min-width:0;}
.me-name{font-family:var(--font-head);font-size:clamp(18px,3.5vw,26px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;margin-bottom:5px;}
.me-handle{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin-bottom:10px;}
.me-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.me-tag{
display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:.04em;padding:4px 10px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text3);
clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.me-rating{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.me-stars{display:flex;gap:2px;}
.me-star{font-size:13px;color:var(--yellow);line-height:1;}
.me-star.empty{
color:var(--surface3);
text-align:inherit;
padding:0;
margin:0;
background:transparent;
border:none;
}
.me-rating-val{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--yellow);}
.me-rating-cnt{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.me-hero-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.me-statsbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin:0;}
.me-stat{background:var(--bg);padding:16px 20px;text-align:center;position:relative;}
.me-stat+.me-stat::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--border);}
.me-stat-n{font-family:var(--font-mono);font-size:clamp(18px,4vw,24px);font-weight:700;line-height:1;margin-bottom:4px;}
.me-stat-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.profile-complete{background:var(--surface);border:1.5px solid var(--border);padding:16px 20px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
.pc-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.pc-label{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);}
.pc-pct{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--teal);}
.pc-bar{height:6px;background:var(--border);clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);overflow:hidden;}
.pc-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--info));transition:width 1s ease;}
.pc-items{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.pc-item{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;color:var(--text3);}
.pc-item.done{color:var(--teal);}
.pc-item-dot{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0;}
.pc-item.done .pc-item-dot{background:var(--teal);}
.me-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.me-section{background:var(--bg);}
.me-full{grid-column:1/-1;}
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;margin-bottom:16px;}
.sec-title{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.sec-title-ico{font-size:15px;}
.sec-link{font-family:var(--font-mono);font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.04em;transition:opacity var(--transition);}
.sec-link:hover{opacity:.7;}
.sec-body{padding:0 24px 24px;}
.sports-list{display:flex;flex-direction:column;gap:8px;}
.sport-row{
display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1.5px solid var(--border);
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:border-color var(--transition);
}
.sport-row:hover{border-color:var(--red);}
.sport-ico{font-size:20px;flex-shrink:0;}
.sport-info{flex:1;min-width:0;}
.sport-name{font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
.sport-level{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.sport-stats{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.sport-stat-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);}
.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.result-card{
background:var(--surface);border:1.5px solid var(--border);padding:16px;
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);position:relative;overflow:hidden;transition:border-color var(--transition);
}
.result-card:hover{border-color:var(--teal);}
.result-card.active{border-color:var(--yellow);}
.result-card-sport{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:12px;}
.result-ring{position:relative;width:72px;height:72px;margin:0 auto 12px;}
.result-donut-svg{display:block;transform:rotate(-90deg);}
.result-donut-track{stroke:var(--border);}
.result-donut-arc--yellow{stroke:var(--yellow);}
.result-donut-arc--teal{stroke:var(--teal);}
.result-ring-num{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
font-family:var(--font-mono);text-align:center;pointer-events:none;
}
.result-ring-n{font-size:18px;font-weight:700;line-height:1;}
.result-ring-l{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.result-footer{display:flex;justify-content:center;gap:16px;}
.result-stat{text-align:center;}
.result-stat-n{font-family:var(--font-mono);font-size:13px;font-weight:700;line-height:1;}
.result-stat-l{font-family:var(--font-mono);font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.about-text{font-size:14px;color:var(--text2);line-height:1.75;}
.about-empty{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--surface);border:1.5px dashed var(--border);font-size:13px;color:var(--text3);}
.game-item{
display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1.5px solid var(--border);
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);margin-bottom:8px;transition:all var(--transition);
text-decoration:none;color:inherit;
}
.game-item:hover{background:var(--surface2);border-color:var(--red);}
.game-sport{width:36px;height:36px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:17px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);flex-shrink:0;}
.game-info{flex:1;min-width:0;}
.game-name{font-size:13px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.review-item{padding:16px;background:var(--surface);border-left:3px solid var(--border);margin-bottom:8px;transition:border-color var(--transition);}
.review-item:hover{border-left-color:var(--yellow);}
.review-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.review-author{display:flex;align-items:center;gap:8px;}
.review-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.review-name{font-size:12px;font-weight:700;}
.review-date{font-family:var(--font-mono);font-size:9px;color:var(--text3);}
.review-stars{color:var(--yellow);font-size:11px;letter-spacing:1px;}
.review-text{font-size:13px;color:var(--text2);line-height:1.65;}
.manage-list{display:flex;flex-direction:column;gap:1px;background:var(--border);}
.manage-item{
background:var(--surface);display:flex;align-items:center;gap:12px;padding:14px 20px;
transition:background var(--transition);cursor:pointer;text-decoration:none;color:inherit;
}
.manage-item:hover{background:var(--surface2);}
.manage-item.danger:hover{background:var(--red-dim);}
.manage-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.manage-text{flex:1;}
.manage-label{font-size:13px;font-weight:600;margin-bottom:2px;}
.manage-sub{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.manage-arr{font-size:11px;color:var(--text3);}
.manage-item.danger .manage-label{color:var(--red);}
.invite-banner{
background:var(--surface);border:1.5px dashed var(--border);padding:16px 20px;display:flex;align-items:center;gap:12px;
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:border-color var(--transition);
}
.invite-banner:hover{border-color:var(--yellow);border-style:solid;}
.invite-banner-ico{font-size:22px;flex-shrink:0;}
.invite-banner-text{flex:1;}
.invite-banner-title{font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px;}
.invite-banner-sub{font-size:12px;color:var(--text3);}
@media(max-width:768px){
.me-grid{grid-template-columns:1fr;}
.me-full{grid-column:1;}
.me-statsbar{grid-template-columns:repeat(2,1fr);}
.me-stat+.me-stat::before{display:none;}
}
.pub-hero{background:var(--surface);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.pub-cover{height:120px;background:linear-gradient(135deg,var(--surface2) 0%,var(--surface3) 100%);position:relative;overflow:hidden;}
.pub-cover::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 12px,var(--stripe) 12px,var(--stripe) 13px);}
.pub-cover-sport{
position:absolute;right:24px;top:50%;transform:translateY(-50%);
font-family:var(--font-head);font-size:clamp(48px,12vw,96px);font-weight:900;color:transparent;-webkit-text-stroke:1px var(--stroke);pointer-events:none;line-height:1;opacity:.6;
}
.pub-hero-body{padding:0 24px 24px;position:relative;}
.pub-av-area{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-36px;margin-bottom:16px;flex-wrap:wrap;gap:12px;}
.pub-avatar{width:72px;height:72px;border-radius:50%;border:4px solid var(--surface);overflow:hidden;flex-shrink:0;background:var(--surface2);}
.pub-avatar img{width:100%;height:100%;object-fit:cover;}
.pub-hero-actions{display:flex;gap:8px;flex-wrap:wrap;}
.pub-name-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.pub-name{font-family:var(--font-head);font-size:clamp(20px,4vw,28px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;}
.pub-handle{font-family:var(--font-mono);font-size:11px;color:var(--text3);}
.pub-meta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.pub-meta-item{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.pub-rating-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pub-stars{display:flex;gap:2px;}
.pub-star{font-size:14px;color:var(--yellow);line-height:1;}
.pub-star.empty{
color:var(--surface3);
text-align:inherit;
padding:0;
margin:0;
background:transparent;
border:none;
}
.pub-rating-val{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--yellow);}
.pub-rating-cnt{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.pub-statsbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);}
.pub-stat{background:var(--bg);padding:14px 16px;text-align:center;}
.pub-stat-n{font-family:var(--font-mono);font-size:22px;font-weight:700;line-height:1;margin-bottom:3px;}
.pub-stat-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
.pub-body{padding:0;}
.pub-block{padding:24px;border-bottom:1px solid var(--border);}
.pub-block:last-child{border-bottom:none;}
.pub-block-title{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;color:var(--text2);}
.pub-block-title-ico{font-size:14px;}
.pub-sports{display:flex;flex-wrap:wrap;gap:8px;}
.pub-sport-tag{
display:flex;align-items:center;gap:7px;padding:8px 14px;background:var(--surface);border:1.5px solid var(--border);
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:border-color var(--transition);
}
.pub-sport-tag:hover{border-color:var(--red);}
.pub-sport-tag-ico{font-size:16px;}
.pub-sport-tag-name{font-family:var(--font-head);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;}
.pub-sport-tag-level{font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-left:4px;}
.pub-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pub-result{
background:var(--surface);border:1.5px solid var(--border);padding:14px;text-align:center;
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:border-color var(--transition);
}
.pub-result:hover{border-color:var(--teal);}
.pub-result.is-empty{opacity:.5;}
.pub-result-sport{font-family:var(--font-mono);font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.pub-result-big{font-family:var(--font-mono);font-size:28px;font-weight:700;line-height:1;margin-bottom:4px;}
.pub-result-label{font-family:var(--font-mono);font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
.win-pct-bar{height:4px;background:var(--border);margin:10px 0 2px;clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);overflow:hidden;}
.win-pct-fill{height:100%;background:var(--teal);transition:width 1s ease;}
.pub-result-row{display:flex;justify-content:center;gap:12px;}
.pub-result-mini{text-align:center;}
.pub-result-mini-n{font-family:var(--font-mono);font-size:13px;font-weight:700;line-height:1;}
.pub-result-mini-l{font-family:var(--font-mono);font-size:7px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
.pub-review{padding:14px;background:var(--surface);border-left:3px solid var(--yellow);margin-bottom:8px;transition:border-color var(--transition);}
.pub-review:last-child{margin-bottom:0;}
.pub-review-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;}
.pub-review-author{display:flex;align-items:center;gap:8px;}
.pub-review-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.pub-review-name{font-size:12px;font-weight:700;}
.pub-review-date{font-family:var(--font-mono);font-size:9px;color:var(--text3);}
.pub-review-stars{color:var(--yellow);font-size:11px;}
.pub-review-text{font-size:13px;color:var(--text2);line-height:1.65;}
.pub-cta{
background:var(--red-dim);border:1.5px solid var(--red);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.pub-cta-text{font-family:var(--font-head);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;}
.pub-cta-sub{font-size:12px;color:var(--text2);margin-top:4px;}
@media(max-width:768px){
.pub-statsbar{grid-template-columns:repeat(2,1fr);}
.pub-results-grid{grid-template-columns:repeat(2,1fr);}
}
/* Mobile bottom nav: profile tab avatar */
.v2-mob-tab-profile{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.25rem;
font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
.v2-mob-tab-profile:hover,.v2-mob-tab-profile.is-active{color:var(--red);}
.v2-mob-tab-av{
width:22px;height:22px;border-radius:50%;overflow:hidden;border:2px solid var(--text3);
transition:border-color .15s;display:flex;align-items:center;justify-content:center;
}
.v2-mob-tab-profile.is-active .v2-mob-tab-av{border-color:var(--red);}
.v2-mob-tab-av img{width:100%;height:100%;object-fit:cover;}
.v2-mob-tab-av-fallback{
width:100%;height:100%;
background:linear-gradient(135deg,var(--red),#FF6B35);
font-size:8px;font-weight:700;color:#fff;
}
/* V2 profile edit (/v2/me/edit/) */
.v2-profile-edit-page{padding-bottom:calc(88px + env(safe-area-inset-bottom));}
.v2-profile-edit-topbar{
background:var(--surface);border-bottom:1.5px solid var(--border);border-top:1px solid var(--border2);
}
.v2-profile-edit-topbar-inner{
display:flex;align-items:center;justify-content:space-between;height:46px;max-width:var(--container);margin:0 auto;
}
.v2-profile-edit-back{
display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;color:var(--text3);transition:color var(--transition);
}
.v2-profile-edit-back:hover{color:var(--red);}
.v2-profile-edit-badge{
display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;
text-transform:uppercase;letter-spacing:.07em;padding:5px 12px;
clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
background:var(--info-dim);color:var(--info);border:1px solid rgba(77,124,255,.25);
}
.v2-profile-edit-avatar-block{
background:var(--surface);border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);
border-left:4px solid var(--red);position:relative;overflow:hidden;
}
.v2-profile-edit-avatar-inner{
max-width:var(--container);margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:20px;position:relative;z-index:1;
}
.v2-profile-edit-avatar-wrap{position:relative;flex-shrink:0;}
.v2-profile-edit-avatar{
width:72px;height:72px;border-radius:50%;border:3px solid var(--border);overflow:hidden;
}
.v2-profile-edit-avatar img{width:100%;height:100%;object-fit:cover;}
.v2-profile-edit-avatar-fallback{
width:100%;height:100%;min-height:72px;
background:linear-gradient(135deg,var(--red),#FF6B35);
display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;
}
.v2-profile-edit-avatar-ring{
position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;
background:linear-gradient(135deg,var(--red),var(--yellow)) border-box;
-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;
}
.v2-profile-edit-avatar-name{
font-family:var(--font-head);font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:3px;
}
.v2-profile-edit-avatar-handle{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin-bottom:8px;}
.v2-profile-edit-avatar-tags{display:flex;gap:6px;flex-wrap:wrap;}
.v2-profile-edit-tag{
font-family:var(--font-mono);font-size:10px;font-weight:700;padding:3px 10px;background:var(--surface2);
border:1.5px solid var(--border);color:var(--text3);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.v2-profile-edit-sections{display:flex;flex-direction:column;gap:2px;padding:2px 0 16px;}
.v2-profile-edit-sec{
background:var(--surface);border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);
position:relative;overflow:hidden;
}
.v2-profile-edit-sec-head{
background:var(--bg-alt);border-bottom:1.5px solid var(--border);padding:13px 24px;display:flex;align-items:center;gap:10px;
}
.v2-profile-edit-sec-ico{
width:28px;height:28px;background:var(--red-dim);border:1.5px solid var(--red);
display:flex;align-items:center;justify-content:center;font-size:13px;
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);flex-shrink:0;
}
.v2-profile-edit-sec-title{
font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin:0;
}
.v2-profile-edit-sec-body{padding:20px 24px;}
@media(max-width:600px){.v2-profile-edit-sec-body{padding:16px 16px;}}
.v2-profile-edit-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.v2-profile-edit-field-row{grid-template-columns:1fr;}}
.v2-profile-edit-hint{font-size:12px;color:var(--text3);margin-top:6px;line-height:1.5;}
.v2-profile-edit-gender{display:flex;flex-wrap:wrap;gap:8px;}
.v2-profile-edit-gender-chip{
display:inline-flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surface2);
border:1.5px solid var(--border);color:var(--text2);font-family:var(--font-mono);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:border-color var(--transition),background var(--transition);
}
.v2-profile-edit-gender-chip:hover{border-color:var(--text2);}
.v2-profile-edit-gender-chip:has(input:checked){
background:var(--red-dim);border-color:var(--red);color:var(--red);
}
.v2-profile-edit-gender-chip input{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.v2-profile-edit-about-count{text-align:right;font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:6px;}
.v2-profile-edit-email-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.v2-profile-edit-badge-verified{
display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;
clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
background:var(--teal-dim);color:var(--teal);border:1px solid rgba(0,255,204,.3);
}
.v2-profile-edit-warn{font-size:12px;color:var(--yellow);}
.v2-profile-edit-link{font-size:12px;color:var(--red);text-decoration:underline;}
.v2-profile-edit-opt{color:var(--text3);font-weight:400;}
.v2-profile-edit-sport-list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.v2-profile-edit-sport-row{
display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
}
@media(min-width:600px){
.v2-profile-edit-sport-row{flex-wrap:nowrap;align-items:center;}
}
.v2-profile-edit-sport-cell{flex:1;min-width:0;}
.v2-profile-edit-sport-sep{font-family:var(--font-mono);font-size:11px;color:var(--text3);flex-shrink:0;padding-top:12px;}
.v2-profile-edit-sport-remove{
width:34px;height:34px;background:var(--red-dim);border:1.5px solid var(--red);color:var(--red);
display:flex;align-items:center;justify-content:center;font-size:13px;
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);flex-shrink:0;cursor:pointer;
margin-top:4px;
}
.v2-profile-edit-sport-remove:hover{background:var(--red);color:#fff;}
.v2-profile-edit-add-sport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.v2-profile-edit-add-sport-btn{
display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;padding:9px 14px;background:var(--surface2);
border:1.5px dashed var(--border);color:var(--text3);
clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:all var(--transition);cursor:pointer;
}
.v2-profile-edit-add-sport-btn:hover{border-color:var(--teal);color:var(--teal);}
.v2-profile-edit-sport-hint{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.v2-profile-edit-tg-block{
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px;background:var(--surface2);
border:1.5px solid var(--border);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.v2-profile-edit-tg-left{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.v2-profile-edit-tg-ico{font-size:22px;flex-shrink:0;margin-top:2px;}
.v2-profile-edit-tg-title{font-family:var(--font-head);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px;}
.v2-profile-edit-tg-sub{font-size:12px;color:var(--text3);line-height:1.55;margin-bottom:8px;}
.v2-profile-edit-tg-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.v2-profile-edit-tg-handle{font-family:var(--font-mono);font-size:11px;color:var(--text2);}
.v2-profile-edit-muted{font-size:12px;color:var(--text3);}
.v2-profile-edit-tg-actions{flex-shrink:0;}
.v2-profile-edit-tg-result{margin-top:16px;}
.v2-profile-edit-tg-link-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;}
.v2-profile-edit-tg-link-row .inp{flex:1;min-width:0;}
.v2-profile-edit-sec--danger .v2-profile-edit-sec-head--danger{border-left:3px solid var(--red);}
.v2-profile-edit-sec--danger .v2-profile-edit-sec-ico{border-color:var(--red);background:var(--red-dim);}
.v2-profile-edit-sec--danger .v2-profile-edit-sec-title{color:var(--red);}
.v2-profile-edit-danger-list{display:flex;flex-direction:column;gap:1px;background:var(--border);}
.v2-profile-edit-danger-item{
background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
transition:background var(--transition);text-decoration:none;color:inherit;
}
.v2-profile-edit-danger-item:hover{background:var(--surface2);}
.v2-profile-edit-danger-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.v2-profile-edit-danger-title{font-size:13px;font-weight:700;}
.v2-profile-edit-danger-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.v2-profile-edit-danger-arr{font-size:12px;color:var(--text3);}
.v2-profile-edit-save-footer{
position:sticky;bottom:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);
padding:12px 24px;display:flex;align-items:center;justify-content:center;
}
.v2-profile-edit-save-inner{
max-width:var(--container);width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.v2-profile-edit-save-hint{font-family:var(--font-mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
@media(max-width:600px){.v2-profile-edit-save-hint{display:none;}}
.v2-profile-edit-alert{
margin-bottom:12px;padding:12px 16px;background:var(--red-dim);border:1.5px solid var(--red);color:var(--red);
font-size:13px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
/* V2 feedback (/v2/feedback/) */
.v2-feedback-page{padding-bottom:calc(88px + env(safe-area-inset-bottom));}
.v2-feedback-topbar-inner{max-width:860px;}
.v2-feedback-inner{max-width:860px;margin:0 auto;}
.v2-feedback-main-card{
background:var(--surface);border-left:4px solid var(--red);border-top:1.5px solid var(--border);
border-bottom:1.5px solid var(--border);position:relative;overflow:hidden;margin-top:2px;
}
.v2-feedback-main-card-inner{padding:28px 28px 0;position:relative;z-index:1;}
@media(max-width:600px){.v2-feedback-main-card-inner{padding:20px 20px 0;}}
.v2-feedback-card-hd{margin-bottom:24px;}
.v2-feedback-card-hd-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.v2-feedback-card-hd-ico{
width:40px;height:40px;background:var(--red-dim);border:1.5px solid var(--red);
display:flex;align-items:center;justify-content:center;font-size:18px;
clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);flex-shrink:0;
}
.v2-feedback-card-hd-title{
font-family:var(--font-head);font-size:clamp(18px,3vw,24px);font-weight:900;text-transform:uppercase;
letter-spacing:-.02em;margin:0;
}
.v2-feedback-card-hd-sub{font-size:13px;color:var(--text2);line-height:1.6;margin-top:4px;}
.v2-feedback-nonfield{margin-bottom:16px;padding:12px 16px;background:var(--red-dim);border:1.5px solid var(--red);color:var(--red);font-size:13px;}
.v2-feedback-form-body{padding-bottom:28px;}
.v2-feedback-field{margin-bottom:20px;}
.v2-feedback-field-label{
font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.v2-feedback-req::after{content:'*';color:var(--red);margin-left:2px;}
.v2-feedback-opt{color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0;}
.v2-feedback-req-inline{color:var(--red);}
.v2-feedback-field-err{font-size:12px;color:var(--red);margin-top:6px;}
.v2-feedback-field-foot{display:flex;justify-content:flex-end;margin-top:6px;}
.v2-feedback-char-count{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.v2-feedback-char-count.v2-feedback-char-warn{color:var(--yellow);}
.v2-feedback-sport-level-lbl{margin-top:12px;}
body.v2-page .v2-feedback-form textarea.textarea{min-height:140px;}
.v2-feedback-form-foot{
padding:20px 28px;border-top:1px solid var(--border);display:flex;align-items:center;
justify-content:space-between;gap:12px;flex-wrap:wrap;
}
@media(max-width:600px){
.v2-feedback-form-foot{padding:16px 20px;flex-direction:column;align-items:stretch;}
}
.v2-feedback-form-foot-hint{
font-family:var(--font-mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;
}
@media(max-width:600px){.v2-feedback-form-foot-hint{text-align:center;order:2;}}
@media(max-width:600px){.v2-feedback-submit{width:100%;justify-content:center;}}
.v2-feedback-blocks{display:flex;flex-direction:column;gap:2px;margin-top:2px;}
.v2-feedback-block{background:var(--surface);border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);}
.v2-feedback-block-head{
background:var(--bg-alt);border-bottom:1.5px solid var(--border);padding:13px 24px;
display:flex;align-items:center;justify-content:space-between;
}
.v2-feedback-block-label{
font-family:var(--font-head);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);
display:flex;align-items:center;gap:8px;margin:0;
}
.v2-feedback-block-body{padding:0;}
.v2-feedback-quick-links{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.v2-feedback-q-link{
background:var(--surface2);padding:14px 16px;display:flex;align-items:center;gap:10px;
text-decoration:none;color:inherit;transition:background var(--transition);
}
.v2-feedback-q-link:hover{background:var(--surface3);}
.v2-feedback-q-ico{font-size:18px;flex-shrink:0;}
.v2-feedback-q-title{
font-family:var(--font-head);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;
}
.v2-feedback-q-sub{font-size:11px;color:var(--text3);}
@media(max-width:480px){.v2-feedback-quick-links{grid-template-columns:1fr;}}
.v2-feedback-sent-page .v2-feedback-success-card{
margin-top:2px;background:var(--surface);border:1.5px solid var(--border);border-top:4px solid var(--teal);
padding:40px 36px;text-align:center;max-width:440px;margin-left:auto;margin-right:auto;
}
.v2-feedback-success-ico{font-size:52px;display:block;margin-bottom:16px;}
.v2-feedback-success-title{
font-family:var(--font-head);font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
margin:0 0 8px;
}
.v2-feedback-success-accent{color:var(--teal);}
.v2-feedback-success-sub{font-size:14px;color:var(--text2);line-height:1.65;margin:0 0 28px;}
.v2-feedback-success-btn{width:100%;justify-content:center;}
/* V2 player results (/v2/u//results/) */
.v2-player-results{
max-width:860px;margin-left:auto;margin-right:auto;
padding-bottom:calc(88px + env(safe-area-inset-bottom));
}
.v2pr-topbar{
background:var(--surface);border-bottom:1.5px solid var(--border);border-top:1px solid var(--border2);
}
.v2pr-topbar-inner{
display:flex;align-items:center;justify-content:space-between;min-height:46px;
padding-left:var(--v2-gutter-x-mobile);padding-right:var(--v2-gutter-x-mobile);
}
@media(min-width:640px){
.v2pr-topbar-inner{padding-left:var(--v2-gutter-x);padding-right:var(--v2-gutter-x);}
}
.v2pr-back{
display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;color:var(--text3);transition:color var(--transition);
}
.v2pr-back:hover{color:var(--red);}
.v2pr-badge{
display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;
text-transform:uppercase;letter-spacing:.07em;padding:5px 12px;
clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(255,229,0,.25);
}
.v2pr-page-hd{
background:var(--surface);border-bottom:1.5px solid var(--border);border-left:4px solid var(--yellow);
position:relative;overflow:hidden;
}
.v2pr-stripes{
position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--stripe) 7px,var(--stripe) 8px);
}
.v2pr-page-hd-inner{
position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;padding:20px var(--v2-gutter-x-mobile);
}
@media(min-width:640px){
.v2pr-page-hd-inner{padding-left:var(--v2-gutter-x);padding-right:var(--v2-gutter-x);}
}
.v2pr-page-hd-left{display:flex;align-items:center;gap:14px;}
.v2pr-page-hd-av{
width:48px;height:48px;border-radius:50%;border:2px solid var(--border);overflow:hidden;flex-shrink:0;
}
.v2pr-page-hd-av img{width:100%;height:100%;object-fit:cover;}
.v2pr-page-hd-av-fallback{
width:100%;height:100%;background:linear-gradient(135deg,var(--red),#FF6B35);
display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;
}
.v2pr-page-hd-title{
font-family:var(--font-head);font-size:clamp(16px,2.5vw,20px);font-weight:900;text-transform:uppercase;
letter-spacing:-.02em;margin:0 0 3px;
}
.v2pr-page-hd-handle{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin:0;}
.v2pr-page-hd-stats{display:flex;gap:0;}
.v2pr-page-hd-stat{padding:8px 16px;text-align:center;border-left:1px solid var(--border);}
.v2pr-page-hd-stat:first-child{border-left:none;padding-left:0;}
.v2pr-page-hd-stat-n{font-family:var(--font-mono);font-size:20px;font-weight:700;line-height:1;margin-bottom:2px;}
.v2pr-page-hd-stat-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
.v2pr-stats-bar-wrap{background:var(--bg-alt);border-bottom:1px solid var(--border);}
.v2pr-stats-bar{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
max-width:860px;margin:0 auto;
}
.v2pr-stats-bar-item{background:var(--bg);padding:14px 16px;text-align:center;}
.v2pr-stats-bar-n{font-family:var(--font-mono);font-size:22px;font-weight:700;line-height:1;margin-bottom:3px;}
.v2pr-stats-bar-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
@media(max-width:480px){.v2pr-stats-bar{grid-template-columns:repeat(2,1fr);}}
.v2pr-filters{background:var(--bg-alt);border-bottom:1.5px solid var(--border);}
.v2pr-filters-inner{
display:flex;align-items:center;gap:8px;max-width:860px;margin:0 auto;padding:12px var(--v2-gutter-x-mobile);
}
@media(min-width:640px){
.v2pr-filters-inner{padding-left:var(--v2-gutter-x);padding-right:var(--v2-gutter-x);}
}
.v2pr-sel-wrap{position:relative;flex:1;max-width:220px;}
.v2pr-sel-wrap::after{
content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text3);
pointer-events:none;font-size:11px;
}
.v2pr-sel{
width:100%;padding:9px 32px 9px 12px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text);
font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
outline:none;appearance:none;-webkit-appearance:none;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
transition:border-color var(--transition);cursor:pointer;
}
.v2pr-sel:focus{border-color:var(--red);}
.v2pr-filter-btn{
display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;padding:9px 14px;background:var(--surface2);border:1.5px solid var(--border);
color:var(--text2);cursor:pointer;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
transition:all var(--transition);
}
.v2pr-filter-btn:hover{border-color:var(--red);color:var(--red);}
.v2pr-results-list{display:flex;flex-direction:column;gap:2px;padding:16px 0;}
.v2pr-match-card{
background:var(--surface);border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);
position:relative;overflow:hidden;transition:background var(--transition);
}
.v2pr-match-card:hover{background:var(--surface2);}
.v2pr-match-card.win .v2pr-match-sb,.v2pr-match-card.win .v2pr-match-meta{border-left:4px solid var(--teal);}
.v2pr-match-card.loss .v2pr-match-sb,.v2pr-match-card.loss .v2pr-match-meta{border-left:4px solid var(--red);}
.v2pr-match-sb{
display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;cursor:pointer;
}
.v2pr-match-team{
min-width:0;padding:16px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
position:relative;overflow:visible;
}
.v2pr-match-team.winner{background:linear-gradient(160deg,rgba(0,255,204,.06) 0%,var(--bg-alt) 100%);}
.v2pr-match-team.loser{background:var(--bg-alt);opacity:.88;}
.v2pr-match-team.mine.winner{background:linear-gradient(160deg,rgba(0,255,204,.10) 0%,rgba(0,255,204,.03) 100%);}
.v2pr-match-team.mine.loser{background:linear-gradient(160deg,rgba(255,61,61,.08) 0%,rgba(255,61,61,.02) 100%);opacity:1;}
.v2pr-av-stack{display:flex;align-items:center;}
.v2pr-av-stack-item{
width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;color:#fff;border:2px solid var(--bg-alt);margin-left:-10px;flex-shrink:0;
background:linear-gradient(135deg,var(--surface3),var(--border));
}
.v2pr-av-stack-item:first-child{margin-left:0;}
.v2pr-av-stack-item.is-me{border-color:var(--text);}
.v2pr-match-team.mine.winner .v2pr-av-stack-item.is-me{border-color:var(--teal);}
.v2pr-match-team.mine.loser .v2pr-av-stack-item.is-me{border-color:var(--red);}
.v2pr-av-stack-more{
width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:9px;font-weight:800;color:var(--red);background:var(--red-dim);
border:2px solid rgba(255,61,61,.3);margin-left:-10px;flex-shrink:0;
}
.v2pr-team-badge{
display:none;
align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;padding:5px 12px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.v2pr-match-team.mine .v2pr-team-badge{display:inline-flex;}
.v2pr-team-badge.win{background:var(--teal);color:#0A0E1A;}
.v2pr-team-badge.loss{background:var(--surface3);color:var(--text3);border:1px solid var(--border);}
.v2pr-match-score-col{
background:var(--bg-alt);padding:16px 12px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:0;border-left:1px solid var(--border2);border-right:1px solid var(--border2);min-width:100px;
}
.v2pr-match-score-nums{display:flex;align-items:baseline;gap:5px;margin-bottom:9px;}
.v2pr-msn{font-family:var(--font-mono);font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1;}
.v2pr-msn.win{color:var(--red);}
.v2pr-msn.lose{color:var(--text3);}
.v2pr-mss{font-family:var(--font-mono);font-size:18px;color:var(--text3);line-height:1;}
.v2pr-match-sets{display:flex;flex-direction:column;gap:3px;width:100%;}
.v2pr-match-set{font-family:var(--font-mono);font-size:10px;color:var(--text3);text-align:center;white-space:nowrap;}
.v2pr-match-set b{color:var(--text2);font-weight:600;}
.v2pr-match-set-empty{opacity:.6;}
.v2pr-match-expand{
display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--font-mono);font-size:9px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-top:9px;transition:color var(--transition);
}
.v2pr-match-sb:hover .v2pr-match-expand{color:var(--red);}
.v2pr-chevron{transition:transform .3s;}
.v2pr-match-meta{
display:flex;align-items:center;border-top:1px solid var(--border2);background:var(--bg-alt);
padding:7px 14px;flex-wrap:wrap;gap:4px 0;
}
.v2pr-meta-item{
display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;color:var(--text3);
white-space:nowrap;
}
.v2pr-meta-item+.v2pr-meta-item::before{content:'·';margin:0 6px;color:var(--border);}
.v2pr-meta-link{
font-family:var(--font-mono);font-size:10px;color:var(--text3);transition:color var(--transition);
margin-left:auto;white-space:nowrap;padding-left:8px;
}
.v2pr-meta-link:hover{color:var(--red);}
.v2pr-match-details{border-top:1px solid var(--border2);}
.v2pr-match-details[hidden]{display:none!important;}
.v2pr-ft-teams{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--border);}
.v2pr-ft-col{background:var(--bg-alt);display:flex;flex-direction:column;}
.v2pr-ft-col-left{border-right:1px solid var(--border);}
.v2pr-ft-col-head{
font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
padding:9px 14px;border-bottom:1px solid var(--border2);color:var(--text3);
}
.v2pr-ft-player-list{display:flex;flex-direction:column;}
.v2pr-ft-player{
display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--border2);gap:6px;
}
.v2pr-ft-player:last-child{border-bottom:none;}
.v2pr-ft-player-left{display:flex;align-items:center;gap:8px;min-width:0;}
.v2pr-ft-av{
width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:800;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--surface3),var(--border));
}
.v2pr-ft-av.is-me{box-shadow:0 0 0 2px var(--teal);}
.v2pr-ft-col-right .v2pr-ft-av.is-me{box-shadow:0 0 0 2px var(--red);}
.v2pr-ft-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2pr-ft-me{font-family:var(--font-mono);font-size:8px;font-weight:700;color:var(--teal);margin-left:4px;text-transform:uppercase;}
.v2pr-ft-col-right .v2pr-ft-me{color:var(--red);}
.v2pr-ft-stat-none{font-family:var(--font-mono);font-size:11px;color:var(--text3);}
.v2pr-ft-game-link{
display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;font-family:var(--font-mono);
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);
border-top:1px solid var(--border2);background:var(--bg-alt);transition:all var(--transition);
}
.v2pr-ft-game-link:hover{color:var(--red);}
.v2pr-empty{padding:48px 24px;text-align:center;}
.v2pr-empty-ico{font-size:40px;margin-bottom:12px;}
.v2pr-empty-title{
font-family:var(--font-head);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px;
}
.v2pr-empty-sub{font-size:13px;color:var(--text2);}
/* ── V2: мастер создания игры (.cg2-page), токены :root ───────────────── */
.cg2-page {
--cg2-control-height: 44px;
}
.cg2-page .page-wrap {
max-width: 100%;
margin: 0 auto;
padding: 24px 0 100px;
}
.cg2-page .form-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.cg2-page .page-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.cg2-page .page-hd-left {
display: flex;
align-items: center;
gap: 10px;
}
.cg2-page .page-hd-icon {
width: 36px;
height: 36px;
background: var(--red-dim);
border: 1.5px solid var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.cg2-page .page-title {
font-family: var(--font-head);
font-size: clamp(20px, 3vw, 28px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.cg2-page .back-link {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color var(--transition);
}
.cg2-page .back-link:hover {
color: var(--red);
}
.cg2-page .template-banner {
background: var(--yellow-dim);
border: 1.5px solid var(--yellow);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
margin-bottom: 20px;
cursor: pointer;
transition: background var(--transition);
}
.cg2-page .template-banner:hover {
background: rgba(255, 229, 0, 0.18);
}
.cg2-page .template-banner-ico {
font-size: 20px;
flex-shrink: 0;
}
.cg2-page .template-banner-body {
flex: 1;
min-width: 0;
}
.cg2-page .template-banner-title {
font-family: var(--font-head);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--yellow);
margin-bottom: 2px;
}
.cg2-page .template-banner-sub {
font-size: 11px;
color: var(--text2);
line-height: 1.4;
}
.cg2-page .template-banner-arr {
font-size: 12px;
color: var(--yellow);
flex-shrink: 0;
}
.cg2-page .improve-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 8px;
margin-left: 6px;
background: var(--teal-dim);
border: 1px solid var(--teal);
color: var(--teal);
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
vertical-align: middle;
}
.cg2-page .step-card {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-left: 4px solid var(--red);
padding: 24px 0;
}
.cg2-page .step-card-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.cg2-page .step-progress {
margin-bottom: 24px;
}
.cg2-page .step-progress-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.cg2-page .step-num {
font-family: var(--font-head);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.cg2-page .step-name {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cg2-page .step-dots {
display: flex;
align-items: center;
gap: 0;
}
.cg2-page .step-dot {
flex: 1;
height: 4px;
background: var(--border);
transition: background 0.3s;
position: relative;
}
.cg2-page .step-dot + .step-dot {
margin-left: 3px;
}
.cg2-page .step-dot.done {
background: var(--teal);
}
.cg2-page .step-dot.active {
background: var(--red);
}
.cg2-page .cg-step {
display: none;
}
.cg2-page .cg-step.is-active {
display: block;
}
.cg2-page .field {
margin-bottom: 20px;
}
.cg2-page .field-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 8px;
display: block;
}
.cg2-page .field-hint {
font-size: 12px;
color: var(--text3);
margin-top: 6px;
line-height: 1.5;
}
.cg2-page .choice-grid {
display: grid;
gap: 8px;
}
.cg2-page .choice-grid.cols-2 {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
.cg2-page .choice-grid.cols-2 {
grid-template-columns: 1fr;
}
}
/* Тип игры: всегда две кнопки столбиком, как в макете */
.cg2-page .cg-game-type-stack {
grid-template-columns: 1fr;
gap: 10px;
}
.cg2-page .choice-card-v2 {
background: var(--surface2);
border: 1.5px solid var(--border);
padding: 16px;
cursor: pointer;
transition: all var(--transition);
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
display: flex;
align-items: center;
gap: 14px;
text-align: left;
width: 100%;
box-sizing: border-box;
}
.cg2-page .choice-card-v2 .choice-card-icon {
flex-shrink: 0;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.cg2-page .choice-card-v2 .choice-card-icon svg {
width: 32px;
height: 32px;
display: block;
}
.cg2-page .choice-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cg2-page .choice-card-body .choice-card-sub {
margin-bottom: 0;
}
.cg2-page .choice-card-radio {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
transition: border-color var(--transition), background var(--transition);
}
.cg2-page .choice-card-v2.is-selected .choice-card-radio {
border-color: var(--red);
background: var(--surface);
}
.cg2-page .choice-card-v2.is-selected .choice-card-radio::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--red);
}
.cg2-page .choice-card-v2:hover {
border-color: var(--text2);
}
.cg2-page .choice-card-v2.is-selected {
border-color: var(--red);
background: var(--red-dim);
}
.cg2-page .choice-card-title {
font-family: var(--font-head);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 3px;
}
.cg2-page .choice-card-v2.is-selected .choice-card-title {
color: var(--red);
}
.cg2-page .choice-card-sub {
font-size: 12px;
color: var(--text3);
line-height: 1.4;
}
.cg2-page .sport-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 6px;
flex-wrap: wrap;
}
.cg2-page .sport-chip-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--cg2-control-height);
min-height: var(--cg2-control-height);
max-height: var(--cg2-control-height);
font-family: var(--font-head);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 0 14px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
cursor: pointer;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
white-space: nowrap;
line-height: 1.15;
}
.cg2-page .sport-chip-btn:hover {
border-color: var(--text2);
}
.cg2-page .sport-chip-btn.select-btn-active {
background: var(--red-dim);
border-color: var(--red);
color: var(--red);
}
.cg2-page .cg2-seg__btn.select-btn-active {
background: var(--red-dim);
color: var(--red);
font-weight: 700;
}
.cg2-page .num-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cg2-page .num-chip {
box-sizing: border-box;
width: var(--cg2-control-height);
height: var(--cg2-control-height);
min-width: var(--cg2-control-height);
min-height: var(--cg2-control-height);
max-height: var(--cg2-control-height);
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
font-family: var(--font-mono);
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
line-height: 1;
}
.cg2-page .num-chip:hover {
border-color: var(--text2);
}
.cg2-page .num-chip.select-btn-active {
background: var(--red-dim);
border-color: var(--red);
color: var(--red);
}
/* Шире фиксированного num-chip (44px), иначе «Больше» обрезается */
.cg2-page .num-chip.num-chip--more {
width: auto !important;
min-width: 6.75rem;
max-width: none;
flex: 0 0 auto;
min-height: var(--cg2-control-height);
padding: 0 14px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
overflow: visible;
}
.cg2-page .num-chips--extra {
margin-top: 8px;
}
.cg2-page .summary-v2 {
background: var(--surface2);
border: 1.5px solid var(--border);
border-left: 4px solid var(--teal);
padding: 20px;
margin-bottom: 20px;
}
.cg2-page .summary-v2-title {
font-family: var(--font-head);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--teal);
margin-bottom: 14px;
}
.cg2-page .summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.cg2-page .summary-key {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cg2-page .summary-val {
font-size: 13px;
font-weight: 600;
}
.cg2-page .step-footer {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--border);
margin-top: 4px;
}
.cg2-page .step-footer-main {
display: flex;
gap: 8px;
flex: 1;
}
.cg2-page .btn-v2-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 13px;
padding: 13px 26px;
background: transparent;
color: var(--text2);
border: 1.5px solid var(--border);
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
cursor: pointer;
transition: all var(--transition);
}
.cg2-page .btn-v2-ghost:hover {
border-color: var(--red);
color: var(--red);
}
.cg2-page .btn-v2-red {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 13px;
padding: 13px 26px;
background: var(--red);
color: #fff;
border: none;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
cursor: pointer;
transition: all var(--transition);
}
.cg2-page .btn-v2-red:hover {
filter: brightness(1.12);
}
.cg2-page .btn-v2-teal {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 13px;
padding: 13px 26px;
background: var(--teal);
color: #0a0e1a;
border: none;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
cursor: pointer;
transition: all var(--transition);
}
.cg2-page .btn-v2-teal:hover {
filter: brightness(1.1);
}
.cg2-page .step-footer-cancel {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text3);
padding: 8px 0;
cursor: pointer;
background: none;
border: none;
}
.cg2-page .step-footer-cancel:hover {
color: var(--red);
}
.cg2-page #location-modal.modal-overlay {
position: fixed;
inset: 0;
background: var(--overlay);
backdrop-filter: blur(4px);
z-index: 500;
display: none;
align-items: flex-end;
padding: 0;
}
@media (min-width: 600px) {
.cg2-page #location-modal.modal-overlay {
align-items: center;
padding: 24px;
}
}
.cg2-page #location-modal .modal-panel {
width: 100%;
max-height: 90vh;
overflow-y: auto;
background: var(--surface);
border-top: 3px solid var(--red);
padding: 20px;
}
@media (min-width: 600px) {
.cg2-page #location-modal .modal-panel {
max-width: 520px;
margin: 0 auto;
border: 1.5px solid var(--border);
border-left: 4px solid var(--red);
}
}
.cg2-page .cg2-inp {
width: 100%;
padding: 13px 16px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
outline: none;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.cg2-page .cg2-inp:focus {
border-color: var(--red);
}
.cg2-page .cg2-textarea {
width: 100%;
padding: 13px 16px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text);
font-size: 14px;
outline: none;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
resize: vertical;
min-height: 96px;
}
/* —— V2 create game: без Tailwind, только токены —— */
.cg2-page .modal-overlay.cg2-modal-visible {
display: flex !important;
}
.cg2-page #view-map-modal.modal-overlay {
position: fixed;
inset: 0;
background: var(--overlay);
backdrop-filter: blur(4px);
z-index: 500;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.cg2-page #sportLevelModal.modal-overlay {
align-items: center;
justify-content: center;
padding: 24px;
}
.cg2-page .field-label.cg2-label-tight {
margin-bottom: 0;
}
.cg2-page .cg2-level-head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
@media (min-width: 640px) {
.cg2-page .cg2-level-head {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.cg2-page #levelRangeText.cg2-level-caption {
font-size: 14px;
font-weight: 700;
color: var(--teal);
}
/* Уровень игры V2: вариант «Д» — одна строка, раскрытие на границах диапазона */
.cg2-page .cg2-level-range.cg2-level-row-e {
--cg-level-tr: 180ms ease;
display: flex;
align-items: stretch;
width: 100%;
min-height: 0;
border-radius: 0;
overflow: hidden;
border: 1.5px solid var(--border);
background: var(--bg-alt);
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.cg2-page .cg2-level-row-e .cg2-level-btn {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
flex: 1 1 0;
min-width: 0;
height: var(--cg2-control-height);
min-height: var(--cg2-control-height);
max-height: var(--cg2-control-height);
padding: 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.15;
border: none;
border-right: 1px solid var(--border);
border-left: 0;
background: transparent;
color: var(--text2);
cursor: pointer;
transition:
flex 0.25s ease,
width 0.25s ease,
background var(--transition),
color var(--transition);
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.cg2-page .cg2-level-row-e .cg2-level-btn:last-child {
border-right: none;
}
/* Раскрытый сегмент по ширине контента — без пустых полей бирюзы по краям */
.cg2-page .cg2-level-row-e .cg2-level-btn--expand {
flex: 0 1 auto;
width: max-content;
max-width: 100%;
min-width: 0;
font-size: 12px;
}
.cg2-page .cg2-level-row-e .cg2-level-btn-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
min-width: 0;
padding: 0;
box-sizing: border-box;
}
.cg2-page .cg2-level-row-e .cg2-level-btn-label {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: clip;
width: auto;
max-width: 100%;
flex: 0 1 auto;
}
.cg2-page .cg2-level-row-e .cg2-level-name-full {
display: none;
text-transform: none;
}
.cg2-page .cg2-level-row-e .cg2-level-name-short {
display: inline;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.cg2-page .cg2-level-row-e .cg2-level-btn--expand .cg2-level-name-full {
display: inline;
}
.cg2-page .cg2-level-row-e .cg2-level-btn--expand .cg2-level-name-short {
display: none;
}
.cg2-page .cg2-level-row-e .cg2-level-btn:hover:not(.cg2-level-btn--edge):not(.cg2-level-btn--mid) {
background: var(--surface2);
color: var(--text);
}
.cg2-page .cg2-level-row-e .cg2-level-btn--edge {
padding-left: 12px;
padding-right: 12px;
background: var(--teal);
color: #0a0e1a;
font-weight: 800;
}
.cg2-page .cg2-level-row-e .cg2-level-btn--edge .cg2-level-name-full,
.cg2-page .cg2-level-row-e .cg2-level-btn--edge .cg2-level-name-short {
color: #0a0e1a;
}
.cg2-page .cg2-level-row-e .cg2-level-btn--mid {
background: var(--teal-dim);
color: var(--teal);
border-color: var(--border);
font-weight: 800;
}
.cg2-page .cg2-level-row-e .cg2-level-btn--mid .cg2-level-name-full,
.cg2-page .cg2-level-row-e .cg2-level-btn--mid .cg2-level-name-short {
color: var(--teal);
}
.cg2-page .cg2-level-row-e .cg2-level-user-star {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
margin-top: 0;
line-height: 0;
color: var(--yellow);
flex-shrink: 0;
}
.cg2-page .cg2-level-row-e .cg2-level-user-star-svg {
display: block;
}
.cg2-page .cg2-level-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
font-family: var(--font-mono);
font-size: 11px;
}
.cg2-page .cg2-level-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--yellow);
pointer-events: none;
}
.cg2-page .cg2-level-legend-star-svg {
display: block;
flex-shrink: 0;
}
.cg2-page .cg2-level-legend-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--yellow);
}
.cg2-page .cg2-public-hint-ok {
color: var(--teal);
}
.cg2-page .cg2-public-hint-warn {
color: var(--red);
}
.cg2-page .cg2-seg {
display: flex;
flex-wrap: wrap;
gap: 0;
border-radius: 0;
border: 1.5px solid var(--border);
overflow: hidden;
background: var(--surface2);
/* Скошенные края как у полосы «Уровень игры» / num-chip */
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.cg2-page .cg2-seg__btn {
flex: 1 1 auto;
min-width: 0;
padding: 10px 12px;
font-size: 14px;
border: none;
border-right: 1.5px solid var(--border);
background: transparent;
color: var(--text);
cursor: pointer;
font-family: var(--font-body);
transition: background var(--transition), color var(--transition);
}
.cg2-page .cg2-seg__btn:last-child {
border-right: 0;
}
.cg2-page .cg2-seg__btn:hover {
background: var(--surface3);
}
.cg2-page .cg2-sr-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.cg2-page .cg2-toggle-label {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.cg2-page .cg2-toggle-track {
width: 44px;
height: 24px;
border-radius: 999px;
background: var(--surface3);
border: 1.5px solid var(--border);
position: relative;
flex-shrink: 0;
transition: background var(--transition), border-color var(--transition);
}
.cg2-page .cg2-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--text3);
transition: transform 0.2s ease, background var(--transition);
pointer-events: none;
}
.cg2-page .cg2-sr-input:checked + .cg2-toggle-track {
background: var(--red-dim);
border-color: var(--red);
}
.cg2-page .cg2-sr-input:checked + .cg2-toggle-track .cg2-toggle-knob {
transform: translateX(20px);
background: var(--red);
}
.cg2-page .cg2-sr-input:focus-visible + .cg2-toggle-track {
box-shadow: 0 0 0 2px var(--teal);
}
.cg2-page .cg2-toggle-caption {
font-size: 14px;
color: var(--text2);
}
.cg2-page .cg2-stack {
display: flex;
flex-direction: column;
gap: 8px;
}
.cg2-page .cg2-row-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.cg2-page .cg2-mt-3 {
margin-top: 12px;
}
.cg2-page .cg2-time-custom {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.cg2-page .cg2-time-custom {
grid-template-columns: 1fr 1fr;
}
}
.cg2-page .cg2-modal-panel-rel {
position: relative;
}
.cg2-page .cg2-modal-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.cg2-page .cg2-modal-close--inline {
position: relative;
right: auto;
top: auto;
}
.cg2-page .cg2-modal-title-lg {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.cg2-page .cg2-modal-title-md {
font-size: 16px;
font-weight: 700;
}
.cg2-page .cg2-loc-results {
max-height: 10rem;
overflow-y: auto;
font-size: 13px;
margin-bottom: 12px;
}
.cg2-page .cg2-inp-spaced {
margin-bottom: 12px;
}
.cg2-page .cg2-map-box-spaced {
margin-bottom: 12px;
}
.cg2-page .cg2-modal-stack {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
.cg2-page .cg2-flex-between {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.cg2-page .cg2-modal-panel-md {
padding: 20px;
max-width: 28rem;
width: 100%;
}
.cg2-page .cg2-modal-lead {
font-size: 14px;
color: var(--text3);
margin-top: 8px;
line-height: 1.45;
}
.cg2-page .cg2-modal-lead strong,
.cg2-page .cg2-modal-lead .cg2-em {
font-weight: 700;
color: var(--text);
}
.cg2-page .cg2-modal-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.cg2-page .cg2-modal-btns {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.cg2-page .sport-level-modal-btn.cg2-btn-text-normal {
text-transform: none;
justify-content: flex-start;
}
.cg2-page .cg2-suggest-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
border: none;
border-bottom: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 14px;
cursor: pointer;
transition: background var(--transition);
}
.cg2-page .cg2-suggest-item:last-child {
border-bottom: 0;
}
.cg2-page .cg2-suggest-item:hover {
background: var(--surface2);
}
.cg2-page .cg2-muted-msg {
font-size: 14px;
color: var(--text3);
line-height: 1.4;
}
.cg2-page .cg2-error-msg {
font-size: 14px;
color: var(--red);
line-height: 1.4;
}
.cg2-page .cg2-saved-loc {
padding: 12px 14px;
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.cg2-page .cg2-saved-loc:hover {
border-color: var(--text2);
}
.cg2-page .cg2-saved-loc.is-selected {
box-shadow: 0 0 0 2px var(--teal);
border-color: var(--teal);
}
.cg2-page .cg2-saved-loc__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.cg2-page .cg2-saved-loc__main {
min-width: 0;
flex: 1;
}
.cg2-page .cg2-saved-loc__name {
font-weight: 600;
font-size: 14px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cg2-page .cg2-saved-loc__addr {
font-size: 13px;
color: var(--text3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 2px;
}
.cg2-page .cg2-map-pin-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text2);
cursor: pointer;
transition: border-color var(--transition), color var(--transition);
}
.cg2-page .cg2-map-pin-btn:hover {
border-color: var(--red);
color: var(--red);
}
@keyframes cg2-shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
.cg2-page .cg2-shake {
animation: cg2-shake 0.45s ease;
}
.cg2-page .cg2-disabled-preset {
opacity: 0.45;
cursor: not-allowed;
}
.cg2-page #location-modal .cg2-modal-title-lg {
padding-right: 44px;
}
/* ═══════════════════════════════════════════════════════════════════
V2 messenger — макет чатов (список + переписка), scope .pg-messenger
═══════════════════════════════════════════════════════════════════ */
.pg-messenger {
--pg-ms-transition: 180ms ease;
/* Вся сетка «список + чат» не тянется на весь экран на десктопе */
--pg-ms-shell-max: 1120px;
/* Пузыри: как в макете / референсе (светлая тема — крем/серый и розоватый исходящий) */
--pg-ms-bubble-theirs: var(--surface2);
--pg-ms-bubble-mine-bg: var(--red-dim);
--pg-ms-bubble-mine-border: rgba(255, 61, 61, 0.25);
font-family: var(--font-body);
color: var(--text);
min-height: min(70dvh, calc(100dvh - 120px));
width: 100%;
max-width: min(var(--pg-ms-shell-max), calc(100vw - 32px));
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
[data-theme="light"] .pg-messenger {
--pg-ms-bubble-theirs: #efeeec;
--pg-ms-bubble-mine-bg: #f7e5e2;
--pg-ms-bubble-mine-border: rgba(232, 50, 50, 0.22);
}
[data-theme="dark"] .pg-messenger {
--pg-ms-bubble-theirs: var(--surface2);
--pg-ms-bubble-mine-bg: var(--red-dim);
--pg-ms-bubble-mine-border: rgba(255, 61, 61, 0.25);
}
.pg-messenger__grid {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 0;
overflow: hidden;
min-height: min(72dvh, calc(100dvh - 140px));
}
/* Список на фоне страницы (--bg), карточка чата — как в оригинале .page */
.pg-messenger .pg-ms-list {
background: var(--bg);
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.pg-messenger .pg-ms-chat {
background: var(--bg);
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.pg-messenger .search-bar {
background: var(--surface);
border-bottom: 1.5px solid var(--border);
flex-shrink: 0;
}
.pg-messenger .search-bar-inner {
max-width: 100%;
margin: 0;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pg-messenger .search-inp-wrap {
position: relative;
flex: 1;
min-width: 160px;
}
.pg-messenger .search-ico {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text3);
font-size: 14px;
pointer-events: none;
}
.pg-messenger .search-inp {
width: 100%;
padding: 9px 14px 9px 36px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
outline: none;
clip-path: none;
border-radius: 0;
transition: border-color var(--pg-ms-transition);
}
.pg-messenger .search-inp:focus {
border-color: var(--red);
}
.pg-messenger .search-inp::placeholder {
color: var(--text3);
}
.pg-messenger .ftabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.pg-messenger .ftab {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 7px 11px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
cursor: pointer;
clip-path: none;
border-radius: 0;
transition: all var(--pg-ms-transition);
white-space: nowrap;
}
/* Оригинал: .ftab.on — красная обводка и акцент; на светлой — фон «карточки» */
[data-theme="light"] .pg-messenger .ftab.on {
background: var(--surface);
border-color: var(--red);
color: var(--red);
}
[data-theme="dark"] .pg-messenger .ftab.on {
background: var(--red-dim);
border-color: var(--red);
color: var(--red);
}
.pg-messenger .chat-list-wrap {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pg-messenger .chat-row {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 20px;
border-bottom: 1px solid var(--border2);
cursor: pointer;
transition: background var(--pg-ms-transition);
text-decoration: none;
color: inherit;
}
/* Оригинал макета: hover и unread — background var(--surface) */
.pg-messenger .chat-row:hover,
.pg-messenger .chat-row.unread {
background: var(--surface);
}
.pg-messenger .chat-row.game-chat {
border-left: 3px solid var(--teal);
}
.pg-messenger .chat-row.game-chat.unread {
border-left-color: var(--red);
}
.pg-messenger .chat-row.is-active {
background: var(--surface);
box-shadow: inset 3px 0 0 var(--red);
}
.pg-messenger .chat-row.game-chat.is-active {
box-shadow: inset 3px 0 0 var(--teal);
}
.pg-messenger .chat-av {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
position: relative;
background: linear-gradient(135deg, var(--red), #ff6b35);
}
.pg-messenger .chat-av img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.pg-messenger .chat-av-game {
width: 46px;
height: 46px;
background: var(--surface2);
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
clip-path: none;
border-radius: 0;
flex-shrink: 0;
}
.pg-messenger .chat-content {
flex: 1;
min-width: 0;
}
.pg-messenger .chat-name-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 3px;
}
.pg-messenger .chat-name {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pg-messenger .chat-row.unread .chat-name {
font-weight: 800;
}
.pg-messenger .chat-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
flex-shrink: 0;
white-space: nowrap;
}
.pg-messenger .chat-row.unread .chat-time {
color: var(--red);
}
.pg-messenger .chat-preview-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.pg-messenger .chat-preview {
font-size: 13px;
color: var(--text2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pg-messenger .chat-row.unread .chat-preview {
color: var(--text);
}
.pg-messenger .chat-badge {
min-width: 18px;
height: 18px;
background: var(--red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
padding: 0 3px;
}
.pg-messenger .chat-badge.is-hidden {
display: none;
}
.pg-messenger .chat-game-tag {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text3);
margin-bottom: 3px;
}
.pg-messenger .chat-game-tag .tdot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--teal);
flex-shrink: 0;
}
.pg-messenger .chat-game-tag.unread-tag .tdot {
background: var(--red);
}
.pg-messenger .pg-ms-chat {
background: var(--bg);
}
.pg-messenger .chat-hd {
flex-shrink: 0;
background: var(--surface);
border-bottom: 1.5px solid var(--border);
}
.pg-messenger .chat-hd-inner {
max-width: 100%;
margin: 0;
padding: 0 12px;
height: 54px;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
}
.pg-messenger .chat-back {
width: 36px;
height: 36px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
display: flex;
align-items: center;
justify-content: center;
clip-path: none;
border-radius: 0;
cursor: pointer;
flex-shrink: 0;
transition: all var(--pg-ms-transition);
}
.pg-messenger .chat-back:hover {
border-color: var(--red);
color: var(--red);
}
.pg-messenger .chat-hd-av {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
background: linear-gradient(135deg, var(--red), #ff6b35);
}
.pg-messenger .chat-hd-av img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.pg-messenger .chat-hd-av-game {
width: 36px;
height: 36px;
background: var(--surface2);
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
clip-path: none;
border-radius: 0;
flex-shrink: 0;
}
.pg-messenger .chat-hd-info {
flex: 1;
min-width: 0;
}
.pg-messenger .chat-hd-name {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pg-messenger .chat-hd--game .chat-hd-name {
font-family: var(--font-head);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.pg-messenger .chat-hd-sub {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
margin-top: 1px;
}
.pg-messenger .game-banner {
flex-shrink: 0;
background: var(--surface2);
border-bottom: 1.5px solid var(--border);
border-left: 4px solid var(--teal);
}
.pg-messenger .game-banner-inner {
max-width: 100%;
margin: 0;
padding: 9px 12px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-decoration: none;
color: inherit;
transition: background var(--pg-ms-transition);
}
.pg-messenger .game-banner-inner:hover {
background: var(--surface3);
}
.pg-messenger .game-banner-name {
font-family: var(--font-head);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.pg-messenger .game-banner-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
margin-top: 1px;
}
.pg-messenger .game-banner-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.pg-messenger .game-banner-ico {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--info);
color: #fff;
border-radius: 0;
clip-path: none;
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.pg-messenger .chat-hd-btns {
display: flex;
gap: 6px;
flex-shrink: 0;
margin-left: auto;
}
.pg-messenger .chat-hd-btn {
width: 34px;
height: 34px;
padding: 0;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
clip-path: none;
border-radius: 0;
cursor: default;
opacity: 0.55;
transition: all var(--pg-ms-transition);
}
.pg-messenger .chat-hd-btn:not(:disabled) {
cursor: pointer;
opacity: 1;
}
.pg-messenger .chat-hd-btn:not(:disabled):hover {
border-color: var(--red);
color: var(--red);
}
.pg-messenger a.chat-back {
text-decoration: none;
color: inherit;
}
.pg-messenger .msgs-wrap {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 12px 0;
min-height: 0;
background: var(--bg);
}
.pg-messenger .msgs-inner {
max-width: 100%;
margin: 0;
padding: 0 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
box-sizing: border-box;
}
/* Перекрываем глобальные .msg / .msg-bubble (clip-path, max-width:72%) из блока legacy-чата */
.pg-messenger .msg {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 8px;
margin-bottom: 2px;
max-width: min(520px, 100%);
width: -moz-fit-content;
width: fit-content;
}
.pg-messenger .msg.me {
flex-direction: row-reverse;
align-self: flex-end;
}
.pg-messenger .msg.other {
align-self: flex-start;
}
/* Колонка с пузырём не забирает оставшуюся ширину ряда */
.pg-messenger .msg > div:not(.msg-av) {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
.pg-messenger .msg-av {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
background: var(--info);
}
.pg-messenger .msg-bubble {
max-width: min(420px, 100%);
padding: 9px 13px;
line-height: 1.55;
font-size: 14px;
clip-path: none;
}
/* Прямоугольные пузыри (без скруглений и без clip-path из глобальных .msg) */
.pg-messenger .msg-bubble.theirs {
background: var(--pg-ms-bubble-theirs);
border: 1px solid var(--border);
border-radius: 0;
}
.pg-messenger .msg-bubble.mine {
background: var(--pg-ms-bubble-mine-bg);
border: 1px solid var(--pg-ms-bubble-mine-border);
border-radius: 0;
}
.pg-messenger .msg-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
margin-top: 3px;
}
.pg-messenger .msg-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
}
.pg-messenger .msg-check {
font-size: 11px;
color: var(--text3);
}
.pg-messenger .msg-check.read {
color: var(--teal);
}
/* Оригинал макета: системные и дата */
.pg-messenger .msg-sys {
text-align: center;
margin: 8px 0;
}
.pg-messenger .msg-sys span {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
background: var(--surface2);
border: 1px solid var(--border2);
padding: 4px 12px;
border-radius: 0;
}
.pg-messenger .msg-date {
text-align: center;
margin: 10px 0 6px;
}
.pg-messenger .msg-date span {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text3);
background: var(--bg-alt);
padding: 3px 10px;
border: 1px solid var(--border2);
border-radius: 0;
}
.pg-messenger .input-bar {
flex-shrink: 0;
box-sizing: border-box;
background: var(--surface);
border-top: 1.5px solid var(--border);
padding: 10px 12px;
padding-bottom: max(10px, calc(10px + env(safe-area-inset-bottom, 0px)));
}
.pg-messenger .input-bar-inner {
max-width: 100%;
margin: 0;
display: flex;
align-items: flex-end;
gap: 8px;
box-sizing: border-box;
}
.pg-messenger .input-attach {
width: 36px;
height: 36px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
clip-path: none;
border-radius: 0;
cursor: pointer;
flex-shrink: 0;
}
.pg-messenger .input-field {
flex: 1;
min-height: 36px;
max-height: 120px;
padding: 8px 13px;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
outline: none;
resize: none;
overflow-y: auto;
clip-path: none;
border-radius: 0;
line-height: 1.5;
}
.pg-messenger .input-field:focus {
border-color: var(--red);
}
.pg-messenger .input-field:disabled {
opacity: 0.5;
}
.pg-messenger .input-send {
width: 36px;
height: 36px;
background: var(--red);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
clip-path: none;
border-radius: 0;
cursor: pointer;
flex-shrink: 0;
border: none;
}
.pg-messenger .input-send:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.pg-messenger .pg-ms-placeholder {
padding: 48px 20px;
text-align: center;
color: var(--text3);
font-size: 14px;
}
.pg-messenger .pg-ms-empty-rules {
max-width: 400px;
margin: 24px auto;
padding: 20px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 0;
text-align: left;
}
@media (max-width: 900px) {
/* Мессенджер на всю ширину колонки (без боковых gutter .v2-shell-content) */
.v2-shell-content:has(#pgMessengerRoot) {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.pg-messenger {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.pg-messenger__grid {
grid-template-columns: 1fr;
/* Без искусственного потолка 80dvh — иначе под чатом остаётся пустота */
min-height: calc(100dvh - 132px);
}
.pg-messenger.pg-messenger--mobile-chat .pg-ms-list {
display: none;
}
.pg-messenger.pg-messenger--mobile-chat .pg-ms-chat {
display: flex;
}
.pg-messenger:not(.pg-messenger--mobile-chat) .pg-ms-chat {
display: none;
}
.pg-messenger:not(.pg-messenger--mobile-chat) .pg-ms-list {
display: flex;
}
}
@media (min-width: 901px) {
.pg-messenger .chat-back {
display: none;
}
.pg-messenger .pg-ms-list,
.pg-messenger .pg-ms-chat {
display: flex;
}
}
/* Полноэкранный чат на мобилке: скрыть шапку и нижнюю навигацию V2 */
body.v2-page.pg-messenger-chat-open > nav.nav {
display: none !important;
}
body.v2-page.pg-messenger-chat-open .v2-mob-nav {
display: none !important;
}
body.v2-page.pg-messenger-chat-open .v2-shell-foot {
display: none !important;
}
/* Полноэкранный чат: высота корня; overflow не режем на html — иначе iOS после клавиатуры
оставляет смещение layout viewport без возможности прокрутки (шапка «уезжает» вверх). */
html.pg-messenger-chat-open {
height: 100%;
min-height: -webkit-fill-available;
overflow-x: hidden;
}
body.v2-page.pg-messenger-chat-open {
height: 100%;
min-height: -webkit-fill-available;
max-height: 100%;
overflow: hidden;
overscroll-behavior: none;
display: flex;
flex-direction: column;
}
/* Полноэкранный чат на мобилке: убрать отступ под скрытый nav; сверху — safe-area под «чёлку»/статус (viewport-fit=cover). */
body.v2-page.pg-messenger-chat-open main.v2-main {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: 0;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.v2-page.pg-messenger-chat-open .v2-shell:has(#pgMessengerRoot) {
border-width: 0;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.v2-page.pg-messenger-chat-open .v2-shell-content:has(#pgMessengerRoot) {
padding-top: 0;
padding-left: 0;
padding-right: 0;
/* Нижняя навигация скрыта — не резервируем 4.5rem под неё */
padding-bottom: env(safe-area-inset-bottom, 0px);
overflow: hidden;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Высоту не привязываем к visualViewport.height — на iOS это давало рассинхрон с layout viewport
(щель под адресной строкой / «уезд» шапки). Цепочка flex + 100% родителя. */
body.v2-page.pg-messenger-chat-open .pg-messenger {
flex: 1;
min-height: 0;
height: 100%;
max-height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
body.v2-page.pg-messenger-chat-open .pg-messenger__grid {
flex: 1;
min-height: 0;
height: 100%;
max-height: 100%;
grid-template-rows: minmax(0, 1fr);
/* Иначе 1px gap/border сетки даёт «полоску» над/под композером */
border: none;
gap: 0;
background: var(--bg);
}
body.v2-page.pg-messenger-chat-open .pg-messenger__grid > .pg-ms-chat {
min-height: 0;
align-self: stretch;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Градиент оболочки у нижнего края может выглядеть как отдельная полоса */
body.v2-page.pg-messenger-chat-open .v2-shell-content:has(#pgMessengerRoot)::after {
display: none !important;
}
/* Мобильный чат: композер в потоке (flex-shrink: 0), не position:fixed — иначе на iOS Safari
визуальный/layout viewport расходятся: щель над клавиатурой, зазор над нижним баром браузера,
последние сообщения под «плавающей» панелью. Список (.msgs-wrap) flex:1 — занимает всё между шапкой и вводом. */
@media (max-width: 900px) {
body.v2-page.pg-messenger-chat-open .pg-messenger .input-bar {
position: relative;
flex-shrink: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
background: var(--surface);
border-top: none;
z-index: 2;
}
body.v2-page.pg-messenger-chat-open .pg-messenger .msgs-wrap {
flex: 1;
min-height: 0;
}
}
/* ── V2: страница отзывов пользователя (.v2-reviews-page) ───────────────── */
.v2-reviews-page {
margin: 0 calc(-1 * max(var(--v2-gutter-x-mobile), env(safe-area-inset-left)));
width: calc(100% + 2 * max(var(--v2-gutter-x-mobile), env(safe-area-inset-left)));
max-width: none;
}
@media (min-width: 640px) {
.v2-reviews-page {
margin: 0 calc(-1 * var(--v2-gutter-x));
width: calc(100% + 2 * var(--v2-gutter-x));
}
}
.v2-rev-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 14px;
transition: color var(--transition);
}
.v2-rev-back:hover {
color: var(--red);
}
.v2-rev-user-hero {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 20px 0;
}
.v2-rev-user-hero-inner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.v2-rev-user-av {
width: 52px;
height: 52px;
border-radius: 50%;
border: 2px solid var(--border);
overflow: hidden;
flex-shrink: 0;
}
.v2-rev-user-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.v2-rev-user-av-fallback {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--red), #ff6b35);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
color: #fff;
}
.v2-rev-user-info {
flex: 1;
min-width: 0;
}
.v2-rev-user-name {
font-family: var(--font-head);
font-size: 18px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1;
margin-bottom: 3px;
}
.v2-rev-user-handle {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text3);
}
.v2-rev-user-rating {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
}
.v2-rev-user-stars {
display: flex;
gap: 2px;
}
.v2-rev-user-star {
font-size: 13px;
color: var(--yellow);
}
.v2-rev-user-star.empty {
color: var(--surface3);
}
.v2-rev-user-rating-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--yellow);
}
.v2-rev-user-rating-cnt {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
}
.v2-rev-hero-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
.v2-rev-stats-bar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
}
.v2-rev-stat-cell {
background: var(--bg);
padding: 14px 16px;
text-align: center;
}
.v2-rev-stat-n {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
line-height: 1;
margin-bottom: 3px;
}
.v2-rev-stat-l {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.v2-rev-rating-dist {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 20px 0;
}
.v2-rev-rating-dist-inner {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.v2-rev-rating-big {
text-align: center;
flex-shrink: 0;
padding-right: 20px;
border-right: 1px solid var(--border);
}
@media (max-width: 520px) {
.v2-rev-rating-big {
width: 100%;
border-right: 0;
padding-right: 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
}
.v2-rev-rating-big-num {
font-family: var(--font-mono);
font-size: 52px;
font-weight: 700;
color: var(--yellow);
line-height: 1;
margin-bottom: 4px;
}
.v2-rev-rating-big-stars {
display: flex;
gap: 3px;
justify-content: center;
margin-bottom: 4px;
}
.v2-rev-rb-star {
font-size: 16px;
color: var(--yellow);
}
.v2-rev-rb-star.empty {
color: var(--surface3);
}
.v2-rev-rating-big-cnt {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
}
.v2-rev-rating-bars {
flex: 1;
min-width: 200px;
}
.v2-rev-rating-bar-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.v2-rev-rating-bar-row:last-child {
margin-bottom: 0;
}
.v2-rev-rating-bar-lbl {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
width: 8px;
text-align: right;
flex-shrink: 0;
}
.v2-rev-rating-bar-star {
font-size: 10px;
color: var(--yellow);
flex-shrink: 0;
}
.v2-rev-rating-bar-track {
flex: 1;
height: 6px;
background: var(--border);
overflow: hidden;
clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.v2-rev-rating-bar-fill {
height: 100%;
background: var(--yellow);
width: 0%;
transition: width 1s ease;
}
.v2-rev-rating-bar-cnt {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text3);
width: 16px;
text-align: right;
flex-shrink: 0;
}
.v2-rev-mine-hint {
padding: 16px 0;
}
.v2-rev-filters-bar {
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 60px;
z-index: 50;
}
.v2-rev-filters-inner {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 2px solid var(--border);
}
.v2-rev-filters-inner::-webkit-scrollbar {
display: none;
}
.v2-rev-filter-tab {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 13px 16px;
color: var(--text3);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color var(--transition), border-color var(--transition);
}
.v2-rev-filter-tab:hover {
color: var(--text2);
}
.v2-rev-filter-tab.on {
color: var(--red);
border-bottom-color: var(--red);
}
.v2-rev-filter-tab .cnt {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(--surface2);
border-radius: 99px;
font-size: 9px;
margin-left: 5px;
color: var(--text2);
}
.v2-rev-filter-tab.on .cnt {
background: var(--red-dim);
color: var(--red);
}
.v2-rev-sort-wrap {
margin-left: auto;
padding: 8px 16px;
flex-shrink: 0;
}
.v2-rev-sort-btn {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text3);
transition: color var(--transition);
}
.v2-rev-sort-btn:hover {
color: var(--text);
}
.v2-rev-list-wrap {
padding-bottom: 1rem;
}
.v2-rev-card {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 20px 0;
position: relative;
transition: background var(--transition);
}
.v2-rev-card:hover {
background: var(--surface2);
}
.v2-rev-card[data-score="5"] {
border-left: 4px solid var(--yellow);
}
.v2-rev-card[data-score="4"] {
border-left: 4px solid var(--teal);
}
.v2-rev-card[data-score="3"] {
border-left: 4px solid var(--info);
}
.v2-rev-card[data-score="2"] {
border-left: 4px solid var(--text3);
}
.v2-rev-card[data-score="1"] {
border-left: 4px solid var(--red);
}
.v2-rev-card-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
.v2-rev-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.v2-rev-author {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.v2-rev-av {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
}
.v2-rev-av.av-you {
font-size: 11px;
background: var(--surface2);
color: var(--text2);
border: 1px solid var(--border);
}
.v2-rev-av.av-red {
background: linear-gradient(135deg, #ff3d3d, #ff6b35);
}
.v2-rev-av.av-blue {
background: linear-gradient(135deg, #4d7cff, #7b5ea7);
}
.v2-rev-av.av-teal {
background: linear-gradient(135deg, #00ffcc, #4d7cff);
}
.v2-rev-av.av-yellow {
background: linear-gradient(135deg, #ffe500, #ff8c00);
}
.v2-rev-av.av-purple {
background: linear-gradient(135deg, #7b5ea7, #ff3d3d);
}
.v2-rev-author-info {
flex: 1;
min-width: 0;
}
.v2-rev-author-name {
font-family: var(--font-head);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.01em;
margin-bottom: 3px;
}
.v2-rev-author-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.v2-rev-match-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 3px 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text3);
clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
a.v2-rev-match-tag--link:hover {
border-color: var(--red);
color: var(--red);
}
.v2-rev-date {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text3);
}
.v2-rev-stars-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.v2-rev-stars {
display: flex;
gap: 2px;
}
.v2-rev-star {
font-size: 14px;
color: var(--yellow);
}
.v2-rev-star.empty {
color: var(--surface3);
}
.v2-rev-star-val {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--yellow);
}
.v2-rev-text {
font-size: 14px;
color: var(--text2);
line-height: 1.75;
border-left: 3px solid var(--border);
padding-left: 14px;
transition: border-color var(--transition);
}
.v2-rev-card:hover .v2-rev-text {
border-left-color: var(--yellow);
}
.v2-rev-context {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--surface2);
border: 1px solid var(--border);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
cursor: pointer;
transition: border-color var(--transition);
}
a.v2-rev-context:hover {
border-color: var(--red);
}
.v2-rev-context-ico {
font-size: 14px;
flex-shrink: 0;
}
.v2-rev-context-text {
flex: 1;
min-width: 0;
}
.v2-rev-context-name {
font-family: var(--font-head);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v2-rev-context-meta {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text3);
margin-top: 2px;
}
.v2-rev-context-arr {
font-size: 11px;
color: var(--text3);
}
.v2-rev-pair-state {
margin-top: -4px;
}
.v2-rev-chip {
display: inline-flex;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 10px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text3);
border-radius: 999px;
}
.v2-rev-empty {
text-align: center;
padding: 64px 24px;
}
.v2-rev-empty-ico {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.v2-rev-empty-title {
font-family: var(--font-head);
font-size: 18px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.v2-rev-empty-sub {
font-size: 14px;
color: var(--text3);
line-height: 1.6;
}
/* --- Enter result page (V2) — templates/v2/game/enter_result_v2.html --- */
.er-page-wrap {
max-width: 900px;
margin: 0 auto;
padding: 24px 0 48px;
padding-left: var(--v2-gutter-x, 24px);
padding-right: var(--v2-gutter-x, 24px);
}
@media (max-width: 639px) {
.er-page-wrap {
padding-left: var(--v2-gutter-x-mobile, 8px);
padding-right: var(--v2-gutter-x-mobile, 8px);
}
}
.er-page-hd {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.er-page-hd-icon {
width: 36px;
height: 36px;
background: var(--red-dim);
border: 1.5px solid var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
flex-shrink: 0;
}
.er-page-title {
font-family: var(--font-head);
font-size: clamp(20px, 3vw, 28px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.er-page-sub {
font-family: var(--font-mono);
font-size: 11px;
color: var(--red);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 3px;
}
.er-page-sub a {
color: inherit;
text-decoration: none;
}
.er-page-sub a:hover {
text-decoration: underline;
}
.er-section {
background: var(--surface);
border: 1.5px solid var(--border);
border-left: 4px solid var(--border);
padding: 20px 24px;
margin-bottom: 16px;
transition: border-color var(--transition);
}
.er-section.accent-teal {
border-left-color: var(--teal);
}
.er-section.accent-yellow {
border-left-color: var(--yellow);
}
.er-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 16px;
}
.er-players-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.er-player-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
background: var(--surface2);
border: 1.5px solid var(--border);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
font-size: 13px;
font-weight: 600;
color: var(--text2);
text-decoration: none;
}
.er-player-chip:hover {
border-color: var(--teal);
color: var(--teal);
}
.er-player-chip-av {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal), var(--info));
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: #0a0e1a;
flex-shrink: 0;
overflow: hidden;
}
.er-player-chip-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.er-vs-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 600px) {
.er-vs-row {
grid-template-columns: 1fr;
gap: 8px;
}
.er-vs-label {
padding-top: 0;
font-size: 14px;
}
}
.er-vs-label {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 900;
color: var(--text3);
text-align: center;
padding-top: 28px;
letter-spacing: 0.04em;
}
.er-solo-box {
border: 1.5px solid var(--border);
background: var(--surface2);
padding: 14px 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: border-color var(--transition), background var(--transition);
}
.er-solo-box.is-selected {
border-color: var(--teal);
background: var(--teal-dim);
}
.er-solo-label {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 10px;
}
.er-solo-av {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal), var(--info));
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
color: #0a0e1a;
margin-bottom: 10px;
border: 2px solid var(--border);
overflow: hidden;
}
.er-solo-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.er-solo-av.av-alt {
background: linear-gradient(135deg, #7c4dff, var(--info));
}
.er-solo-name {
font-family: var(--font-head);
font-size: 14px;
font-weight: 900;
letter-spacing: -0.01em;
margin-bottom: 3px;
}
.er-solo-handle {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text3);
}
.er-match-card {
background: var(--surface);
border: 1.5px solid var(--border);
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.er-match-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: var(--surface2);
}
.er-match-card-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.er-match-del {
width: 32px;
height: 32px;
background: var(--red-dim);
border: 1.5px solid var(--red);
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
cursor: pointer;
flex-shrink: 0;
}
.er-match-del:hover {
background: var(--red);
color: #fff;
}
.er-match-card-body {
padding: 20px;
}
.team-box {
border: 1.5px solid var(--border);
background: var(--surface2);
padding: 14px 16px;
transition: border-color var(--transition), background var(--transition);
}
.team-box.team-selected {
border-color: var(--teal);
background: var(--teal-dim);
}
.team-box-label {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 8px;
}
.team-box-name {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-head);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--teal);
margin-bottom: 10px;
}
.team-box-players {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.team-box-player {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--surface);
border: 1.5px solid var(--border);
font-size: 12px;
color: var(--text2);
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.team-box-player-av {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
color: #0a0e1a;
flex-shrink: 0;
overflow: hidden;
background: linear-gradient(135deg, var(--teal), var(--info));
}
.team-box-player-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-box-btn {
width: 100%;
padding: 9px 14px;
background: transparent;
border: 1.5px solid var(--border);
color: var(--text3);
font-family: var(--font-head);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
cursor: pointer;
text-align: center;
}
.team-box-btn:hover {
border-color: var(--teal);
color: var(--teal);
}
.er-team-placeholder {
color: var(--text3);
font-size: 13px;
margin-bottom: 12px;
}
.er-sets-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 12px;
}
.er-set-row {
display: grid;
grid-template-columns: 28px 1fr 28px 1fr 36px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
@media (max-width: 600px) {
.er-set-row {
grid-template-columns: 24px 1fr 24px 1fr 32px;
gap: 6px;
}
}
.er-set-num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text3);
font-weight: 700;
text-align: right;
}
.er-set-colon {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 900;
color: var(--text3);
text-align: center;
}
.er-set-inp {
width: 100%;
padding: 11px 14px;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
outline: none;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: border-color var(--transition), color var(--transition);
text-align: center;
}
.er-set-inp:focus {
border-color: var(--teal);
}
.er-set-inp.is-win {
border-color: var(--teal);
color: var(--teal);
}
.er-set-inp.is-lose {
border-color: var(--text3);
color: var(--text3);
}
.er-set-del {
width: 32px;
height: 36px;
background: var(--red-dim);
border: 1.5px solid var(--red);
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
transition: all var(--transition);
cursor: pointer;
flex-shrink: 0;
}
.er-set-del:hover {
background: var(--red);
color: #fff;
}
.er-add-set {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: transparent;
border: 1.5px dashed var(--border);
color: var(--text3);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
cursor: pointer;
margin-top: 4px;
}
.er-add-set:hover {
border-color: var(--teal);
color: var(--teal);
}
.er-bottom-bar {
background: var(--surface);
border: 1.5px solid var(--border);
border-left: 4px solid var(--red);
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
}
@media (max-width: 600px) {
.er-bottom-bar {
flex-direction: column;
}
.er-bottom-bar .btn {
width: 100%;
justify-content: center;
}
}
.er-team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 4px;
}
@media (max-width: 680px) {
.er-team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 440px) {
.er-team-grid {
grid-template-columns: 1fr;
}
}
.er-team-manage-card {
background: var(--surface2);
border: 1.5px solid var(--border);
padding: 14px;
cursor: pointer;
transition: all var(--transition);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.er-team-manage-card:hover {
border-color: var(--teal);
}
.er-team-manage-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.er-team-manage-name {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-head);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--teal);
}
.er-team-manage-actions {
display: flex;
gap: 4px;
}
.er-team-manage-actions button {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
transition: all var(--transition);
cursor: pointer;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text3);
}
.er-team-manage-actions button:hover {
border-color: var(--yellow);
color: var(--yellow);
}
.er-team-manage-actions button.er-team-manage-del {
background: var(--red-dim);
color: var(--red);
}
.er-team-manage-actions button.er-team-manage-del:hover {
background: var(--red);
color: #fff;
}
.er-team-manage-players {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.er-team-manage-player {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 4px;
background: var(--surface);
border: 1.5px solid var(--border);
font-size: 11px;
color: var(--teal);
clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.er-create-team-card {
background: var(--surface);
border: 1.5px dashed var(--border);
padding: 14px;
cursor: pointer;
transition: all var(--transition);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 90px;
color: var(--text3);
}
.er-create-team-card:hover {
border-color: var(--teal);
color: var(--teal);
}
.er-create-team-plus {
width: 32px;
height: 32px;
border: 1.5px solid currentColor;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.er-create-team-lbl {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.er-alert {
border: 1.5px solid var(--yellow);
background: var(--yellow-dim);
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 12px;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.er-alert-ico {
font-size: 20px;
flex-shrink: 0;
}
.er-detail-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 0 0;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text3);
cursor: pointer;
border: none;
background: none;
transition: color var(--transition);
}
.er-detail-toggle:hover {
color: var(--teal);
}
.er-detail-toggle .er-detail-arrow {
display: inline-block;
transition: transform 0.3s;
font-size: 10px;
}
.er-detail-toggle.is-open .er-detail-arrow {
transform: rotate(180deg);
}
.er-detail-panel {
border-top: 1px solid var(--border);
overflow: hidden;
max-height: 0;
transition: max-height 0.35s ease;
}
.er-detail-panel.is-open {
max-height: 400px;
}
.er-detail-inner {
padding: 16px 20px;
}
.er-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
}
.er-detail-col {
background: var(--surface);
padding: 14px 16px;
}
.er-detail-col-title {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 12px;
}
.er-detail-col-title.lose {
color: var(--red);
}
.er-detail-col-title.win {
color: var(--teal);
}
.er-detail-player-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border2);
}
.er-detail-player-row:last-child {
border-bottom: none;
}
.er-detail-player-av {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #0a0e1a;
flex-shrink: 0;
border: 2px solid var(--border);
overflow: hidden;
background: linear-gradient(135deg, var(--teal), var(--info));
}
.er-detail-player-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.er-detail-player-name {
flex: 1;
font-size: 13px;
font-weight: 600;
}
.er-detail-you {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--teal);
color: #0a0e1a;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
margin-left: 4px;
}
.er-player-select-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
overflow-y: auto;
}
.er-player-select-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--surface2);
border: 1.5px solid var(--border);
cursor: pointer;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
}
.er-player-select-item:hover {
border-color: var(--teal);
}
.er-player-select-item.is-selected {
border-color: var(--teal);
background: var(--teal-dim);
}
.er-player-select-av {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
color: #0a0e1a;
flex-shrink: 0;
background: linear-gradient(135deg, var(--teal), var(--info));
overflow: hidden;
}
.er-player-select-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.er-player-select-name {
flex: 1;
font-size: 14px;
font-weight: 600;
}
.er-team-select-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 300px;
overflow-y: auto;
}
.er-team-select-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--surface2);
border: 1.5px solid var(--border);
cursor: pointer;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
transition: all var(--transition);
}
.er-team-select-item:hover {
border-color: var(--teal);
}
.er-team-select-item.is-selected {
border-color: var(--teal);
background: var(--teal-dim);
}
.er-team-select-name {
font-family: var(--font-head);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--teal);
margin-bottom: 3px;
}
.er-team-select-players {
font-size: 12px;
color: var(--text3);
}
.modal.er-enter-result-modal {
border-left-color: var(--teal);
}
.score-block.hidden {
display: none !important;
}
.remove-match-btn.hidden {
display: none !important;
}
/* ── V2 ONBOARDING ─────────────────────────────────── */
.v2-ob-page {
padding: 28px 0 48px;
}
.v2-ob-wrap {
max-width: 760px;
margin: 0 auto;
padding: 0 12px;
}
.v2-ob-progress {
height: 4px;
background: var(--surface2);
margin-bottom: 24px;
overflow: hidden;
}
.v2-ob-progress > span {
display: block;
height: 100%;
background: var(--red);
transition: width 220ms ease;
}
.v2-ob-steps {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.v2-ob-steps.is-two {
grid-template-columns: auto 1fr auto;
}
.v2-ob-step {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text3);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.v2-ob-step-num {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--border);
background: var(--surface2);
font-size: 11px;
font-weight: 800;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.v2-ob-step.is-active {
color: var(--text);
}
.v2-ob-step.is-active .v2-ob-step-num {
background: var(--red);
border-color: var(--red);
color: #fff;
}
.v2-ob-step.is-done {
color: var(--teal);
}
.v2-ob-step.is-done .v2-ob-step-num {
border-color: var(--teal);
background: var(--teal-dim);
color: var(--teal);
}
.v2-ob-sep {
height: 1px;
background: var(--border);
}
.v2-ob-sep.is-done {
background: var(--teal);
}
.v2-ob-head {
margin-bottom: 20px;
}
.v2-ob-kicker {
margin-bottom: 8px;
color: var(--red);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.v2-ob-title {
margin-bottom: 8px;
font-family: var(--font-head);
font-size: clamp(30px, 5vw, 42px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1.02;
}
.v2-ob-sub {
color: var(--text2);
font-size: 14px;
line-height: 1.65;
}
.v2-ob-card {
border: 1.5px solid var(--border);
background: var(--surface);
padding: 22px;
}
.v2-ob-alert {
margin-bottom: 14px;
padding: 10px 12px;
border: 1.5px solid var(--red);
background: var(--red-dim);
color: var(--red);
font-size: 13px;
line-height: 1.5;
}
.v2-ob-avatar-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border2);
}
.v2-ob-avatar-circle {
width: 80px;
height: 80px;
border-radius: 999px;
border: 2px dashed var(--border);
background: var(--surface2);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
transition: border-color var(--transition), background var(--transition);
}
.v2-ob-avatar-circle:hover {
border-color: var(--red);
background: var(--red-dim);
}
.v2-ob-avatar-placeholder {
color: var(--text3);
font-size: 24px;
}
.v2-ob-avatar-preview {
width: 100%;
height: 100%;
object-fit: cover;
}
.v2-ob-avatar-meta {
min-width: 0;
}
.v2-ob-avatar-title {
margin-bottom: 4px;
font-family: var(--font-head);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.v2-ob-avatar-sub {
color: var(--text3);
font-size: 12px;
line-height: 1.55;
}
.v2-ob-grid {
display: grid;
gap: 12px;
}
.v2-ob-grid-2 {
grid-template-columns: 1fr 1fr;
}
.v2-ob-field {
margin-bottom: 12px;
}
.v2-ob-label {
display: block;
margin-bottom: 6px;
color: var(--text3);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.v2-ob-input,
.v2-ob-select,
.v2-ob-textarea {
width: 100%;
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
outline: none;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
transition: border-color var(--transition);
}
.v2-ob-input,
.v2-ob-select {
padding: 12px 14px;
}
.v2-ob-textarea {
min-height: 96px;
resize: vertical;
line-height: 1.6;
padding: 12px 14px;
}
.v2-ob-input:focus,
.v2-ob-select:focus,
.v2-ob-textarea:focus {
border-color: var(--red);
}
.v2-ob-field.has-error .v2-ob-input,
.v2-ob-field.has-error .v2-ob-select,
.v2-ob-field.has-error .v2-ob-textarea {
border-color: var(--red);
}
.v2-ob-error {
margin-top: 6px;
color: var(--red);
font-size: 12px;
}
.v2-ob-radio-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.v2-ob-radio-card {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
cursor: pointer;
}
.v2-ob-radio-card input {
accent-color: var(--red);
}
.v2-ob-radio-card.is-on {
border-color: var(--red);
background: var(--red-dim);
color: var(--text);
}
.v2-ob-city-suggest {
margin-top: 6px;
border: 1.5px solid var(--border);
background: var(--surface2);
max-height: 200px;
overflow-y: auto;
}
.v2-ob-chip-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 14px;
}
.v2-ob-chip {
padding: 6px 12px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.v2-ob-chip:hover {
border-color: var(--text2);
}
.v2-ob-chip.is-on {
border-color: var(--red);
background: var(--red-dim);
color: var(--red);
}
.v2-ob-sport-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.v2-ob-sport-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 170px 36px;
gap: 8px;
align-items: end;
}
.v2-ob-sport-row .v2-ob-field {
margin-bottom: 0;
}
.v2-ob-remove {
height: 42px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text3);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.v2-ob-remove:hover {
border-color: var(--red);
color: var(--red);
background: var(--red-dim);
}
.v2-ob-add {
margin-top: 14px;
padding: 10px 14px;
border: 1.5px dashed var(--border);
background: var(--surface2);
color: var(--text2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.v2-ob-add:hover {
border-color: var(--teal);
color: var(--teal);
}
.v2-ob-foot {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border2);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.v2-ob-foot-note {
color: var(--text3);
font-size: 12px;
}
@media (max-width: 740px) {
.v2-ob-avatar-row {
align-items: flex-start;
}
.v2-ob-grid-2 {
grid-template-columns: 1fr;
}
.v2-ob-sport-row {
grid-template-columns: 1fr;
}
.v2-ob-remove {
height: 38px;
}
.v2-ob-foot {
flex-direction: column;
align-items: stretch;
}
}