* , *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; align-content: center; margin: 0; background: var(--tg-theme-bg-color, #EFF6FF); color: var(--tg-theme-text-color, black); }
.container { padding: 12px 12px 12px; margin-top: 80px ;}
h1 { font-size: 20px; margin: 0 0 12px; }
label { display: block; font-size: 14px; }
input { width: 100%; padding: 8px 8px; border-radius: 10px; border: 1px solid #2a2a2c; background: #141416; color: black; outline: none; }
button { margin-top: 0px; width: 100%; padding: 8px; border: none; border-radius: 10px; background: #28a745; color: #fff; font-weight: 600; cursor: pointer; }
#status { margin-top: 10px; font-size: 14px; min-height: 20px; }
.low-text {font-family: "Nunito", sans-serif; font-weight: 700; font-size: 12px; color: #ffffff;}
.low-text-blue {font-family: "Nunito", sans-serif; font-weight: 700; font-size: 12px; color: #0064D6;}
/*Стили верхних кнопок*/
.app-header { background: var(--tg-theme-secondary-bg-color, #EFF6FF); padding: 12px 12px; position: fixed; top: 0; height: 70px; width: 100%; box-shadow: 0px 0px 30px 0px #7e9cbe7a;}
.topbar { display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; border-radius: 0; height: 46px;}
.topbar .right { display: flex; gap: 12px; flex-shrink: 1; min-width: 0; height: auto;}
/*Стили кнопок навигации*/
.menu-btn {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #000000; background: transparent; border: none; border-radius: 0px; padding: 8px 0px; }
.menu-btn-container {display: inline-block; padding: 0 px; }
.menubar { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: var(--figma-app-width, 420px); background: #EFF6FF; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; box-sizing: border-box; padding: 8px 14px 10px; }
/*Иконки*/
.tab-btn-icon { width: 26px; height: 26px; }
.big-btn-icon {width: 22px; height: 22px;}
/*Блок профиля*/
.avatar-img {border-radius: 35px; width: 70px; height: 70px; border: 2px solid #EFF6FF;}
.profile-name {display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 56px; width: auto; padding: 12px 20px 12px 47px; background: #EFF6FF; border-radius: 0px 29px 29px 0px; margin-left: 35px;}
.profile-title { font-size: 12px; color: #6b7280; font-weight: 500; margin-top: 2px; text-align: center; }
[data-theme="dark"] .profile-title { color: #9ca3af; }
.icon-id {width: 12px;}
/*Блок статистики*/
.stat-icon {height: 64px; width: 64px; margin-right: 10px; }
/*Блок контактов*/
.button-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0px;
}
.button-container-sec {
display: flex;
gap: 10px;
}
.social-button { display: flex; align-items: center; justify-content: center; gap: 5px; height: 60px; padding: 0px 0px; background-color: #0064D6; text-decoration: none; color: #fff; border-radius: 10px; font-size: 16px; font-weight: 500;}
.social-button-inverse { display: flex; align-items: center; justify-content: center; height: 60px; gap: 5px; width: 400px; padding: 0px 0px; background-color: #BFD8F5; border-radius: 12px; text-decoration: none; font-size: 16px; font-weight: 500; border: 1px solid #0064D6;}
.hidden { display: none !important; }
/* Wave 8: Smooth state transitions */
[data-tab-panel] { transition: opacity 0.12s ease; }
[data-sub-panel] { transition: opacity 0.12s ease; }
[data-friends-panel] { transition: opacity 0.12s ease, transform 0.12s ease; }
[data-my-panel] { transition: opacity 0.12s ease; }
[data-notif-panel] { transition: opacity 0.12s ease; }
.tab-btn-icon { transition: opacity 0.15s ease, filter 0.15s ease; }
[data-friends-action] { transition: opacity 0.12s ease, visibility 0.12s ease; }
.sub-btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
body { transition: background-color 0.3s ease, color 0.3s ease; }
/* М11: Animated panel transitions */
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
[data-tab-panel]:not(.hidden),
[data-sub-panel]:not(.hidden),
[data-my-panel]:not(.hidden),
[data-friends-panel]:not(.hidden) {
animation: fadeSlideIn 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
[data-tab-panel]:not(.hidden),
[data-sub-panel]:not(.hidden),
[data-my-panel]:not(.hidden),
[data-friends-panel]:not(.hidden) { animation: none; }
}
.brand-left { font-weight: 700; letter-spacing: 0.2px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.topbar-btn { background: transparent; border: 1px solid transparent; color: inherit; padding: 8px 8px; border-radius: 8%; font-size: 13px; white-space: nowrap; }
.app-header .topbar-btn { width: auto; margin-top: 0; }
.app-header .topbar .tab-btn { width: auto; }
.topbar-btn.active { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #fff); border-color: #1d4ed8; }
.app-header .tabs { margin-top: 8px; }
.main-tabs { margin: 4px 0 8px; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tab-btn { width: 42px; height: 42px; background: #7E7E7E; padding: 8px 8px; border-radius: 10px; align-items: center; justify-content: center; gap: 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-btn.active { background: transparent; }
.main-tabs .tab-btn { border: 1px solid #2a2a2c; background: #141416; }
.main-tabs .tab-btn.active { background: var(--tg-theme-button-color, #2563eb); border-color: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #fff); box-shadow: none; border-bottom: 1px solid var(--tg-theme-button-color, #2563eb); }
.subtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; background: rgba(37, 99, 235, 0.1); padding: 8px; border-radius: 12px; border: 1px solid rgba(37, 99, 235, 0.2); }
.sub-btn { background: #1f1f22; border: 1px solid #2a2a2c; padding: 10px 12px; border-radius: 10px; color: #e5e7eb; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; }
.sub-btn.active { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #fff); border-color: var(--tg-theme-button-color, #2563eb); }
/*
.subtabs .seg-btn { border: 1px solid #2a2a2c; background: transparent; }
.subtabs .seg-btn.active { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #fff); border-color: var(--tg-theme-button-color, #2563eb); }
.tabs .seg-btn { border: none; }
.seg-btn { min-width: 92px; white-space: nowrap; overflow: hidden; }
.seg { display: grid; gap: 8px; background: transparent; border: none; border-radius: 0; padding: 0; }
.seg-btn { flex: 1; background: transparent; border: none; padding: 8px 10px; border-radius: 8px; color: #e5e7eb; }
.seg-btn.active { background: #1f1f22; }
*/
.card { border: 1px solid #2a2a2c; border-radius: 12px; padding: 12px; background: #141416; width: 100%; box-sizing: border-box; overflow: hidden; }
.container [data-tab-panel="profile"] .card { margin-bottom: 10px; }
.card .divider { height: 1px; background: #2a2a2c; margin: 8px 0; border-radius: 1px; }
.card-item.clickable { cursor: pointer; }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0; }
.list { border: 1px solid #2a2a2c; border-radius: 12px; overflow: hidden; }
.list .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid #2a2a2c; }
.list .row:last-child { border-bottom: none; }
.list .row.head { font-weight: 600; color: #cbd5e1; background: #1b1b1e; }
.list.cards { border: none; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
.card-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #141416; border: 1px solid #2a2a2c; border-radius: 12px; padding: 12px; }
.card-main { min-width: 0; }
.card-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { color: #9ca3af; font-size: 13px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.card-meta .item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.card-meta .meta-strong { font-weight: 600; color: #e5e7eb; }
.card-meta .item + .item::before { content: '\2022'; margin: 0 4px 0 0; color: #4b5563; }
.card-actions .btn { white-space: nowrap; }
.badge { display: inline-block; padding: 2px 8px; border: 1px solid #2a2a2c; border-radius: 999px; font-size: 12px; color: #cbd5e1; }
.badge-blue { background: #1e3a8a; border-color: #1e40af; color: #e5e7eb; }
.badge-red { background: #7f1d1d; border-color: #991b1b; color: #f3f4f6; }
.btn-ready-off { background: #16a34a; border-color: #15803d; color: #fff; }
.btn-ready-on { background: #374151; border-color: #4b5563; color: #fff; }
.match-panel { margin-top: 10px; }
.match-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.muted { color: #9ca3af; }
.primary { background: #2563eb; }
.secondary { background: #374151; }
.btn { display: inline-block; width: auto; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; margin-top: 0; }
.btn-primary { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #fff); border-color: #1d4ed8; }
.btn-secondary { background: #374151; color: #fff; border-color: #4b5563; }
.btn-danger { background: #b91c1c; color: #fff; border-color: #991b1b; }
.tab-btn, .sub-btn, .seg-btn { width: auto; margin-top: 0; }
.brand-row { display: flex; align-items: center; justify-content: center; padding: 6px 8px; }
.brand { font-weight: 700; font-size: 14px; }
.small { font-size: 12px; }
.actions { display: flex; gap: 8px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.contact-row { display: block; width: 100%; padding: 12px; text-align: left; border-radius: 10px; border: 1px solid #2a2a2c; background: #141416; color: #e5e7eb; text-decoration: none; }
.contact-row:hover { background: #1b1b1e; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { width: min(92vw, 420px); background: #141416; border: 1px solid #2a2a2c; border-radius: 12px; padding: 16px; }
.status { margin-top: 8px; min-height: 18px; font-size: 14px; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 560px) {
.list .row { grid-template-columns: 1.4fr 1fr; grid-auto-rows: auto; }
.card-item { grid-template-columns: 1fr; }
.card-actions { margin-top: 8px; }
}
@media (max-width: 420px) {
.tab-btn, .sub-btn { font-size: 12px; padding: 8px 6px; height: 36px; gap: 2px; }
.topbar-btn { padding: 8px 8px; }
.topbar .right { gap: 12px; }
}
@media (max-width: 360px) {
.tab-btn, .sub-btn { font-size: 11px; padding: 6px 4px; }
.topbar-btn { padding: 4px 5px; font-size: 11px; }
.brand-left { font-size: 13px; }
}
@media (max-width: 320px) {
.tab-btn, .sub-btn { font-size: 10px; padding: 6px 2px; }
.tabs { gap: 4px; }
.topbar-btn { padding: 3px 4px; font-size: 10px; }
.topbar .right { gap: 3px; }
.brand-left { font-size: 12px; }
}
.topbar .topbar-btn.active { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #fff); border-color: #1d4ed8; }
.detail-card { width: min(96vw, 720px); max-height: 88vh; overflow: auto; background: #0f0f11; border: 1px solid #2a2a2c; border-radius: 12px; padding: 14px; }
.detail-head { display: flex; align-items: center; gap: 10px; }
.detail-title { font-weight: 700; font-size: 18px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-tabs { margin-left: auto; display: inline-flex; gap: 6px; }
.head-tabs { flex-shrink: 0; }
.head-tab { padding: 6px 10px; border: 1px solid #2a2a2c; border-radius: 8px; background: #141416; color: #cbd5e1; }
.head-tab.active { background: #1f2937; color: #fff; border-color: #374151; }
.detail-meta { margin: 8px 0 10px; color: #9ca3af; display: flex; flex-wrap: wrap; gap: 8px; font-variant-numeric: tabular-nums; }
.detail-meta .item { display: inline-flex; gap: 4px; }
.detail-actions { margin: 8px 0 12px; }
.participants { margin: 6px 0 12px 18px; }
.participants-table { margin-left: 0; border: 1px solid #2a2a2c; border-radius: 10px; overflow: hidden; }
.pt-row { display: flex; }
.pt-head { background: #141416; font-weight: 600; color: #e5e7eb; }
.pt-col { flex: 1; padding: 8px 10px; border-bottom: 1px solid #2a2a2c; }
.pt-col.name { flex: 2; }
.pt-col.stage { text-align: right; color: #9ca3af; }
.participants-table .pt-row:last-child .pt-col { border-bottom: 0; }
.section-subtitle { font-weight: 600; margin: 6px 0; }
.clickable { cursor: pointer; }
.bracket { margin-top: 10px; overflow-x: auto; width: 100%; }
.br-wrap { display: flex; gap: 24px; padding-bottom: 4px; min-width: max-content; }
.br-col { display: flex; flex-direction: column; gap: 12px; position: relative; }
.br-match { background: #141416; border: 1px solid #2a2a2c; border-radius: 10px; padding: 8px; min-width: 160px; max-width: 200px; position: relative; }
.br-match.me { border-color: #2563eb; }
.br-slot { padding: 4px 8px; height: 24px; line-height: 16px; border-radius: 8px; background: #0d0d0f; border: 1px solid #232325; color: #e5e7eb; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.br-slot:last-child { margin-bottom: 0; }
.br-pair { display: flex; flex-direction: column; gap: 8px; position: relative; }
.br-join { position: relative; height: 18px; display: flex; align-items: center; justify-content: center; }
.br-join::before { content: ''; display: block; width: 2px; height: 100%; background: #2f3338; }
.match-panel { margin-top: 12px; border-top: 1px solid #2a2a2c; padding-top: 10px; }
.match-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.draft-state {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
overflow: visible;
}
.draft-head {
display: grid;
gap: 6px;
width: 100%;
}
#draft-instruction {
text-align: left;
font-size: 12px;
line-height: 1.18;
color: #8F8F8F;
}
#draft-timer,
.draft-timer {
width: fit-content;
min-width: 52px;
margin-top: 0;
padding: 4px 8px;
border-radius: 999px;
background: #E9F1FC;
color: #176BDA;
font-size: 12px;
font-weight: 700;
transition: background 0.3s, color 0.3s;
}
.draft-timer--warn {
background: #FFF3CD;
color: #856404;
}
.draft-timer--urgent {
background: #F8D7DA;
color: #721C24;
animation: pulse-urgent 0.8s ease-in-out infinite;
}
@keyframes pulse-urgent {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.draft-picks,
.draft-bans {
width: 100%;
}
.draft-picks {
display: grid;
gap: 8px;
margin: 0;
}
.draft-bans {
margin: -2px 0 0;
}
.dp-names {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
align-items: center !important;
width: 100% !important;
margin: 0 0 2px !important;
}
.dp-name-pill,
.dp-names > div {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px !important;
min-width: 0 !important;
padding: 6px 10px !important;
border-radius: 14px !important;
color: #FFFFFF !important;
font-size: 13px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
text-align: center !important;
word-break: break-word !important;
white-space: normal !important;
flex: 1 1 0 !important;
}
.dp-name-pill--blue {
background: #176BDA;
}
.dp-name-pill--red {
background: #FF4A4A;
}
.dp-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
align-items: stretch;
gap: 10px;
width: 100%;
}
.dp-side {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 4px;
border-radius: 16px;
background: #FFFFFF;
}
.dp-side--pick {
border: 3px solid #B7B7B7;
padding: 4px !important;
border-radius: 16px !important;
background: #FFFFFF !important;
}
.dp-side--pick.dp-side--blue {
border-color: #176BDA;
}
.dp-side--pick.dp-side--red {
border-color: #FF4A4A;
}
.dp-side--ban {
border: 3px solid #B7B7B7;
padding: 4px !important;
border-radius: 16px !important;
background: #FFFFFF !important;
}
.dp-title {
display: none !important;
}
.dp-slot {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border: 1px solid #D9DDE5;
background: #FFFFFF;
border-radius: 12px;
overflow: hidden;
}
.dp-slot.filled {
border-color: #C2C7D2;
background: #F7F8FA;
}
.dp-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dp-slot__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(58, 58, 58, 0.52);
color: #FFFFFF;
font-size: 12px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.03em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
.dp-slot.is-banned img {
filter: grayscale(1) brightness(0.68);
}
.dp-divider {
width: 8px;
min-height: 66px;
border-radius: 999px;
background: #D4D4D4;
}
.draft-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
width: 100%;
}
.draft-item-button {
position: relative;
width: 100%;
height: 68px;
padding: 0;
border: 2px solid #D9DDE5;
border-radius: 14px;
overflow: hidden;
background: #F4F6F9;
cursor: default;
transform-origin: center;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.draft-item-button img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.2s ease;
}
.draft-item-button[data-action] {
cursor: pointer;
}
.draft-item-button.is-banned {
border-color: #868686;
background: #C8CBD1;
}
.draft-item-button.is-banned img {
filter: grayscale(1) brightness(0.62);
}
.draft-item-button.is-picked-blue {
border-color: #176BDA;
box-shadow: inset 0 0 0 2px rgba(23, 107, 218, 0.16);
}
.draft-item-button.is-picked-red {
border-color: #FF4A4A;
box-shadow: inset 0 0 0 2px rgba(255, 74, 74, 0.14);
}
.draft-item-button.is-action-ban {
border-color: #FF6B6B;
box-shadow: 0 6px 16px rgba(255, 107, 107, 0.18);
}
.draft-item-button.is-action-pick {
border-color: #176BDA;
box-shadow: 0 6px 16px rgba(23, 107, 218, 0.18);
}
/* М10: Favorite brawler indicator */
.draft-item-button.is-fav::after {
content: '★';
position: absolute;
top: 2px;
right: 3px;
font-size: 10px;
color: #f59e0b;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
z-index: 3;
pointer-events: none;
}
.draft-item-overlay {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.03em;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}
.draft-item-button.is-banned .draft-item-overlay {
display: flex;
background: rgba(80, 80, 80, 0.42);
}
.draft-item-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 3px 4px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
color: #FFFFFF;
font-size: 10px;
line-height: 1.1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 380px) {
.dp-names {
gap: 10px;
}
.dp-name-pill {
font-size: 12px;
}
.dp-row {
gap: 8px;
}
.dp-side {
gap: 4px;
padding: 3px;
}
.dp-slot {
border-radius: 10px;
}
.draft-grid {
gap: 8px;
}
.draft-item-button {
height: 62px;
border-radius: 12px;
}
}
#report-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
#report-buttons .btn {
width: auto;
min-width: 64px;
margin-top: 0;
padding: 8px 12px;
flex: 0 0 auto;
border-radius: 999px;
border: 1px solid #4b5563;
}
#input-room:disabled {
background-color: #2a2a2c;
color: #666;
cursor: not-allowed;
opacity: 0.6;
}
.toast-wrap {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
pointer-events: none;
}
.toast {
background: #1a1a1c;
border: 1px solid #333;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 8px;
min-width: 280px;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
cursor: default;
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
.toast-title {
font-weight: 600;
font-size: 14px;
color: #fff;
margin-bottom: 4px;
}
.toast-body {
font-size: 13px;
color: #ccc;
line-height: 1.3;
}
.notif-item {
cursor: pointer;
}
.notif-item.read {
opacity: 0.6;
}
/* Clickable notification cards */
.notif-card {
cursor: pointer;
position: relative;
transition: transform 0.1s ease;
}
.notif-card::after {
content: '›';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
font-weight: 600;
color: #9ca3af;
opacity: 0.5;
}
.notif-card:active {
transform: scale(0.98);
}
.notif-item .badge {
background: #007aff;
color: white;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
}
.sets-list { margin: 8px 0; }
.set-line {
font-size: 13px;
color: #9ca3af;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Global bans display on tournament detail */
.detail-global-bans { margin: 10px 0 4px; }
.detail-bans-label { font-size: 13px; font-weight: 700; color: #c62828; margin-bottom: 6px; }
.detail-bans-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-ban-cell {
position: relative; width: 42px; height: 42px;
border-radius: 50%; overflow: hidden;
border: 2px solid #e53935; opacity: 0.7;
}
.detail-ban-cell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(60%); }
.detail-ban-cell .ban-cross {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 900; color: #e53935;
text-shadow: 0 0 3px rgba(0,0,0,0.5);
pointer-events: none;
}
.badge--accent { background: #ff9800; color: #fff; }
/* Captain draft real-time UI */
.cd-turn-bar { display:flex; align-items:center; justify-content:space-between; background:#1a2a44; color:#fff; border-radius:10px; padding:8px 14px; margin-bottom:8px; font-size:14px; font-weight:600; }
.cd-timer { background:#ff4444; color:#fff; border-radius:6px; padding:2px 10px; font-size:16px; font-weight:700; min-width:32px; text-align:center; }
.cd-teams-row { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.cd-team-col { flex:1; min-width:120px; background:#f0f7ff; border:1px solid #d0e0f0; border-radius:10px; padding:8px; }
.cd-team-col.is-picking { border-color:#0064d6; box-shadow:0 0 0 2px rgba(0,100,214,0.3); }
.cd-team-col .cd-cap-name { font-size:11px; font-weight:700; color:#0064d6; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-team-member { display:flex; align-items:center; gap:4px; padding:3px 0; font-size:12px; color:#333; }
.cd-team-member img { width:22px; height:22px; border-radius:50%; }
.cd-team-slot-empty { padding:3px 0; font-size:11px; color:#aaa; font-style:italic; }
.cd-pool-label { font-size:12px; font-weight:600; color:#888; margin-bottom:4px; }
.cd-pool { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:6px; margin-bottom:8px; }
.cd-player-card { background:#fff; border:1px solid #e0e0e0; border-radius:10px; padding:8px; text-align:center; cursor:pointer; transition:all .15s; }
.cd-player-card:active { transform:scale(0.96); }
.cd-player-card.is-picked { opacity:0.35; pointer-events:none; background:#f5f5f5; }
.cd-player-card.can-pick { border-color:#0064d6; box-shadow:0 0 0 2px rgba(0,100,214,0.2); }
.cd-player-card img { width:36px; height:36px; border-radius:50%; margin-bottom:4px; }
.cd-player-card .cd-p-name { font-size:12px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-player-card .cd-p-level { font-size:10px; color:#888; }
.cd-done-msg { text-align:center; font-size:14px; font-weight:700; color:#2e7d32; padding:10px 0 8px; }
.cd-final-teams { display:flex; gap:6px; flex-wrap:wrap; }
.cd-final-team { flex:1; min-width:120px; background:#f0f7ff; border:1px solid #d0e0f0; border-radius:10px; padding:8px; }
.cd-final-team .cd-ft-title { font-size:11px; font-weight:700; color:#0064d6; margin-bottom:4px; }
.cd-final-team .cd-ft-member { font-size:12px; color:#333; padding:2px 0; }
/* Friendly matches */
.friendly-card { padding:10px 12px; margin-bottom:6px; }
.btn-sm { padding:4px 10px; font-size:11px; border-radius:6px; }
.badge--live { background:#2e7d32; color:#fff; }
.badge--dim { background:#ccc; color:#666; }
#my-active-detail.detail-card { width: 100%; max-width: 100vw; max-height: none; overflow-x: hidden; overflow-y: visible; }
#my-active-detail .detail-head,
#my-active-detail .detail-meta,
#my-active-detail .participants,
#my-active-detail .match-panel { max-width: 100%; overflow-x: hidden; }
#my-active-detail .participants { margin-left: 0; }
#my-active-composite #my-active-detail.detail-card { border: 0; background: transparent; box-shadow: none; padding: 10px 0 0; width: 100%; box-sizing: border-box; }
#my-active-composite #my-active-detail .detail-head { padding: 0 0 6px; }
#my-active-composite #my-active-detail .detail-title { font-size: 16px; }
#my-active-composite #my-active-detail .bracket { margin-top: 8px; overflow-x: auto; }
#my-active-composite #my-active-detail .br-wrap { min-width: max-content; }
#my-active-composite #my-active-detail .participants-table { width: 100%; table-layout: fixed; }
#my-active-composite #my-active-detail .pt-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#my-active-composite #my-active-detail .match-panel { width: 100%; box-sizing: border-box; }
#my-active-composite #my-active-detail .match-row { flex-wrap: wrap; }
#my-active-composite #my-active-detail .head-tabs { flex-wrap: wrap; gap: 4px; }
[data-theme="light"] body { background: var(--tg-theme-bg-color, #ffffff); color: var(--tg-theme-text-color, #111827); }
[data-theme="light"] .app-header { background: var(--tg-theme-secondary-bg-color, #f3f4f6); border-bottom-color: #e5e7eb; }
[data-theme="light"] .topbar { color: var(--tg-theme-text-color, #111827); }
[data-theme="light"] .tab-btn { color: var(--tg-theme-text-color, #111827); }
[data-theme="light"] .tab-btn.active { color: var(--tg-theme-button-color, #2563eb); border-bottom-color: var(--tg-theme-button-color, #2563eb); }
[data-theme="light"] .main-tabs .tab-btn { border: 1px solid #e5e7eb; background: #ffffff; color: #111827; }
[data-theme="light"] .main-tabs .tab-btn.active { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #ffffff); border-color: var(--tg-theme-button-color, #2563eb); }
[data-theme="light"] .subtabs { background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.2); }
[data-theme="light"] .sub-btn { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; }
[data-theme="light"] .sub-btn.active { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #ffffff); border-color: var(--tg-theme-button-color, #2563eb); }
[data-theme="light"] .seg-btn.active { background: #e5e7eb; }
[data-theme="light"] .card { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .card-item { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .card .divider { background: #e5e7eb; }
[data-theme="light"] .card-meta { color: #6b7280; }
[data-theme="light"] .badge { color: #111827; border-color: #e5e7eb; }
[data-theme="light"] .badge-blue { background: #1e3a8a; border-color: #1e40af; color: #ffffff; }
[data-theme="light"] .badge-red { background: #7f1d1d; border-color: #991b1b; color: #ffffff; }
[data-theme="light"] .btn-primary { background: var(--tg-theme-button-color, #2563eb); color: var(--tg-theme-button-text-color, #ffffff); border-color: #1d4ed8; }
[data-theme="light"] .btn-secondary { background: #e5e7eb; color: #111827; border-color: #d1d5db; }
[data-theme="light"] .btn-danger { background: #ef4444; color: #ffffff; border-color: #dc2626; }
[data-theme="light"] .list { border-color: #e5e7eb; }
[data-theme="light"] .list .row { border-bottom-color: #e5e7eb; }
[data-theme="light"] .list .row.head { background: #f3f4f6; color: #111827; }
[data-theme="light"] input { background: #ffffff; color: #111827; border-color: #e5e7eb; }
[data-theme="light"] textarea { background: #ffffff; color: #111827; border-color: #e5e7eb; }
[data-theme="light"] .modal { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .overlay { background: rgba(0,0,0,0.35); }
[data-theme="light"] .br-match { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .br-slot { background: #f9fafb; border-color: #e5e7eb; color: #111827; }
[data-theme="light"] .detail-card { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .head-tab { background: #ffffff; color: #111827; border-color: #e5e7eb; }
[data-theme="light"] .head-tab.active { background: #e5e7eb; color: #111827; border-color: #d1d5db; }
[data-theme="light"] .dp-divider { background: #e5e7eb; }
[data-theme="light"] #report-buttons .btn { border-color: #d1d5db; }
[data-theme="light"] .toast { background: #111827; border-color: #1f2937; color: #ffffff; }
[data-theme="light"] label { color: #374151; }
[data-theme="light"] .muted { color: #4b5563; }
[data-theme="light"] .set-line { color: #4b5563; }
[data-theme="light"] .detail-meta { color: #6b7280; }
[data-theme="light"] .card-meta .meta-strong { color: #111827; }
[data-theme="light"] .pt-head { background: #f3f4f6; color: #111827; }
[data-theme="light"] .pt-col.stage { color: #6b7280; }
[data-theme="light"] .topbar .topbar-btn.active {
background: var(--tg-theme-button-color, #2563eb);
color: var(--tg-theme-button-text-color, #ffffff);
border-color: #1d4ed8;
}
/* Friends page */
.friends-page {
padding-bottom: 92px;
display: flex;
flex-direction: column;
height: calc(100vh - 170px);
overflow: hidden;
}
.friends-page .friends-subtabs {
flex-shrink: 0;
}
.friends-page .friends-search-bar {
flex-shrink: 0;
}
.friends-page .friends-detail-stack {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
-webkit-overflow-scrolling: touch;
}
.friends-page .friends-bottom-action {
flex-shrink: 0;
position: relative;
bottom: auto;
left: auto;
right: auto;
margin: 0;
padding: 8px 0 0;
background: none;
max-width: none;
}
/* --- Friends subtabs (4 columns, same style as tournament tabs) --- */
.friends-subtabs { grid-template-columns: repeat(4, 1fr) !important; }
.friends-subtabs .friends-tab-badge {
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
background: rgba(255,255,255,0.25); font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
margin-left: 3px;
}
.friends-subtabs .seg-btn:not(.active) .friends-tab-badge {
background: rgba(0,0,0,0.08); color: #555;
}
/* --- Search bar --- */
.friends-search-bar {
position: relative; margin: 10px 0 6px;
}
.friends-search-bar input {
width: 100%; box-sizing: border-box;
height: 42px; padding: 0 40px 0 14px;
border-radius: 21px; border: none;
background: rgba(191, 216, 245, 0.4);
font-family: "Nunito", sans-serif; font-size: 14px; color: #111;
outline: none;
}
.friends-search-bar input::placeholder { color: #8c8c8c; }
.friends-search-bar .friends-search-icon {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-size: 16px; pointer-events: none; opacity: 0.5;
}
/* --- Detail panels --- */
.friends-detail-stack { margin-top: 8px; }
.friends-detail-panel { padding: 0; border: none; background: transparent; border-radius: 0; box-shadow: none; }
/* --- Bottom action bar --- */
.friends-bottom-action {
position: fixed; bottom: 80px; left: 0; right: 0;
margin: 0 auto; max-width: var(--figma-app-width, 420px);
padding: 8px 14px 6px; z-index: 50;
background: linear-gradient(180deg, rgba(239,246,255,0) 0%, rgba(239,246,255,0.96) 30%);
}
.friends-bottom-action-inner { display: none; }
.friends-bottom-action-inner:not(.hidden) { display: block; }
.friends-action-row {
display: flex; gap: 6px; align-items: center;
}
.friends-action-row input {
flex: 1; min-width: 0; height: 42px; padding: 0 14px;
border-radius: 21px; border: 1px solid #c0c0c0; background: #fff;
font-family: "Nunito", sans-serif; font-size: 14px; color: #111;
}
.friends-action-row input::placeholder { color: #8c8c8c; }
.friends-action-btn {
flex-shrink: 0; height: 42px; padding: 0 16px;
border-radius: 21px; border: none;
background: #0064d6; color: #fff;
font-family: "Nunito", sans-serif; font-size: 13px; font-weight: 600;
cursor: pointer; white-space: nowrap;
}
.friends-action-btn:hover { background: #0055b7; }
.friends-action-btn--secondary {
background: rgba(191,216,245,0.55); color: #0064d6;
}
.friends-action-btn--secondary:hover { background: rgba(191,216,245,0.8); }
/* --- Friend list rows (kept) --- */
.friend-list { display: flex; flex-direction: column; gap: 8px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid #d7d7d7; border-radius: 14px; }
.friend-row:hover { background: #f7fbff; border-color: #bdd7f4; }
.friend-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.friend-avatar { width: 36px; height: 36px; border-radius: 999px; background: #0064d6; border: 1px solid #0064d6; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; position: relative; }
.friend-online { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; }
.friend-online.online { background: #34c759; }
.friend-online.offline { background: #8e8e93; }
[data-theme="dark"] .friend-online { border-color: #1c1c1e; }
.friend-text { min-width: 0; }
.friend-name { font-weight: 600; line-height: 1.2; color: #111; }
.friend-username { font-size: 12px; color: #7e7e7e; }
.friend-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.empty-block { display:flex; align-items:center; justify-content:center; gap:8px; padding: 12px; border: 1px dashed #c8c8c8; border-radius: 10px; color: #7e7e7e; background: #fafcff; }
.empty-block .emoji { font-size: 16px; }
.empty-block .text { font-size: 13px; }
/* Skeleton loading shimmer */
.skeleton {
background: linear-gradient(90deg, #e8edf3 25%, #d5dce6 50%, #e8edf3 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 12px;
}
[data-theme="dark"] .skeleton {
background: linear-gradient(90deg, #1f1f22 25%, #2a2a2c 50%, #1f1f22 75%);
background-size: 200% 100%;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-card { height: 88px; margin-bottom: 10px; }
@media (min-width: 700px) {
.friends-page { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 380px) {
.friends-subtabs { font-size: 11px !important; gap: 2px !important; }
.friends-subtabs .seg-btn { padding: 6px 2px !important; }
.friends-search-bar input { font-size: 13px; height: 36px; }
.friends-bottom-action { padding: 6px 10px 4px; bottom: 72px; }
.friends-action-row input { height: 36px; font-size: 13px; }
.friends-action-btn { height: 36px; padding: 0 12px; font-size: 12px; }
.friend-row { padding: 8px 10px; gap: 8px; }
.friend-avatar { width: 30px; height: 30px; font-size: 12px; }
.friend-name { font-size: 13px; }
.friend-username { font-size: 11px; }
.cd-pool { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.cd-team-col { min-width: 90px; padding: 6px; }
}
[data-theme="light"] .friend-row { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .friend-avatar { background: #e5e7eb; border-color: #d1d5db; color: #111827; }
[data-theme="light"] .friend-username { color: #6b7280; }
[data-theme="light"] .empty-block { border-color: #e5e7eb; color: #6b7280; }
[data-theme="light"] .friend-row:hover { background: #f9fafb; border-color: #d1d5db; }
/* About page */
/* Friends summary-card design (Figma 1:1) */
.friends-page {
padding-bottom: 96px;
}
.friends-page > .screen-title {
margin: 6px 0 14px;
}
.friends-summary-view {
display: flex;
flex-direction: column;
gap: 10px;
}
.friends-add-card {
padding: 14px 16px 16px;
background: #fff;
border: 1px solid var(--figma-border, #e5e7eb);
border-radius: 18px;
box-shadow: var(--figma-shadow, 0 1px 4px rgba(0,0,0,0.06));
}
.friends-add-title {
font-family: "Nunito", sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--figma-text, #111);
margin-bottom: 10px;
}
.friends-add-input {
display: block;
width: 100%;
box-sizing: border-box;
height: 44px;
padding: 0 14px;
border: 1px solid #d1d5db;
border-radius: 12px;
background: #f9fafb;
font-family: "Nunito", sans-serif;
font-size: 15px;
color: var(--figma-text, #111);
margin-bottom: 10px;
outline: none;
}
.friends-add-input:focus {
border-color: var(--figma-blue, #2563eb);
background: #fff;
}
.friends-add-btn {
display: block;
width: 100%;
height: 46px;
border: none;
border-radius: 12px;
background: var(--figma-blue, #2563eb);
color: #fff;
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.friends-add-btn:hover { background: #1d4ed8; }
.friends-add-btn:active { background: #1e40af; }
.friends-summary-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--figma-border, #e5e7eb);
border-radius: 18px;
box-shadow: var(--figma-shadow, 0 1px 4px rgba(0,0,0,0.06));
cursor: pointer;
transition: background 0.15s;
}
.friends-summary-card:hover { background: #f0f7ff; }
.friends-summary-card:active { background: #e0effe; }
.friends-summary-card-main {
flex: 1;
min-width: 0;
}
.friends-summary-card-title {
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--figma-text, #111);
line-height: 1.2;
}
.friends-summary-card-sub {
font-family: "Nunito", sans-serif;
font-size: 13px;
color: #6b7280;
margin-top: 2px;
}
.friends-summary-count {
font-family: "Nunito", sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--figma-text, #111);
min-width: 24px;
text-align: right;
}
.friends-detail-view {
display: flex;
flex-direction: column;
}
.friends-back-btn {
align-self: flex-start;
margin-bottom: 10px;
padding: 7px 14px;
border: 1px solid var(--figma-border, #d1d5db);
border-radius: 10px;
background: #fff;
font-family: "Nunito", sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--figma-blue, #2563eb);
cursor: pointer;
}
.friends-back-btn:hover { background: #f0f7ff; }
/* Profile — hide coins row in parity snapshot mode */
body[data-parity-screen="profile"] .profile-balance-row {
display: none !important;
}
/* Matches-history parity: hide Свои sub-tab (not in Figma reference) */
body[data-parity-screen="matches-history"] .matches-screen .subtabs [data-my-sub="friendly"] {
display: none !important;
}
/* About page */
.about-page {
padding-bottom: 96px;
}
.about-page-title {
margin: 8px 0 18px;
font-family: "Nunito", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
text-align: center;
color: #111;
}
.about-cards,
.about-links {
display: grid;
gap: 14px;
}
.about-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 128px;
gap: 12px;
min-height: 174px;
padding: 18px;
border-radius: 26px;
overflow: hidden;
color: #fff;
}
.about-card::before,
.about-card::after {
content: "";
position: absolute;
inset: auto auto -38% -10%;
width: 72%;
aspect-ratio: 1 / 1;
border-radius: 50%;
opacity: 0.12;
background: radial-gradient(circle, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 68%);
pointer-events: none;
}
.about-card::after {
inset: -42% -12% auto auto;
width: 68%;
opacity: 0.1;
}
.about-card--blue {
background:
linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #0a6be0 0%, #0054ba 100%);
}
.about-card--orange {
background:
linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #f15d00 0%, #d33500 100%);
}
.about-card--green {
background:
linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #10a850 0%, #0a8640 100%);
}
.about-card--magenta {
background:
linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #cc1677 0%, #9d0f6c 100%);
}
.about-card-copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.about-card-title {
font-family: "Nunito", sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.1;
}
.about-card-text {
margin-top: 10px;
font-family: "Nunito", sans-serif;
font-size: 15px;
line-height: 1.24;
color: rgba(255,255,255,0.94);
white-space: pre-wrap;
}
.about-card-media {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: center;
}
.about-card-media img {
width: 112px;
height: 112px;
object-fit: cover;
border-radius: 24px;
box-shadow: 0 18px 38px rgba(0,0,0,0.18);
}
.about-card-media--poster img {
width: 128px;
height: 156px;
border-radius: 22px;
}
.about-card--links {
grid-template-columns: minmax(0, 1fr) 96px;
}
.about-link-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.about-link-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.26);
color: #fff;
text-decoration: none;
font-family: "Nunito", sans-serif;
font-size: 14px;
font-weight: 600;
backdrop-filter: blur(8px);
}
.about-link-pill:hover {
background: rgba(255,255,255,0.22);
}
@media (min-width: 700px) {
.about-page {
max-width: 720px;
margin: 0 auto;
}
}
@media (max-width: 560px) {
.about-card {
grid-template-columns: minmax(0, 1fr) 96px;
min-height: 154px;
padding: 16px;
}
.about-card-media img {
width: 88px;
height: 88px;
border-radius: 20px;
}
.about-card-media--poster img {
width: 96px;
height: 124px;
}
.about-card-title {
font-size: 17px;
}
.about-card-text {
font-size: 14px;
}
}
/* Notifications page */
.notif-page {
padding-bottom: 96px;
}
.notif-page-title {
margin: 8px 0 18px;
font-family: "Nunito", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
text-align: center;
color: #111;
}
.notif-toolbar {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.notif-toolbar .btn {
flex: 1;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 14px;
font-size: 13px;
font-weight: 700;
border: none;
padding: 0 12px;
}
.notif-toolbar .btn-primary {
background: var(--figma-blue);
color: #fff;
}
.notif-toolbar .btn-secondary {
background: #EE4444;
color: #fff;
}
.notif-feed {
display: grid;
gap: 12px;
}
.notif-card {
display: grid;
gap: 8px;
padding: 18px 16px;
border: 1px solid #d6d6d6;
background: #fff;
border-radius: 24px;
}
.notif-card.is-read {
opacity: 0.72;
}
.notif-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.notif-card-title {
font-family: "Nunito", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
color: #111;
}
.notif-card-time {
flex-shrink: 0;
font-family: "Nunito", sans-serif;
font-size: 12px;
color: #7e7e7e;
}
.notif-card-body {
font-family: "Nunito", sans-serif;
font-size: 15px;
line-height: 1.28;
color: #4b4b4b;
}
.notif-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
background: #0064d6;
color: #eff6ff;
font-family: "Nunito", sans-serif;
font-size: 11px;
font-weight: 700;
}
.notif-empty {
padding: 18px 16px;
border: 1px dashed #cfcfcf;
border-radius: 24px;
background: #fff;
color: #7e7e7e;
text-align: center;
font-family: "Nunito", sans-serif;
}
.menu-btn-container {
position: relative;
}
.menu-btn.has-unread .menu-btn-container::after {
content: "";
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ee4444;
border: 2px solid #eff6ff;
}
@media (min-width: 700px) {
.notif-page {
max-width: 720px;
margin: 0 auto;
}
}
/* --- Payout currency select (profile) --- */
.rate-hint { margin-top: 6px; }
/* Force style for payout select if WebView ignores appearance */
#payout-currency-select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background: #141416 !important;
border: 1px solid #2a2a2c !important;
color: #e5e7eb !important;
border-radius: 10px !important;
padding: 10px 36px 10px 12px !important;
min-width: 180px;
font-size: 14px;
background-image: none !important;
height: 40px;
}
#payout-currency-select:hover { border-color: #3a3a3c !important; }
#payout-currency-select:focus { outline: none; border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.25) !important; }
[data-theme="light"] #payout-currency-select { background: #ffffff !important; color: #111827 !important; border-color: #e5e7eb !important; }
[data-theme="light"] #payout-currency-select:hover { border-color: #d1d5db !important; }
[data-theme="light"] #payout-currency-select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.2) !important; }
/* === FIGMA 1:1 SHELL OVERRIDES === */
@font-face {
font-family: "SupercellHeadline";
src: url("/webapp/static/fonts/SupercellHeadline-Heavy.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@media (max-width: 520px) {
.friends-page--v2 .subtabs.seg > .seg-btn .seg-tab-copy,
.notif-page--v2 .subtabs.seg > .seg-btn .seg-tab-copy {
padding-right: 30px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 5px !important;
right: 8px !important;
min-width: 18px !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
font-size: 9px !important;
}
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg path,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg circle,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg rect,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon path,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon circle,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon rect {
color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
opacity: 1 !important;
}
.profile-card.screen-card--gradient {
padding: 10px 8px 10px !important;
}
.profile-hero {
min-height: 138px !important;
margin: 0 0 8px !important;
padding-top: 0 !important;
}
.profile-avatar-wrap {
top: 18px !important;
left: 2px !important;
width: 108px !important;
height: 108px !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 108px !important;
height: 108px !important;
}
.profile-hero-sheet {
width: calc(100% - 20px) !important;
min-height: 82px !important;
margin: 20px 0 0 44px !important;
padding: 10px 12px 10px 78px !important;
border-radius: 0 28px 28px 16px !important;
}
.profile-hero-main {
min-height: 62px !important;
gap: 6px !important;
}
.profile-copy {
gap: 2px !important;
padding-top: 6px !important;
padding-right: 106px !important;
}
.profile-name-value {
font-size: 22px !important;
line-height: 1.02 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title-btn {
font-size: 13px !important;
line-height: 1.05 !important;
color: #7d90aa !important;
}
.profile-mini-btn {
min-width: 102px !important;
width: 102px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 12px !important;
font-size: 10px !important;
right: 0 !important;
bottom: 2px !important;
}
.profile-id-chip--inline {
left: 54px !important;
top: 112px !important;
width: min(200px, calc(100% - 148px)) !important;
min-height: 18px !important;
height: 18px !important;
padding: 0 24px 0 12px !important;
border-radius: 0 10px 10px 10px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 7px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 10.5px !important;
letter-spacing: 0.01em !important;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
width: 11px !important;
height: 11px !important;
}
.profile-stats-grid {
gap: 6px !important;
}
.profile-stat-card {
min-height: 84px !important;
padding: 8px 12px 8px 72px !important;
border-radius: 24px !important;
}
.profile-stat-icon-wrap,
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -14px !important;
width: 78px !important;
height: 78px !important;
top: 50% !important;
transform: translateY(-50%) !important;
overflow: hidden !important;
clip-path: circle(50% at 50% 50%) !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: scale(1.04) !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-3px, 0) scale(1.1) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(1px, -1px) scale(1.12) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-2px, 1px) scale(1.08) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(2px, 0) scale(1.12) !important;
}
.profile-stat-copy {
gap: 4px !important;
}
.profile-stat-label {
font-size: 15px !important;
line-height: 1.04 !important;
}
.profile-stat-value {
font-size: 20px !important;
}
.profile-links-shell {
margin-top: 4px !important;
}
}
/* 2026-04-17 final authority: Android shell + profile/Figma corrective pass */
@media (max-width: 520px) {
body {
--mini-shell-gutter: 10px !important;
--mini-shell-width: min(392px, calc(100vw - 20px)) !important;
--mini-header-lift: 102px !important;
}
body.tg-embedded {
--mini-header-lift: 126px !important;
}
.app-header,
.menubar,
.app-main.container {
transition:
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.18s ease,
padding 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.app-header {
width: 100% !important;
max-width: none !important;
padding: calc(max(var(--mini-safe-top), 22px) + var(--mini-header-lift) + 14px) var(--mini-shell-gutter) 10px !important;
}
.topbar,
.profile-card.screen-card--gradient,
.profile-links-shell,
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.matches-utility-bar.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row,
.friends-sticky-footer,
#friends-action-area,
.notif-page--v2 .notif-feed {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.app-main.container {
width: 100% !important;
max-width: none !important;
padding: calc(max(var(--mini-safe-top), 22px) + var(--mini-header-lift) + 96px) 0 calc(max(var(--mini-safe-bottom), 12px) + 120px) !important;
}
body[data-current-tab="profile"] .app-main.container {
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 10px) !important;
}
body.chrome-hidden .app-main.container {
padding-top: calc(max(var(--mini-safe-top), 22px) + 18px) !important;
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 24px) !important;
}
.topbar {
min-height: 48px !important;
grid-template-columns: 96px minmax(0, 1fr) 96px !important;
gap: 10px !important;
}
.topbar-side {
min-width: 96px !important;
gap: 12px !important;
}
.topbar-logo {
max-width: 162px !important;
min-height: 50px !important;
}
.top-icon-btn {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.menubar {
left: 50% !important;
right: auto !important;
bottom: calc(max(var(--mini-safe-bottom), 12px) + 20px) !important;
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
padding: 6px 12px calc(max(var(--mini-safe-bottom), 12px) + 10px) !important;
transform: translateX(-50%) !important;
}
body.chrome-hidden .app-header {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(calc(-100% - 18px)) !important;
}
body.chrome-hidden .menubar {
opacity: 0 !important;
pointer-events: none !important;
transform: translate(-50%, calc(100% + max(var(--mini-safe-bottom), 12px) + 40px)) !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
grid-template-columns: minmax(0, 1fr) 56px !important;
gap: 8px !important;
}
.matches-screen .matches-utility-bar.section-utility-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.matches-search-shell,
.catalog-search-shell {
min-height: 52px !important;
padding: 0 14px 0 44px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 17px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open,
.matches-filter-toggle {
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 20px !important;
color: #0a66db !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label,
.matches-filter-toggle__label {
display: none !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy,
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy {
width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 24px 0 8px !important;
font-size: 13px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
.friends-page--v2 .subtabs.seg > .seg-btn.active .seg-tab-copy,
.friends-page--v2 .subtabs.seg > .seg-btn.active .seg-tab-copy *,
.notif-page--v2 .subtabs.seg > .seg-btn.active .seg-tab-copy,
.notif-page--v2 .subtabs.seg > .seg-btn.active .seg-tab-copy *,
.profile-links-seg > .seg-btn.active .seg-tab-copy,
.profile-links-seg > .seg-btn.active .seg-tab-copy *,
.tournaments-screen .subtabs.seg > .seg-btn.active .seg-tab-copy,
.tournaments-screen .subtabs.seg > .seg-btn.active .seg-tab-copy *,
.matches-screen .subtabs.seg > .seg-btn.active .seg-tab-copy,
.matches-screen .subtabs.seg > .seg-btn.active .seg-tab-copy * {
color: #ffffff !important;
fill: currentColor !important;
stroke: currentColor !important;
opacity: 1 !important;
}
.friends-page--v2 .friends-tab-badge,
.notif-tab-side-action,
.notif-tab-side-action__count {
min-width: 20px !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
padding: 0 !important;
font-size: 10px !important;
font-weight: 800 !important;
border-radius: 999px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 6px !important;
right: 6px !important;
}
.notif-tab-side-action {
top: 6px !important;
right: 6px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ff4d4f !important;
color: #ffffff !important;
box-shadow: 0 6px 14px rgba(255, 77, 79, 0.24) !important;
}
.notif-tab-side-action__count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
.notif-tab-side-action__icon {
width: 10px !important;
height: 10px !important;
}
.notif-tab-side-action[data-notif-side-mode="zero"] .notif-tab-side-action__icon,
.notif-tab-side-action[data-notif-side-mode="read"] .notif-tab-side-action__icon {
display: none !important;
}
.notif-tab-side-action[data-notif-side-mode="zero"] .notif-tab-side-action__count,
.notif-tab-side-action[data-notif-side-mode="read"] .notif-tab-side-action__count {
display: inline-flex !important;
}
.notif-tab-side-action[data-notif-side-mode="clear"] {
background: #ffffff !important;
color: #0a66db !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.12) !important;
}
.notif-tab-side-action[data-notif-side-mode="clear"] .notif-tab-side-action__count {
display: none !important;
}
.notif-tab-side-action[data-notif-side-mode="clear"] .notif-tab-side-action__icon {
display: block !important;
}
.profile-card.screen-card--gradient {
padding: 12px 10px 12px !important;
border-radius: 36px !important;
}
.profile-hero {
min-height: 156px !important;
margin: 0 0 10px !important;
padding-top: 2px !important;
}
.profile-avatar-wrap {
top: 12px !important;
left: 4px !important;
width: 124px !important;
height: 124px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 124px !important;
height: 124px !important;
}
.profile-avatar-ring {
padding: 4px !important;
background: #0b6fdf !important;
box-shadow: 0 0 0 4px #eff6ff, 0 0 0 7px #0b6fdf !important;
}
.profile-hero-sheet {
width: calc(100% - 58px) !important;
min-height: 100px !important;
margin: 18px 0 0 56px !important;
padding: 16px 14px 14px 84px !important;
border-radius: 0 34px 34px 22px !important;
background: #eff6ff !important;
box-shadow: 0 14px 22px rgba(33, 53, 81, 0.1) !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
min-height: 70px !important;
}
.profile-copy {
display: grid !important;
gap: 4px !important;
min-width: 0 !important;
padding: 0 !important;
}
.profile-name-value {
font-size: 24px !important;
line-height: 1 !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title-btn {
width: fit-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #8da0ba !important;
font-size: 14px !important;
line-height: 1.05 !important;
font-weight: 700 !important;
text-align: left !important;
justify-self: start !important;
box-shadow: none !important;
}
.profile-title-btn:active {
transform: none !important;
filter: none !important;
}
.profile-mini-btn {
position: static !important;
width: auto !important;
min-width: 118px !important;
min-height: 34px !important;
height: 34px !important;
padding: 0 16px !important;
border-radius: 999px !important;
font-size: 10.5px !important;
font-weight: 800 !important;
box-shadow: 0 5px 0 rgba(18, 76, 142, 0.16) !important;
}
.profile-id-chip--inline {
left: 78px !important;
top: 126px !important;
width: min(226px, calc(100% - 152px)) !important;
min-height: 22px !important;
height: 22px !important;
padding: 0 28px 0 14px !important;
border-radius: 0 12px 12px 12px !important;
background: linear-gradient(90deg, #1071e4 0%, #0a64d4 100%) !important;
box-shadow: 0 6px 14px rgba(16, 113, 228, 0.18) !important;
z-index: 2 !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 12px !important;
font-weight: 800 !important;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
width: 12px !important;
height: 12px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 96px !important;
padding: 12px 12px 12px 92px !important;
border-radius: 26px !important;
overflow: visible !important;
}
.profile-stat-icon-wrap,
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
top: 50% !important;
left: -24px !important;
width: 104px !important;
height: 104px !important;
transform: translateY(-50%) !important;
border-radius: 999px !important;
overflow: visible !important;
clip-path: none !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-6px, -1px) scale(1.08) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(-2px, -2px) scale(1.1) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-6px, 0) scale(1.08) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(-1px, 1px) scale(1.14) !important;
}
.profile-stat-copy {
gap: 5px !important;
}
.profile-stat-label {
font-size: 17px !important;
line-height: 1.02 !important;
color: #8b919c !important;
}
.profile-stat-value {
font-size: 22px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.profile-links-shell {
margin-top: 8px !important;
gap: 8px !important;
}
.profile-links-seg {
min-height: 58px !important;
padding: 6px !important;
gap: 8px !important;
border-radius: 24px !important;
}
.profile-links-seg > .seg-btn {
min-height: 46px !important;
border-radius: 18px !important;
padding: 0 14px !important;
}
.profile-links-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 !important;
align-items: stretch !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 48px !important;
padding: 0 8px !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.profile-links-content__icon {
width: 16px !important;
height: 16px !important;
}
.profile-links-content__label,
.profile-links-content__state {
font-size: 10.5px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.profile-links-content__state {
position: static !important;
min-width: 0 !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
color: #0a66db !important;
box-shadow: none !important;
}
.friends-page--v2 .empty-block,
.notif-page--v2 .empty-block {
padding: 24px 16px !important;
}
.friends-page--v2 .empty-block__icon,
.notif-page--v2 .empty-block__icon {
width: 42px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 42px !important;
color: #79a7e2 !important;
}
.friends-page--v2 .empty-block__icon svg,
.notif-page--v2 .empty-block__icon svg {
width: 42px !important;
height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
display: block !important;
color: inherit !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.friends-page--v2 [data-friends-action="referrals"] {
gap: 10px !important;
padding: 14px 16px !important;
}
.friends-action-row--referral {
grid-template-columns: minmax(0, 1fr) 48px !important;
gap: 8px !important;
}
.friends-ref-code {
min-width: 0 !important;
min-height: 48px !important;
justify-content: flex-start !important;
padding: 0 14px !important;
overflow: hidden !important;
}
.friends-ref-code__value {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.friends-ref-share-btn {
width: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
border-radius: 18px !important;
}
.friends-ref-option {
min-height: 42px !important;
padding: 0 12px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
}
.friends-ref-option__copy {
min-width: 0 !important;
font-size: 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.friends-ref-option__icon {
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
display: block !important;
color: #0a66db !important;
fill: currentColor !important;
stroke: currentColor !important;
}
#tour-filter-modal.overlay,
#friends-filter-modal.overlay,
#notif-filter-modal.overlay {
padding: 0 10px calc(max(var(--mini-safe-bottom), 12px) + 16px) !important;
align-items: flex-end !important;
justify-content: center !important;
}
.filters-modal {
width: min(calc(var(--mini-shell-width) - 32px), 344px) !important;
max-width: min(calc(var(--mini-shell-width) - 32px), 344px) !important;
margin: 0 auto !important;
padding: 16px 16px calc(max(var(--mini-safe-bottom), 12px) + 10px) !important;
border-radius: 30px !important;
background: rgba(255, 255, 255, 0.99) !important;
box-shadow: 0 20px 40px rgba(34, 53, 83, 0.18) !important;
}
.filters-modal__grab {
display: block !important;
width: 44px !important;
height: 5px !important;
margin: 0 auto 12px !important;
border-radius: 999px !important;
background: rgba(143, 165, 197, 0.75) !important;
}
.filters-header {
align-items: flex-start !important;
margin-bottom: 16px !important;
}
.filters-title-wrap {
gap: 4px !important;
}
.filters-title-wrap h2 {
font-size: 32px !important;
line-height: 0.94 !important;
}
.filters-kicker {
font-size: 11px !important;
letter-spacing: 0.16em !important;
}
.filters-close-btn {
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 14px !important;
background: #eef5ff !important;
border: 1px solid rgba(103, 144, 201, 0.16) !important;
color: #0a66db !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.1) !important;
}
.filters-close-btn__icon {
position: relative !important;
display: block !important;
width: 14px !important;
height: 14px !important;
}
.filters-close-btn__icon::before,
.filters-close-btn__icon::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 16px !important;
height: 2px !important;
background: currentColor !important;
border-radius: 999px !important;
transform-origin: center !important;
}
.filters-close-btn__icon::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.filters-close-btn__icon::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.filter-scroll-row {
gap: 10px !important;
}
.filter-scroll-row .seg-btn {
min-width: 92px !important;
min-height: 48px !important;
padding: 0 12px !important;
border-radius: 18px !important;
font-size: 15px !important;
}
.filters-modal .actions {
margin-top: 16px !important;
padding-bottom: 0 !important;
}
.filters-modal .actions .btn {
min-height: 52px !important;
border-radius: 18px !important;
}
}
@font-face {
font-family: "SupercellText";
src: url("/webapp/static/fonts/SupercellText-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
--figma-blue: #0064D6;
--figma-blue-soft: #BFD8F5;
--figma-bg: #EFF6FF;
--figma-gray: #7E7E7E;
--figma-text: #111111;
--figma-border: #D5E4F4;
--figma-card: #FFFFFF;
--figma-green: #17A34A;
--figma-red: #EE4444;
--figma-shadow: 0 10px 26px rgba(27, 82, 147, 0.12);
--figma-app-width: 420px;
}
html, body {
overflow-x: hidden;
background: var(--figma-bg);
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar globally for Mini App feel */
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }
body {
min-height: 100vh;
font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--figma-text);
}
label,
span,
div,
button,
input,
a {
font-family: inherit;
}
.app-main.container {
width: min(100%, var(--figma-app-width));
max-width: var(--figma-app-width);
margin: 0 auto;
padding: 82px 12px 100px;
}
.app-header,
.menubar {
left: 0;
right: 0;
margin: 0 auto;
transform: none;
width: auto;
max-width: var(--figma-app-width);
box-sizing: border-box;
}
.app-header {
height: auto;
padding: 10px 12px 8px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98) 74%, rgba(239, 246, 255, 0));
box-shadow: none;
}
.topbar {
min-height: 44px;
display: grid;
grid-template-columns: 96px minmax(120px, 1fr) 96px;
justify-content: space-between;
gap: 4px;
align-items: center;
}
.topbar-side {
display: flex;
align-items: center;
gap: 12px;
min-width: 96px;
}
.topbar-side--right {
justify-content: flex-end;
}
.topbar-logo {
width: 100%;
max-width: 140px;
min-height: 48px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 2px 0 1px;
color: #0064d6;
text-align: center;
user-select: none;
justify-self: center;
}
.topbar-logo__title {
display: block;
font-family: "SupercellHeadline", "Lilita One", "Nunito", sans-serif;
font-size: 16px;
line-height: 0.96;
letter-spacing: 0.03em;
color: #0e6fdd;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 14px rgba(0, 100, 214, 0.12);
}
.topbar-logo__sub {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-family: "SupercellText", "Nunito", sans-serif;
font-size: 8px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.34em;
color: #243d6b;
text-transform: uppercase;
}
.topbar-logo__sub::before,
.topbar-logo__sub::after {
content: "";
width: 10px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(0, 100, 214, 0.2), rgba(0, 100, 214, 0.75));
}
.top-icon-btn {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--figma-gray);
display: grid;
place-items: center;
padding: 0;
border: none;
box-shadow: 0 6px 14px rgba(33, 53, 81, 0.12);
}
.top-icon-btn.active {
background: var(--figma-blue);
}
.top-icon-btn[aria-pressed="false"] {
opacity: 0.72;
}
.top-icon-btn .tab-btn-icon {
width: 25px;
height: 25px;
}
.menubar {
position: fixed;
bottom: 0;
z-index: 40;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 8px 14px 10px;
height: auto;
background: linear-gradient(180deg, rgba(239, 246, 255, 0), rgba(239, 246, 255, 0.98) 24%, rgba(239, 246, 255, 0.98));
text-align: initial;
}
.menu-btn {
min-height: 62px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 2px;
padding: 0 0 3px;
background: transparent;
border: none;
border-radius: 18px;
color: var(--figma-text);
font-size: 11px;
font-weight: 700;
}
.menu-btn .tab-btn-icon {
width: 24px;
height: 24px;
}
.menu-btn span {
display: block;
font-size: 11px;
line-height: 1.15;
font-weight: 700;
color: inherit;
}
.menu-btn.active {
color: var(--figma-blue);
}
.menu-btn.active .tab-btn-icon {
filter: invert(24%) sepia(92%) saturate(2412%) hue-rotate(200deg) brightness(96%) contrast(101%);
}
.menu-btn-container {
position: relative;
width: 24px;
height: 24px;
display: grid;
place-items: center;
}
/* Match-detail parity snapshots: exact Figma shell assets with live hit areas above them. */
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .menubar {
padding: 0;
height: 77.78px;
background:
url('/webapp/static/figma-assets/matches/21-5616-bottom-menu.png') center top / 100% 100% no-repeat;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .menubar .menu-btn {
min-height: 77.78px;
padding: 0;
gap: 0;
opacity: 0;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .app-header {
padding: 0;
height: 80px;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .topbar {
min-height: 48px;
width: 390px;
margin: 15px auto 17px;
grid-template-columns: 119px 106px 119px;
gap: 23px;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .topbar-side {
min-width: 119px;
gap: 23px;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .top-icon-btn {
width: 48px;
height: 48px;
flex: 0 0 48px;
padding: 0;
border-radius: 0;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: none;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .top-icon-btn .tab-btn-icon {
opacity: 0;
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] #btn-sound-toggle {
background-image: url('/webapp/static/figma-assets/matches/top-shell/sound-btn.png');
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .top-icon-btn[data-tab="about"] {
background-image: url('/webapp/static/figma-assets/matches/top-shell/info-btn.png');
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .top-icon-btn[data-tab="friends"] {
background-image: url('/webapp/static/figma-assets/matches/top-shell/friends-btn.png');
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .top-icon-btn[data-tab="profile"] {
background-image: url('/webapp/static/figma-assets/matches/top-shell/profile-btn.png');
}
body[data-current-tab="my"][data-parity-screen="matches-active-detail"] .topbar-logo {
width: 106px;
height: 48px;
border-radius: 0;
background: url('/webapp/static/figma-assets/matches/top-shell/logo.png') center / 100% 100% no-repeat;
color: transparent;
font-size: 0;
letter-spacing: 0;
box-shadow: none;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen {
position: relative;
padding-top: 110px;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen > .screen-title {
position: absolute;
top: 23px;
left: 183px;
width: 54px;
height: 14px;
margin: 0;
background: url('/webapp/static/figma-assets/matches/title-tabs/title.png') center / 100% 100% no-repeat;
color: transparent;
font-size: 0;
line-height: 0;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen .subtabs.seg {
position: absolute;
top: 46px;
left: 14px;
width: 389px;
min-height: 47px;
padding: 0;
gap: 0;
border: 0;
border-radius: 23px;
background:
url('/webapp/static/figma-assets/matches/21-5613-match-categories.png') center top / 100% 100% no-repeat;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen .subtabs.seg .sub-btn {
min-height: 47px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
opacity: 0;
}
.screen {
min-height: calc(100vh - 182px);
}
.screen-title {
margin: 2px 0 12px;
text-align: center;
font-size: 22px;
line-height: 1.1;
font-weight: 700;
color: var(--figma-text);
}
.screen-card {
background: var(--figma-card);
border: 1px solid var(--figma-border);
border-radius: 26px;
box-shadow: var(--figma-shadow);
}
.screen-card--gradient {
padding: 12px;
border: none;
background: linear-gradient(180deg, var(--figma-blue) 0%, var(--figma-blue-soft) 100%);
}
.screen-card-title {
text-align: center;
font-size: 20px;
line-height: 1.1;
font-weight: 700;
}
.screen-card-title--light {
color: #ffffff;
}
.profile-screen {
display: grid;
gap: 12px;
align-content: start;
}
.profile-card.screen-card--gradient {
margin-bottom: 0;
padding: 9px 13px 14px;
border-radius: 34px;
box-shadow: none;
background:
linear-gradient(180deg, #0064D6 0%, rgba(0, 100, 214, 0) 81.829%),
linear-gradient(90deg, #BFD8F5 0%, #BFD8F5 100%);
}
.profile-card > .screen-card-title,
.profile-stats-title,
.profile-links-title {
font-size: 15px;
line-height: 1;
letter-spacing: 0;
}
.profile-card > .screen-card-title {
margin: 2px 0 8px;
}
.profile-hero {
position: relative;
padding-top: 10px;
}
.profile-avatar-wrap {
position: absolute;
top: 4px;
left: 0;
width: 68px;
height: 68px;
z-index: 2;
}
.profile-avatar-ring {
width: 100%;
height: 100%;
display: block;
padding: 3px;
border-radius: 999px;
background: linear-gradient(135deg, #4A9BF5 0%, #2D6FCF 100%);
box-sizing: border-box;
}
.avatar-img {
display: block;
width: 100%;
height: 100%;
border-radius: 999px;
object-fit: cover;
border: 2px solid #EFF6FF;
box-sizing: border-box;
}
.profile-hero-sheet {
position: relative;
z-index: 1;
margin-left: 45px;
min-height: 54px;
display: grid;
gap: 6px;
padding: 13px 19px 13px 43px;
border-radius: 0 31px 31px 0;
background: #EFF6FF;
color: var(--figma-text);
}
.profile-hero-main {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.profile-copy,
.profile-level-wrap {
display: grid;
gap: 5px;
}
.profile-level-wrap {
margin-left: auto;
min-width: 60px;
justify-items: start;
}
.profile-label {
font-size: 12px;
line-height: 1;
font-weight: 400;
color: var(--figma-gray);
}
.profile-name-value,
.profile-level-value {
font-size: 12px;
line-height: 1;
font-weight: 700;
color: var(--figma-text);
}
.profile-mini-btn {
width: auto;
min-height: 16px;
justify-self: end;
padding: 0 10px;
border-radius: 18px;
background: var(--figma-blue);
color: #EFF6FF;
font-size: 8px;
font-weight: 500;
letter-spacing: 0;
box-shadow: none;
}
.profile-id-chip {
width: 187px;
min-height: 22px;
margin: -21px 0 0 45px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 12px 0 14px;
border-radius: 0 0 31px 31px;
background: var(--figma-blue);
color: #EFF6FF;
position: relative;
z-index: 0;
}
.profile-id-chip-label {
font-size: 9px;
line-height: 1;
font-weight: 400;
color: #99C8FF;
}
.profile-id-chip-value {
font-size: 9px;
line-height: 1;
font-weight: 700;
color: #EFF6FF;
}
.profile-id-chip .icon-id {
position: relative;
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-left: 2px;
}
.profile-id-chip .icon-id::before,
.profile-id-chip .icon-id::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 1.5px solid #EFF6FF;
border-radius: 3px;
}
.profile-id-chip .icon-id::before {
top: 3px;
right: 2px;
}
.profile-id-chip .icon-id::after {
top: 8px;
left: 2px;
background: var(--figma-blue);
}
.profile-balance-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.08) 100%);
border: 1px solid rgba(255, 193, 7, 0.3);
border-radius: 12px;
}
.profile-balance-icon {
font-size: 18px;
line-height: 1;
}
.profile-balance-label {
font-family: "Nunito", sans-serif;
font-size: 13px;
font-weight: 600;
color: #666;
}
.profile-balance-value {
margin-left: auto;
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 700;
color: #D4850B;
}
.profile-stats-title {
margin: 11px 0 8px;
}
.profile-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 8px;
margin-top: 0;
}
.profile-stat-card {
position: relative;
min-height: 61px;
display: flex;
align-items: center;
padding: 13px 14px 13px 78px;
border-radius: 31px;
background: #EFF6FF;
color: var(--figma-text);
box-shadow: none;
overflow: visible;
}
.profile-stat-card .stat-icon {
position: absolute;
left: -2px;
top: 50%;
width: auto;
height: 64px;
margin: 0;
transform: translateY(-50%);
pointer-events: none;
}
.profile-stat-copy {
display: grid;
gap: 4px;
}
.profile-stat-label,
.profile-stat-value {
font-size: 12px;
line-height: 1;
}
.profile-stat-label {
font-weight: 400;
color: var(--figma-gray);
}
.profile-stat-value {
font-weight: 700;
color: var(--figma-text);
}
/* С2 – Top brawlers on profile */
.profile-brawlers-section {
margin-top: 12px;
}
.brawler-stats-title {
font-size: 13px;
font-weight: 600;
color: var(--figma-text);
margin-bottom: 8px;
}
.brawler-stats-row {
display: flex;
gap: 8px;
}
.brawler-stat-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 6px;
border-radius: 14px;
background: #EFF6FF;
}
.brawler-stat-icon {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.brawler-stat-name {
font-size: 11px;
font-weight: 600;
color: var(--figma-text);
text-align: center;
line-height: 1.2;
}
.brawler-stat-picks {
font-size: 10px;
color: var(--figma-gray);
}
[data-theme="dark"] .brawler-stat-item {
background: #1a2a40;
}
.profile-links-title {
margin: 0;
color: var(--figma-text);
}
.profile-links,
.button-container {
gap: 10px;
}
.profile-links {
display: grid;
}
.button-container-sec {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.social-button,
.social-button-inverse {
min-height: 53px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 18px;
gap: 8px;
border-radius: 10px;
text-decoration: none;
box-shadow: none;
}
.social-button {
background: var(--figma-blue);
}
.social-button-inverse {
background: #BFD8F5;
border: 2px solid #0064D6;
color: var(--figma-blue);
}
.big-btn-icon {
flex: 0 0 auto;
width: 20px;
height: auto;
}
.profile-links .low-text,
.profile-links .low-text-blue {
font-size: 12px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
.friends-page {
display: flex !important;
flex-direction: column;
height: 100vh;
gap: 0;
padding: 0;
background: var(--bg-color, #eff6ff);
}
.friends-subtabs {
padding: 12px 16px 8px;
grid-template-columns: repeat(4, 1fr) !important;
background: white;
border-bottom: 1px solid #B9CFE7;
}
.friends-detail-stack {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 16px;
}
.friends-sticky-footer {
margin-top: auto;
}
.friends-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: rgba(255,255,255,0.3);
color: white;
border-radius: 9px;
font-size: 10px;
margin-left: 4px;
}
.sub-btn.active .friends-tab-badge {
background: white;
color: var(--figma-blue);
}
.friend-row {
display: flex;
align-items: center;
gap: 12px;
background: white;
border: 1px solid #E3EDF8;
border-radius: 18px;
padding: 12px 14px;
margin-bottom: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.friend-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid #0064D6;
padding: 2px;
}
.friend-name {
font-weight: 700;
font-size: 14px;
color: #1a1a1a;
}
.friend-id {
font-size: 11px;
color: #7e7e7e;
}
.friend-actions {
margin-left: auto;
display: flex;
gap: 6px;
}
.friends-action-row input {
border: 1px solid #B9CFE7 !important;
border-radius: 12px !important;
padding: 10px 14px;
}
/* Перенос старых стилей, если они конфликтовали */
.friends-page,
.tournaments-screen,
.matches-screen,
.notif-page,
.about-page {
display: grid;
gap: 14px;
align-content: start;
}
.notif-page-title,
.about-page-title {
margin: 0;
}
.notif-card,
.notif-empty {
border: 1px solid var(--figma-border);
border-radius: 18px;
background: #FFFFFF;
box-shadow: var(--figma-shadow);
}
.friends-detail-stack,
.notif-feed,
.about-cards,
.about-links {
gap: 12px;
}
.friends-primary-btn,
.notif-toolbar .btn {
min-height: 38px;
border-radius: 10px;
background: var(--figma-blue);
color: #fff;
border: none;
font-size: 13px;
font-weight: 700;
}
.notif-toolbar .btn {
width: 100%;
}
.friends-hero-input-wrap input,
.friend-search input,
.friends-referral-row input,
.match-row input,
.modal input,
.modal textarea,
#input-room {
min-height: 42px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid #B9CFE7;
background: #fff;
color: var(--figma-text);
font-size: 14px;
}
.friend-row {
border: 1px solid #E3EDF8;
border-radius: 14px;
padding: 10px 12px;
box-shadow: none;
}
.friend-avatar {
background: var(--figma-blue-soft);
border-color: #96C0F0;
color: var(--figma-blue);
}
.referral-hint {
margin-top: 6px;
}
.subtabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 0;
padding: 0;
border: 0;
background: transparent;
}
.sub-btn,
.seg-btn {
min-width: 0;
min-height: 34px;
padding: 0 10px;
border-radius: 999px;
background: rgba(191, 216, 245, 0.55);
color: var(--figma-blue);
border: 1px solid transparent;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.sub-btn.active,
.seg-btn.active {
background: var(--figma-blue);
color: #fff;
}
.figma-list,
.list.cards {
display: grid;
gap: 12px;
border: none;
background: transparent;
border-radius: 0;
overflow: visible;
}
.card,
.card-item,
.detail-card,
.match-panel {
background: #FFFFFF;
border-color: var(--figma-border);
color: var(--figma-text);
}
.card {
border: 1px solid var(--figma-border);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--figma-shadow);
}
.card .divider {
height: 1px;
margin: 0;
background: #E7EEF6;
}
.card-item {
display: block;
padding: 12px 14px;
border: none;
border-radius: 18px;
box-shadow: var(--figma-shadow);
}
.card-main {
min-width: 0;
}
.card-title {
font-size: 16px;
line-height: 1.18;
font-weight: 700;
color: var(--figma-text);
white-space: normal;
}
.card-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 14px;
margin-top: 8px;
font-size: 13px;
color: #424242;
}
.card-meta .item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: normal;
}
.card-meta .item + .item::before {
content: none;
}
.card-meta .meta-strong {
font-weight: 700;
color: var(--figma-text);
}
.card-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-top: 12px;
}
.card-actions--full .btn {
width: 100%;
}
.tour-card {
padding: 14px 14px 12px;
}
.tour-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.tour-card__status {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: #DCEBFF;
color: var(--figma-blue);
font-size: 11px;
font-weight: 700;
text-align: center;
}
/* Tournament search/filter bar */
.tour-filter-bar { padding: 8px 0; }
.tour-search-input {
width: 100%; box-sizing: border-box; padding: 8px 12px;
border: 1px solid var(--border-color, #e0e0e0); border-radius: 10px;
font-size: 14px; background: var(--card-bg, #fff); color: var(--text-primary, #1a1a1a);
outline: none; transition: border-color 0.2s;
}
.tour-search-input:focus { border-color: var(--accent, #2563eb); }
[data-theme="dark"] .tour-search-input { background: #1c1c1e; color: #f5f5f5; border-color: #3a3a3c; }
[data-theme="dark"] .tour-search-input:focus { border-color: #5b9bf5; }
.tour-filter-chips { display: flex; gap: 6px; margin-top: 8px; }
.tour-filter-chips .chip {
padding: 4px 12px; border-radius: 14px; font-size: 13px; font-weight: 600;
border: 1px solid var(--border-color, #e0e0e0); background: transparent;
color: var(--text-secondary, #8e8e93); cursor: pointer; transition: all 0.15s;
}
.tour-filter-chips .chip.active { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }
[data-theme="dark"] .tour-filter-chips .chip { border-color: #3a3a3c; color: #aeaeb2; }
[data-theme="dark"] .tour-filter-chips .chip.active { background: #5b9bf5; border-color: #5b9bf5; color: #fff; }
.tour-card--joined {
border-left: 3px solid #16a34a;
}
.tour-card__joined-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
background: rgba(22, 163, 74, 0.15);
color: #16a34a;
font-size: 11px;
font-weight: 600;
margin-left: auto;
flex-shrink: 0;
}
.tour-card__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 16px;
margin-top: 10px;
}
.tour-card__stat {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: #212121;
}
.tour-card__stat svg {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--figma-gray);
}
.tour-card__hint {
margin-top: 8px;
font-size: 12px;
color: var(--figma-gray);
}
.tour-card__result {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #E7EEF6;
}
.tour-card__result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tour-card__result-label {
font-size: 14px;
font-weight: 700;
color: var(--figma-text);
}
.tour-card__result-value {
min-width: 0;
text-align: right;
font-size: 14px;
font-weight: 700;
color: var(--figma-text);
}
.tour-card__cta {
min-height: 38px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
border: none;
}
.tour-card__cta--blue {
background: var(--figma-blue);
color: #fff;
}
.tour-card__cta--green {
background: var(--figma-green);
color: #fff;
}
.tour-card__cta--ghost {
background: rgba(191, 216, 245, 0.55);
color: var(--figma-blue);
border: 1px solid #96C0F0;
}
.empty-block {
justify-content: center;
flex-direction: column;
text-align: center;
padding: 24px 16px;
border: 1px dashed #BFD0E4;
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
box-shadow: none;
color: var(--figma-gray);
}
.empty-block .emoji { font-size: 28px; margin-bottom: 4px; }
.empty-block .text { font-size: 14px; font-weight: 500; line-height: 1.4; }
.empty-block .hint { font-size: 12px; color: #9ca3af; margin-top: 4px; }
[data-theme="dark"] .empty-block { background: rgba(28,28,30,0.8); border-color: #3a3a3c; }
[data-theme="dark"] .empty-block .hint { color: #636366; }
.detail-card {
width: 100%;
max-height: none;
padding: 14px;
border: 1px solid var(--figma-border);
border-radius: 18px;
box-shadow: var(--figma-shadow);
}
.match-active-card .match-composite-top,
.match-history-card .match-composite-top,
.match-active-card .match-composite-bottom,
.match-history-card .match-composite-bottom {
box-shadow: none;
border-radius: 0;
}
.match-composite-bottom .tour-card__result {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.match-record-card {
overflow: hidden;
border: 1px solid #E7E7E7;
border-radius: 24px;
background: #FFFFFF;
box-shadow: none;
}
.match-record-card .card-item {
background: transparent;
border: none;
box-shadow: none;
}
.match-record-card .divider,
.match-record__divider {
height: 1px;
margin: 0 12px;
background: #B7B7B7;
}
.match-record-preview {
padding: 11px 12px 8px;
}
.match-record-preview__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.match-record-preview__col {
min-width: 0;
}
.match-record-preview__title {
margin: 0;
font-size: 19px;
line-height: 1;
font-weight: 700;
color: #1A1A1A;
}
.match-record-preview__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px;
margin-top: 1px;
font-size: 12px;
line-height: 1.1;
}
.match-record-preview__meta-label {
color: #8F8F8F;
font-weight: 500;
}
.match-record-preview__meta-value {
color: #202020;
font-weight: 700;
}
.match-record-detail {
background: transparent;
}
.match-record-panel {
margin-top: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
#my-active-composite #my-active-detail.detail-card {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.match-record__section {
padding: 8px 12px;
}
.match-record__summary-title {
margin: 0 0 7px;
font-size: 19px;
line-height: 1;
font-weight: 700;
color: #1A1A1A;
}
.match-record__stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 18px;
}
.match-record__stat {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.match-record__stat-copy {
min-width: 0;
}
.match-record__stat-label {
display: none;
}
.match-record__stat-value {
display: inline-block;
font-size: 15px;
line-height: 1.15;
font-weight: 700;
color: #1E1E1E;
}
.match-record__stat-icon,
.match-record__line-icon,
.match-record__set-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: #9A9A9A;
flex: 0 0 18px;
}
.match-record__stat-icon svg,
.match-record__line-icon svg,
.match-record__set-icon svg {
width: 18px;
height: 18px;
}
.match-record__prizes {
display: grid;
gap: 8px;
}
.match-record__line {
display: grid;
grid-template-columns: 18px minmax(0, auto) minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.match-record__line-label {
color: #8F8F8F;
font-size: 14px;
line-height: 1.1;
font-weight: 500;
}
.match-record__line-value {
color: #1F1F1F;
font-size: 15px;
line-height: 1.1;
font-weight: 700;
}
.match-record__sets {
display: grid;
gap: 8px;
}
.match-record__set-line {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
font-size: 13px;
line-height: 1.1;
}
.match-record__set-prefix {
color: #8F8F8F;
font-weight: 500;
flex: 0 0 auto;
}
.match-record__set-detail {
color: #1C1C1C;
font-weight: 700;
min-width: 0;
}
.match-record__set-fights {
margin-left: auto;
color: #1C1C1C;
font-weight: 700;
white-space: nowrap;
}
.match-record__footer {
display: grid;
gap: 12px;
padding-top: 8px;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
}
.match-record__footer-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 174px;
align-items: center;
gap: 12px;
}
.match-record__footer-grid {
display: grid;
grid-template-columns: auto auto;
gap: 4px 12px;
align-items: center;
}
.match-record__footer-labels,
.match-record__footer-values {
display: grid;
gap: 4px;
}
.match-record__footer-labels {
color: #8F8F8F;
font-size: 14px;
line-height: 1.1;
font-weight: 500;
}
.match-record__footer-values {
color: #1A1A1A;
font-size: 15px;
line-height: 1.1;
font-weight: 700;
}
.match-record__bracket-btn {
width: 100%;
min-height: 38px;
padding: 7px 16px;
border-radius: 15px;
background: #176BDA;
color: #FFFFFF;
border: none;
font-size: 13px;
font-weight: 700;
}
.match-record__hint {
text-align: center;
font-size: 11px;
line-height: 1.1;
color: #8F8F8F;
}
.match-record__action-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
margin-top: 4px;
}
.match-record__action-row.is-draft {
display: none;
}
.match-record__action-row .btn,
.match-record__action-row #complaint-row,
.match-record__action-row #complaint-row .btn {
width: 100%;
}
.match-record__action-row #complaint-row {
margin: 0;
}
.match-record__action-row .btn {
min-height: 38px;
border-radius: 15px;
font-size: 16px;
line-height: 1;
}
.match-record__action-row #btn-ready {
background: #1FA847;
border: none;
color: #FFFFFF;
}
.match-record__action-row #btn-complaint {
background: #F84444;
border: none;
color: #FFFFFF;
}
#set-info-row {
width: 100%;
margin-bottom: 2px;
}
#set-info {
width: 100%;
color: #5F5F5F;
font-size: 14px;
line-height: 1.18;
}
#room-row {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: stretch;
}
#btn-send-room {
min-width: 138px;
min-height: 42px;
padding: 0 18px;
border-radius: 14px;
border: none;
background: #176BDA;
color: #FFFFFF;
font-size: 13px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
#complaint-row.match-row--draft {
width: 100%;
margin: 0;
}
#complaint-row.match-row--draft .btn {
width: 100%;
min-height: 36px;
border-radius: 15px;
font-size: 16px;
line-height: 1;
}
#my-active-detail .match-info.hidden,
#my-active-detail .match-row.hidden {
display: none !important;
}
@media (max-width: 390px) {
.match-record-preview__grid,
.match-record__stats-grid,
.match-record__footer-main {
grid-template-columns: 1fr;
}
.match-record__set-line {
flex-wrap: wrap;
}
.match-record__set-fights {
margin-left: 25px;
}
}
.detail-head {
display: flex;
align-items: center;
gap: 10px;
}
.detail-title {
font-size: 18px;
line-height: 1.15;
font-weight: 700;
color: var(--figma-text);
}
.head-tabs {
display: inline-flex;
gap: 6px;
margin-left: auto;
}
.head-tab {
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
border: none;
}
.detail-meta {
margin: 10px 0 0;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
font-size: 13px;
color: #4F4F4F;
}
.detail-note {
margin-top: 8px;
}
.match-panel {
margin-top: 14px;
border: 1px solid var(--figma-border);
border-radius: 18px;
padding: 14px;
box-shadow: none;
}
.match-info {
display: grid;
gap: 6px;
font-size: 14px;
}
/* П3: Opponent mini-profile */
.opp-scout {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 0;
font-size: 12px;
color: #6b7280;
}
.opp-scout__item { font-weight: 500; }
.opp-scout__sep { color: #d1d5db; }
[data-theme="dark"] .opp-scout { color: #9ca3af; }
[data-theme="dark"] .opp-scout__sep { color: #4b5563; }
.match-status {
margin-top: 2px;
}
.match-row {
margin: 10px 0 0;
flex-wrap: wrap;
}
.match-row .btn {
min-height: 38px;
flex: 1 1 0;
}
.btn {
width: auto;
min-height: 38px;
padding: 8px 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
}
.btn-primary {
background: var(--figma-blue);
color: #fff;
border-color: transparent;
}
.btn-secondary {
background: rgba(191, 216, 245, 0.55);
color: var(--figma-blue);
border: 1px solid #96C0F0;
}
.btn-danger {
background: var(--figma-red);
color: #fff;
border-color: transparent;
}
#btn-ready {
background: var(--figma-green);
color: #fff;
border: none;
}
.room-ready-copy {
margin-bottom: 12px;
}
.room-ready-message {
margin-bottom: 6px;
font-size: 14px;
color: #666666;
}
.room-ready-link {
font-size: 18px;
line-height: 1.1;
font-weight: 800;
color: var(--figma-blue);
}
.matches-screen .subtabs.seg {
padding: 4px;
gap: 4px;
border: none;
border-radius: 16px;
background: #BFDAFF;
}
.matches-screen .subtabs.seg .sub-btn {
min-height: 36px;
padding: 0 12px;
border: none;
border-radius: 13px;
background: transparent;
color: #156BDB;
box-shadow: none;
font-size: 13px;
font-weight: 700;
}
.matches-screen .subtabs.seg .sub-btn.active {
background: #156BDB;
color: #FFFFFF;
}
.matches-screen .screen-title {
margin-bottom: 10px;
}
.seg-tab-copy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.seg-tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
color: currentColor;
flex: 0 0 13px;
}
.seg-tab-icon svg {
width: 13px;
height: 13px;
display: block;
}
#my-active-detail.match-record-detail {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#my-active-detail .match-record-panel {
margin-top: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#my-active-detail .match-record__action-row #complaint-row {
display: block;
}
.notif-toolbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 0;
}
.notif-card {
padding: 14px 16px;
}
.notif-card.is-read .notif-card-title,
.notif-card.is-read .notif-card-body,
.notif-card.is-read .notif-card-time {
color: #9A9A9A;
}
.notif-card-title {
font-size: 16px;
}
.notif-card-body {
font-size: 14px;
line-height: 1.3;
}
.notif-empty {
padding: 16px;
font-size: 14px;
}
.about-page {
gap: 12px;
}
.about-card {
position: relative;
min-height: 128px;
display: grid;
grid-template-columns: minmax(0, 1fr) 106px;
align-items: stretch;
gap: 0;
padding: 0 14px 0 16px;
border: none;
border-radius: 29px;
overflow: hidden;
box-shadow: none;
}
.about-card::before {
content: "";
position: absolute;
inset: -28px auto -22px;
width: 240px;
height: 220px;
background: rgba(0, 0, 0, 0.12);
clip-path: polygon(50% 0%, 60% 33%, 100% 33%, 68% 56%, 82% 100%, 50% 73%, 18% 100%, 32% 56%, 0% 33%, 40% 33%);
opacity: 0.24;
pointer-events: none;
}
.about-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
pointer-events: none;
}
.about-card--media-right::before {
right: -44px;
transform: rotate(10deg);
}
.about-card--media-left {
grid-template-columns: 104px minmax(0, 1fr);
}
.about-card--media-left::before {
left: -48px;
transform: rotate(-10deg) scaleX(-1);
}
.about-card--blue {
background: linear-gradient(135deg, #0C6AE0 0%, #005CCF 100%);
}
.about-card--orange {
background: linear-gradient(135deg, #E54A00 0%, #D73A00 100%);
}
.about-card--green {
background: linear-gradient(135deg, #05A24A 0%, #00963E 100%);
}
.about-card--magenta {
background: linear-gradient(135deg, #D10F76 0%, #C30869 100%);
}
.about-card-copy {
position: relative;
z-index: 2;
display: grid;
align-content: start;
gap: 6px;
padding: 15px 0 16px;
}
.about-card--media-left .about-card-copy {
order: 2;
padding-left: 0;
}
.about-card-copy--rich {
gap: 4px;
}
.about-card-copy--links {
gap: 10px;
padding-top: 14px;
padding-bottom: 18px;
}
.about-card-rich {
display: grid;
gap: 4px;
max-width: 226px;
}
.about-card-rich > * {
margin: 0;
}
.about-card-title,
.about-card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.about-card-title {
-webkit-line-clamp: 3;
font-size: 18px;
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.02em;
color: #FFFFFF;
}
.about-card-text {
-webkit-line-clamp: 4;
margin: 0;
max-width: 216px;
font-size: 12px;
line-height: 1.04;
font-weight: 500;
color: rgba(239, 246, 255, 0.92);
white-space: pre-line;
}
.about-card--media-left .about-card-text {
max-width: 198px;
}
.about-card-kicker,
.about-card-heading,
.about-card-body,
.about-card-note {
color: #FFFFFF;
letter-spacing: -0.03em;
}
.about-card-kicker {
font-size: 21px;
line-height: 0.94;
font-weight: 700;
}
.about-card-heading {
font-size: 19px;
line-height: 0.95;
font-weight: 700;
}
.about-card-body {
font-size: 13px;
line-height: 0.93;
font-weight: 700;
}
.about-card-note {
font-size: 10px;
line-height: 1.02;
font-weight: 400;
color: rgba(231, 241, 255, 0.92);
}
.about-card-note--accent {
color: #C7DEFF;
}
.about-underline {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
}
.about-card--welcome .about-card-rich {
max-width: 242px;
}
.about-card--welcome .about-card-heading {
font-size: 20px;
}
.about-card--welcome .about-card-note {
max-width: 236px;
}
.about-card--friends .about-card-rich {
max-width: 248px;
}
.about-card--friends .about-card-heading {
font-size: 15px;
line-height: 0.92;
}
.about-card--friends .about-card-body {
max-width: 242px;
font-size: 12.5px;
line-height: 0.92;
}
.about-card--community .about-card-rich {
max-width: 234px;
}
.about-card--community .about-card-heading {
font-size: 16px;
line-height: 0.95;
}
.about-card--community .about-card-note {
max-width: 228px;
font-size: 10.2px;
}
.about-card-media {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
min-height: 100%;
pointer-events: none;
}
.about-card--media-right .about-card-media {
justify-content: flex-end;
}
.about-card--media-left .about-card-media {
order: 1;
justify-content: flex-start;
}
.about-card-media img {
width: auto;
height: 144px;
object-fit: contain;
border-radius: 0;
box-shadow: none;
filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
}
.about-card-media--poster img {
width: auto;
height: 148px;
}
.about-card--media-right .about-card-media img {
margin-right: -18px;
}
.about-card--media-left .about-card-media img {
margin-left: -14px;
}
.about-card--welcome .about-card-media img {
height: 150px;
margin-right: -22px;
}
.about-card--friends .about-card-media img {
height: 136px;
margin-left: -20px;
}
.about-card--community .about-card-media img {
height: 142px;
margin-right: -20px;
}
.about-card--links,
.about-card--fairplay {
grid-template-columns: 92px minmax(0, 1fr);
margin-top: 56px;
}
.about-card--links .about-card-title {
font-size: 17px;
}
.about-card--links .about-card-text {
-webkit-line-clamp: 3;
max-width: none;
font-size: 11.5px;
line-height: 1.08;
}
.about-card--links .about-card-media img {
height: 150px;
margin-left: -20px;
}
.about-card-copy--fairplay {
gap: 0;
padding-top: 14px;
padding-bottom: 18px;
}
.about-card-rich--fairplay {
max-width: 246px;
gap: 8px;
}
.about-card-heading--fairplay {
font-size: 16.5px;
line-height: 0.98;
letter-spacing: -0.03em;
}
.about-card-note--fairplay {
max-width: 244px;
font-size: 12.8px;
line-height: 0.98;
color: #F5BFC0;
}
.about-card--fairplay .about-card-media img {
height: 164px;
margin-left: -18px;
}
.about-link-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.about-link-pill {
min-height: 29px;
padding: 0 11px;
border-radius: 999px;
background: rgba(239, 246, 255, 0.16);
border: 1px solid rgba(239, 246, 255, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
}
.about-card--snapshot {
display: block;
min-height: 0;
padding: 0;
border-radius: 29px;
}
.about-card--snapshot::before,
.about-card--snapshot::after {
display: none;
}
.about-card-snapshot-image {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
}
.overlay {
background: rgba(11, 30, 55, 0.48);
}
.modal {
background: #FFFFFF;
border: 1px solid var(--figma-border);
border-radius: 18px;
color: var(--figma-text);
}
.status,
.muted,
.set-line,
.friend-username,
.notif-card-time {
color: var(--figma-gray);
}
.badge {
border: 1px solid #B9CFE7;
background: rgba(191, 216, 245, 0.35);
color: var(--figma-blue);
}
.toast {
background: #0f2340;
border-color: #284871;
}
@media (max-width: 380px) {
.app-main.container {
padding-left: 10px;
padding-right: 10px;
}
.topbar {
gap: 8px;
}
.topbar-logo {
font-size: 14px;
}
.profile-hero-sheet {
padding-right: 12px;
}
.profile-stats-grid,
.tour-card__stats,
.card-meta {
grid-template-columns: 1fr 1fr;
}
.button-container-sec {
grid-template-columns: 1fr;
}
}
/* Tighten Friends, Matches history, and About fair-play card toward the current Figma sources. */
.friends-page {
gap: 10px;
padding-bottom: 92px;
}
/* Friends page overrides — now using subtabs like tournaments */
.friends-page {
padding-bottom: 140px;
}
.friends-subtabs.subtabs.seg {
grid-template-columns: repeat(4, 1fr);
}
.friends-detail-panel {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.friend-list {
display: grid;
gap: 10px;
}
.friend-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid #d7d7d7;
border-radius: 16px;
background: #ffffff;
box-shadow: none;
}
.friend-info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
}
.friend-avatar {
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: 999px;
background: #dceaff;
border: 1px solid #96c0f0;
color: #0064d6;
}
.friend-text {
display: grid;
gap: 3px;
min-width: 0;
}
.friend-name {
font-size: 16px;
font-weight: 700;
line-height: 1.1;
color: #111111;
}
.friend-username {
font-size: 13px;
line-height: 1.15;
color: #8c8c8c;
}
.friend-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.friend-actions .btn,
.friends-referral-row .btn {
min-height: 38px;
padding: 0 14px;
border-radius: 14px;
font-size: 13px;
font-weight: 600;
}
.friend-actions .badge {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 12px;
border-radius: 14px;
background: #dcebff;
color: #0064d6;
font-size: 13px;
font-weight: 600;
}
.friends-referral-row {
display: grid;
gap: 10px;
}
#referral-card .muted.small,
.referral-hint {
margin-top: 10px;
font-size: 13px;
line-height: 1.3;
color: #6e6e6e;
}
body[data-current-tab="my"] .matches-screen .subtabs.seg {
padding: 4px;
border-radius: 20px;
background: #bed6f4;
}
body[data-current-tab="my"] .matches-screen .subtabs.seg .sub-btn {
min-height: 48px;
padding: 0 14px;
border-radius: 16px;
background: transparent;
color: #0064d6;
font-size: 13px;
font-weight: 600;
}
body[data-current-tab="my"] .matches-screen .subtabs.seg .sub-btn.active {
background: #0064d6;
color: #ffffff;
}
.match-history-card {
border-color: #b7b7b7;
border-radius: 28px;
box-shadow: none;
}
.match-history-card .divider {
margin: 0 18px;
background: #b7b7b7;
}
.match-history-card .match-composite-top {
padding: 18px 20px 12px;
}
.match-history-card .match-composite-bottom {
padding: 10px 20px 14px;
}
.match-history-card .tour-card__header {
gap: 10px;
}
.match-history-card .card-title {
font-size: 18px;
line-height: 1;
letter-spacing: -0.02em;
}
.match-history-card .tour-card__status {
min-height: 24px;
padding: 0 10px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
}
.match-history-card .tour-card__stats {
gap: 8px 22px;
margin-top: 12px;
}
.match-history-card .tour-card__stat {
gap: 6px;
font-size: 15px;
font-weight: 600;
}
.match-history-card .tour-card__stat svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: #8a8a8a;
}
.match-history-card .tour-card__result {
padding-top: 0;
}
.match-history-card .tour-card__result-row {
align-items: flex-end;
}
.match-history-card .tour-card__result-label,
.match-history-card .tour-card__result-value {
font-size: 16px;
line-height: 1.02;
}
.match-history-card .tour-card__result-value {
max-width: 58%;
}
.about-card-inline-link,
.about-card-inline-link:visited {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
}
/* Shell stability and cross-screen alignment fixes. */
.app-header,
.menubar {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
transform: none;
max-width: var(--figma-app-width);
}
.app-header {
top: 0;
z-index: 90;
padding: 10px 12px 10px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98) 76%, rgba(239, 246, 255, 0.92));
backdrop-filter: blur(10px);
}
.menubar {
bottom: 0;
z-index: 95;
padding: 8px 14px 10px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0), rgba(239, 246, 255, 0.96) 24%, rgba(239, 246, 255, 0.98));
}
.app-main.container {
padding-top: 88px;
padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
.topbar {
grid-template-columns: 96px minmax(120px, 1fr) 96px;
}
.topbar-side {
min-width: 96px;
}
.top-icon-btn,
.menu-btn,
.menu-btn .tab-btn-icon {
transition: background-color 0.18s ease, color 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}
body[data-current-tab="my"] .app-header {
height: auto;
padding: 10px 12px 10px;
}
body[data-current-tab="my"] .topbar {
width: auto;
margin: 0;
min-height: 44px;
grid-template-columns: 96px minmax(120px, 1fr) 96px;
gap: 4px;
}
body[data-current-tab="my"] .topbar-side {
min-width: 96px;
gap: 12px;
}
body[data-current-tab="my"] .top-icon-btn {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 11px;
background: var(--figma-gray);
background-image: none;
box-shadow: 0 6px 14px rgba(33, 53, 81, 0.12);
}
body[data-current-tab="my"] .top-icon-btn.active {
background: var(--figma-blue);
}
body[data-current-tab="my"] .top-icon-btn .tab-btn-icon,
body[data-current-tab="my"] .menubar .menu-btn {
opacity: 1;
}
body[data-current-tab="my"] #btn-sound-toggle,
body[data-current-tab="my"] .top-icon-btn[data-tab="about"],
body[data-current-tab="my"] .top-icon-btn[data-tab="friends"],
body[data-current-tab="my"] .top-icon-btn[data-tab="profile"] {
background-image: none;
}
body[data-current-tab="my"] .topbar-logo {
width: 112px;
min-height: 48px;
flex: 0 0 112px;
background: none;
color: #0064d6;
}
body[data-current-tab="my"] .menubar {
height: auto;
padding: 8px 14px 10px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0), rgba(239, 246, 255, 0.96) 24%, rgba(239, 246, 255, 0.98));
}
body[data-current-tab="my"] .menubar .menu-btn {
min-height: 62px;
padding: 0 0 3px;
gap: 2px;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen {
position: static;
padding-top: 0;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen > .screen-title {
position: static;
top: auto;
left: auto;
width: auto;
height: auto;
margin: 0 0 10px;
background: none;
color: var(--figma-text);
font-size: 22px;
line-height: 1.1;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen .subtabs.seg {
position: static;
top: auto;
left: auto;
width: auto;
min-height: 0;
padding: 4px;
gap: 4px;
border-radius: 20px;
background: #bed6f4;
}
body[data-current-tab="my"][data-my-sub="active"] .matches-screen .subtabs.seg .sub-btn {
min-height: 48px;
padding: 0 14px;
border-radius: 16px;
background: transparent;
opacity: 1;
}
.matches-screen,
.tournaments-screen {
display: grid;
gap: 10px;
align-content: start;
}
.matches-screen .screen-title,
.tournaments-screen .screen-title {
margin: 0 0 10px;
}
.matches-screen .subtabs.seg,
.tournaments-screen .subtabs.seg,
.friends-page .subtabs.seg,
body[data-current-tab="my"] .matches-screen .subtabs.seg {
padding: 4px;
gap: 4px;
border: none;
border-radius: 20px;
background: #bed6f4;
}
.matches-screen .subtabs.seg .sub-btn,
.tournaments-screen .subtabs.seg .sub-btn,
.friends-page .subtabs.seg .sub-btn,
body[data-current-tab="my"] .matches-screen .subtabs.seg .sub-btn {
min-height: 48px;
padding: 0 10px;
border: none;
border-radius: 16px;
background: transparent;
box-shadow: none;
color: #0064d6;
font-size: 12px;
font-weight: 600;
}
.matches-screen .subtabs.seg .sub-btn.active,
.tournaments-screen .subtabs.seg .sub-btn.active,
.friends-page .subtabs.seg .sub-btn.active,
body[data-current-tab="my"] .matches-screen .subtabs.seg .sub-btn.active {
background: #0064d6;
color: #ffffff;
}
.profile-hero {
padding-top: 12px;
}
.profile-avatar-wrap {
top: 2px;
left: 4px;
width: 76px;
height: 76px;
}
.profile-hero-sheet {
margin-left: 52px;
min-height: 58px;
padding: 12px 18px 12px 40px;
}
.profile-hero-main {
align-items: flex-start;
}
.profile-id-chip {
width: 192px;
min-height: 24px;
margin: -18px 0 0 52px;
padding: 0 12px 0 16px;
}
.profile-stats-title {
margin: 14px 0 10px;
}
.profile-stat-card {
min-height: 68px;
padding: 12px 14px 12px 84px;
}
.profile-stat-card .stat-icon {
left: -8px;
width: 82px;
height: 82px;
object-fit: contain;
object-position: center;
}
.profile-stat-card:nth-child(1) .stat-icon {
left: -12px;
}
.profile-stat-card:nth-child(2) .stat-icon {
left: -6px;
}
.profile-stat-card:nth-child(3) .stat-icon {
left: -10px;
height: 78px;
}
.profile-stat-card:nth-child(4) .stat-icon {
left: -6px;
height: 76px;
top: 52%;
}
.about-links {
gap: 0;
}
.about-card--fairplay {
margin-top: 8px;
min-height: 164px;
}
.about-card--fairplay::before {
top: -14px;
left: -12px;
bottom: auto;
width: 198px;
height: 192px;
opacity: 0.7;
background:
url('/webapp/static/figma-assets/about/47-3726-star-1-desktop.svg') 8px 6px / 120px 120px no-repeat,
url('/webapp/static/figma-assets/about/47-3726-star-2-desktop.svg') 112px 20px / 46px 46px no-repeat,
url('/webapp/static/figma-assets/about/47-3726-star-3-desktop.svg') 82px 110px / 34px 34px no-repeat;
clip-path: none;
transform: none;
}
.about-card--fairplay .about-card-copy--fairplay {
padding-top: 16px;
padding-bottom: 16px;
}
.about-card--fairplay .about-card-rich--fairplay {
gap: 6px;
}
.about-card--fairplay .about-card-media img {
height: 160px;
margin-left: -12px;
}
/* Keep the stronger snapshot shell only inside the dedicated parity fixture. */
body[data-parity-screen="matches-active-detail"] .menubar {
padding: 0;
height: 77.78px;
background: url('/webapp/static/figma-assets/matches/21-5616-bottom-menu.png') center top / 100% 100% no-repeat;
}
body[data-parity-screen="matches-active-detail"] .menubar .menu-btn {
min-height: 77.78px;
padding: 0;
gap: 0;
opacity: 0;
}
body[data-parity-screen="matches-active-detail"] .app-header {
padding: 0;
height: 80px;
background: transparent;
backdrop-filter: none;
}
body[data-parity-screen="matches-active-detail"] .topbar {
min-height: 48px;
width: 390px;
margin: 15px auto 17px;
grid-template-columns: 119px 106px 119px;
gap: 23px;
}
body[data-parity-screen="matches-active-detail"] .topbar-side {
min-width: 119px;
gap: 23px;
}
body[data-parity-screen="matches-active-detail"] .top-icon-btn {
width: 48px;
height: 48px;
flex: 0 0 48px;
padding: 0;
border-radius: 0;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: none;
}
body[data-parity-screen="matches-active-detail"] .top-icon-btn .tab-btn-icon {
opacity: 0;
}
body[data-parity-screen="matches-active-detail"] #btn-sound-toggle {
background-image: url('/webapp/static/figma-assets/matches/top-shell/sound-btn.png');
}
body[data-parity-screen="matches-active-detail"] .top-icon-btn[data-tab="about"] {
background-image: url('/webapp/static/figma-assets/matches/top-shell/info-btn.png');
}
body[data-parity-screen="matches-active-detail"] .top-icon-btn[data-tab="friends"] {
background-image: url('/webapp/static/figma-assets/matches/top-shell/friends-btn.png');
}
body[data-parity-screen="matches-active-detail"] .top-icon-btn[data-tab="profile"] {
background-image: url('/webapp/static/figma-assets/matches/top-shell/profile-btn.png');
}
body[data-parity-screen="matches-active-detail"] .topbar-logo {
width: 106px;
height: 48px;
border-radius: 0;
background: url('/webapp/static/figma-assets/matches/top-shell/logo.png') center / 100% 100% no-repeat;
color: transparent;
font-size: 0;
letter-spacing: 0;
box-shadow: none;
}
body[data-parity-screen="matches-active-detail"] .matches-screen > .screen-title {
display: none !important;
}
/* UX wave 7: unified tabs, cleaner sections, brighter atmosphere. */
body {
background:
radial-gradient(1000px 420px at 50% -120px, rgba(0, 100, 214, 0.12), rgba(239, 246, 255, 0) 70%),
linear-gradient(180deg, #f4f9ff 0%, #eff6ff 52%, #e8f2ff 100%);
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.26;
background-image:
radial-gradient(circle at 14% 16%, rgba(0, 100, 214, 0.13) 0, rgba(0, 100, 214, 0) 12%),
radial-gradient(circle at 87% 22%, rgba(255, 126, 28, 0.12) 0, rgba(255, 126, 28, 0) 14%),
radial-gradient(circle at 78% 80%, rgba(0, 100, 214, 0.1) 0, rgba(0, 100, 214, 0) 16%);
}
.friends-page {
padding-bottom: 102px;
}
.friends-page .subtabs.seg,
.notif-page .subtabs.seg {
padding: 4px;
gap: 4px;
border: 0;
border-radius: 20px;
background: #bfd8f5;
}
.friends-page .subtabs.seg .sub-btn,
.notif-page .subtabs.seg .sub-btn {
min-height: 46px;
border-radius: 16px;
border: 0;
background: transparent;
color: #0064d6;
font-size: 12px;
font-weight: 700;
}
.friends-page .subtabs.seg .sub-btn.active,
.notif-page .subtabs.seg .sub-btn.active {
background: #0064d6;
color: #ffffff;
}
.notif-subtabs {
grid-template-columns: repeat(3, 1fr) !important;
}
.notif-page {
padding-bottom: 104px;
}
.notif-toolbar {
margin-top: 2px;
}
.about-page {
position: relative;
padding-bottom: 112px;
}
.about-cards,
.about-links {
gap: 12px;
}
.about-card {
box-shadow: 0 12px 28px rgba(18, 68, 125, 0.16);
}
.about-card--fairplay {
border: 1px solid rgba(157, 15, 108, 0.26);
}
/* ═══════════════════════════════════════════════════════
Match Chat (С3)
═══════════════════════════════════════════════════════ */
.match-chat-modal {
max-width: 360px;
display: flex;
flex-direction: column;
max-height: 70vh;
}
.admin-chat-modal {
max-width: 380px;
}
.match-chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #2a2a2c;
margin-bottom: 8px;
}
.match-chat-messages {
flex: 1;
overflow-y: auto;
min-height: 120px;
max-height: 300px;
padding: 4px 0;
}
.chat-msg {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 6px;
}
.chat-msg--me {
align-items: flex-end;
}
.chat-msg-bubble {
background: #23232a;
color: #e5e7eb;
padding: 6px 10px;
border-radius: 12px;
font-size: 13px;
max-width: 80%;
word-break: break-word;
}
.chat-msg--me .chat-msg-bubble {
background: #1a6dff;
color: #fff;
}
.chat-msg-time {
font-size: 10px;
color: #666;
margin-top: 2px;
padding: 0 4px;
}
.chat-msg-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
padding: 0 4px;
}
.chat-msg-status {
font-size: 10px;
color: #8ca5c8;
}
.chat-msg-bubble--thread {
display: grid;
gap: 6px;
}
.thread-message-title {
font-size: 11px;
font-weight: 700;
color: #d5e6ff;
}
.thread-reply-preview {
border-left: 2px solid rgba(140, 186, 255, 0.65);
padding-left: 8px;
display: grid;
gap: 2px;
}
.thread-reply-preview__label {
font-size: 10px;
font-weight: 700;
color: #8ca5c8;
}
.thread-reply-preview__text {
font-size: 11px;
line-height: 1.3;
color: #bccde6;
}
.chat-reply-btn {
border: none;
background: transparent;
color: #6f8db7;
font-size: 12px;
padding: 0 2px;
min-width: 18px;
}
.admin-chat-reply {
margin-top: 8px;
}
.admin-chat-reply-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(21, 61, 116, 0.12);
border: 1px solid rgba(0, 100, 214, 0.16);
}
.admin-chat-reply-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.admin-chat-reply-label {
font-size: 11px;
font-weight: 700;
color: var(--figma-blue);
}
.admin-chat-reply-text {
font-size: 11px;
line-height: 1.35;
color: var(--figma-text);
}
.match-chat-input-row {
display: flex;
gap: 6px;
margin-top: 8px;
}
.match-chat-input-row .input {
flex: 1;
}
/* ═══════════════════════════════════════════════════════
Spectator Mode (Г1)
═══════════════════════════════════════════════════════ */
.spectator-card {
max-width: 420px;
margin: 0 auto;
max-height: 85vh;
overflow-y: auto;
}
.spectator-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid #2a2a2c;
}
.spectator-title {
font-size: 15px;
font-weight: 600;
color: #e5e7eb;
}
.spectator-content {
padding: 12px 16px;
}
.spectator-bracket-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.spec-match-card {
background: #1a1a1e;
border: 1px solid #2a2a2c;
border-radius: 10px;
padding: 10px 12px;
cursor: pointer;
position: relative;
transition: border-color 0.2s;
}
.spec-match-card:hover {
border-color: #3a3a42;
}
.spec-match-card.spec-live {
border-color: #22c55e;
animation: specPulse 2s infinite;
}
@keyframes specPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
50% { box-shadow: 0 0 8px 2px rgba(34,197,94,0.15); }
}
.spec-player {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #e5e7eb;
padding: 2px 0;
}
.spec-score {
font-weight: 700;
color: #fff;
}
.spec-live-badge {
position: absolute;
top: 6px;
right: 8px;
background: #22c55e;
color: #000;
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 6px;
text-transform: uppercase;
}
.spec-win-a .spec-player:first-child,
.spec-win-b .spec-player:last-child {
color: #22c55e;
}
.spectator-match-header {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 600;
color: #e5e7eb;
padding: 10px 0;
}
.spectator-vs {
color: #666;
font-size: 12px;
}
.spectator-score {
text-align: center;
font-size: 24px;
font-weight: 700;
color: #fff;
padding: 4px 0;
}
.spectator-sets {
padding: 8px 0;
}
.spectator-chat {
max-height: 150px;
overflow-y: auto;
padding: 8px 0;
border-top: 1px solid #2a2a2c;
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════════
Predictions (Г3)
═══════════════════════════════════════════════════════ */
.spectator-predictions {
border-top: 1px solid #2a2a2c;
margin-top: 12px;
padding-top: 12px;
}
.spectator-pred-title {
font-size: 14px;
font-weight: 600;
color: #e5e7eb;
margin-bottom: 8px;
}
.spectator-pred-sides {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #999;
margin-bottom: 8px;
}
.spectator-pred-form {
margin-top: 6px;
}
.spectator-pred-row {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.spectator-pred-row .btn {
font-size: 12px;
padding: 6px 10px;
}
.spectator-pred-row .input {
font-size: 13px;
padding: 6px 8px;
}
/* ===== MINI APP OVERHAUL ===== */
/* Subtle background pattern */
.app-main.container {
background: linear-gradient(180deg, #E8F1FC 0%, #F4F8FE 40%, #EFF6FF 100%);
min-height: calc(100vh - 70px);
}
/* Profile: remove "Профиль" and "Статистика" titles, make compact */
.profile-card > .screen-card-title:first-child {
display: none !important;
}
.profile-stats-title {
display: none !important;
}
/* Profile: narrower card, compact layout */
.profile-card.screen-card--gradient {
padding: 8px 10px 10px;
border-radius: 28px;
}
.profile-stats-grid {
gap: 6px 6px;
}
.profile-stat-card {
min-height: 52px;
padding: 10px 10px 10px 68px;
border-radius: 26px;
}
.profile-stat-card .stat-icon {
height: 52px;
}
/* Profile: Contacts title removal */
.profile-links-title {
display: none !important;
}
/* Friends: empty state styling */
.friends-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
gap: 8px;
color: var(--figma-gray);
}
.friends-empty-state img {
width: 64px;
height: 64px;
opacity: 0.6;
}
.friends-empty-state .text {
font-size: 14px;
font-weight: 500;
}
/* Notification section styling */
.notif-page {
display: flex;
flex-direction: column;
height: calc(100vh - 170px);
overflow: hidden;
gap: 10px;
align-content: start;
padding-bottom: 0;
}
.notif-page .notif-subtabs {
flex-shrink: 0;
}
.notif-page .notif-toolbar {
flex-shrink: 0;
}
.notif-page .notif-feed {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
}
/* Notifications: tab rename and icon styles */
.notif-subtabs .seg-btn {
font-size: 12px;
}
/* Friend row: invite to play + chat buttons */
.friend-action-invite,
.friend-action-chat {
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.friend-action-invite {
background: #17A34A;
color: #fff;
}
.friend-action-chat {
background: var(--figma-blue);
color: #fff;
}
/* Leaderboard button styling fix */
.lb-btn {
width: 100%;
margin-top: 8px;
min-height: 38px;
border-radius: 14px;
background: linear-gradient(135deg, #FFB800 0%, #FF9500 100%);
color: #fff;
font-size: 14px;
font-weight: 700;
border: none;
box-shadow: 0 4px 12px rgba(255, 149, 0, 0.25);
}
/* Avatar picker sections for achievements */
.ap-section-title {
grid-column: 1 / -1;
font-size: 13px;
font-weight: 700;
color: var(--tg-theme-hint-color, #8e8e93);
padding: 8px 0 2px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 4px;
}
/* Make friend rows more compact */
.friend-list {
gap: 6px;
}
.friend-row {
padding: 8px 10px;
}
/* Seg tab copy with icon */
.seg-tab-copy {
display: inline-flex;
align-items: center;
gap: 4px;
}
.seg-tab-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.seg-tab-icon svg {
width: 14px;
height: 14px;
}
/* Notification card improvements */
.notif-card {
padding: 14px 14px;
border-radius: 18px;
}
.notif-card-title {
font-size: 15px;
}
.notif-card-body {
font-size: 13px;
}
/* --- BRAWL STARS THEME OVERRIDES --- */
h1, h2, h3, h4, h5, h6,
.card-title, .profile-name, .btn, .tab-btn, .sub-btn,
.notif-page-title, .about-page-title, .friends-summary-count,
.tour-card__header .card-title, .topbar-btn {
font-family: 'Lilita One', 'Nunito', system-ui, sans-serif !important;
letter-spacing: 0.5px;
}
body {
font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}
/* Bouncy buttons */
.btn, .tab-btn, .sub-btn, .topbar-btn, .menu-btn {
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s, box-shadow 0.15s;
}
.btn:active, .tab-btn:active, .sub-btn:active, .topbar-btn:active, .menu-btn:active {
transform: scale(0.92) !important;
}
/* Enhancing gradients & background */
.app-main.container {
background:
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
linear-gradient(180deg, #E8F1FC 0%, #F4F8FE 50%, #EFF6FF 100%) !important;
min-height: calc(100vh - 70px);
}
[data-theme="dark"] .app-main.container {
background:
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
linear-gradient(180deg, #1f1f22 0%, #141416 50%, #111111 100%) !important;
}
/* Panels slide in slightly */
[data-tab-panel] {
animation: fadeSlideUp 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Tour cards to pop a bit more */
.tour-card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0,0,0,0.02) !important;
border: 1px solid rgba(0,0,0,0.03) !important;
transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1), box-shadow 0.2s;
}
.tour-card:active {
transform: scale(0.97);
}
/* 2026-04-14 final mobile override: authoritative profile shell */
@media (max-width: 520px) {
body {
--mini-header-lift: 76px !important;
}
.profile-screen,
.tournaments-screen,
.matches-screen,
.friends-page--v2,
.notif-page--v2 {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.app-header {
padding: calc(var(--mini-safe-top) + var(--mini-header-lift) + 10px) var(--mini-shell-gutter) 8px !important;
}
.app-main.container {
padding: calc(var(--mini-safe-top) + var(--mini-header-lift) + 88px) 0 calc(var(--mini-safe-bottom) + 116px) !important;
}
body[data-current-tab="profile"] .app-main.container {
padding-bottom: calc(var(--mini-safe-bottom) + 42px) !important;
}
.menubar {
bottom: calc(var(--mini-safe-bottom) + 22px) !important;
padding: 8px 14px calc(var(--mini-safe-bottom) + 12px) !important;
}
.topbar {
min-height: 48px !important;
grid-template-columns: 98px minmax(0, 1fr) 98px !important;
gap: 12px !important;
}
.topbar-side {
min-width: 98px !important;
gap: 12px !important;
}
.top-icon-btn {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.topbar-logo {
max-width: 162px !important;
min-height: 50px !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
grid-template-columns: minmax(0, 1fr) 56px !important;
gap: 8px !important;
}
#friends-action-area,
.friends-sticky-footer {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.matches-filter-toggle {
width: 56px !important;
min-width: 56px !important;
min-height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 20px !important;
}
.matches-filter-toggle__label,
.tour-filter-toggle__label {
display: none !important;
}
.profile-card.screen-card--gradient {
padding: 10px 8px 10px !important;
border-radius: 34px !important;
}
.profile-hero {
min-height: 154px !important;
margin: 0 0 10px !important;
padding-top: 4px !important;
}
.profile-avatar-wrap {
top: 10px !important;
left: 4px !important;
width: 120px !important;
height: 120px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 120px !important;
height: 120px !important;
}
.profile-hero-sheet {
width: calc(100% - 40px) !important;
min-height: 98px !important;
margin: 18px 0 0 52px !important;
padding: 12px 12px 12px 82px !important;
border-radius: 0 32px 32px 24px !important;
box-shadow: 0 14px 22px rgba(33, 53, 81, 0.1) !important;
}
.profile-hero-main {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy title"
"copy button" !important;
gap: 4px 10px !important;
align-items: end !important;
min-height: 70px !important;
}
.profile-copy {
display: grid !important;
gap: 2px !important;
min-width: 0 !important;
padding: 6px 34px 0 0 !important;
}
.profile-hero-side {
display: grid !important;
grid-area: title !important;
justify-items: start !important;
align-self: start !important;
min-width: 56px !important;
padding-top: 3px !important;
}
.profile-hero-side .profile-hero-meta-label {
display: block !important;
font-size: 10.5px !important;
color: #a7b4c8 !important;
}
.profile-level-wrap,
.profile-hero-side .profile-level-value {
display: none !important;
}
.profile-name-value {
font-size: 17px !important;
line-height: 1.02 !important;
}
.profile-title {
display: block !important;
margin-top: 2px !important;
font-size: 12.5px !important;
line-height: 1.02 !important;
font-weight: 700 !important;
color: #8999b3 !important;
}
.profile-mini-btn {
position: static !important;
grid-area: button !important;
justify-self: end !important;
min-width: 96px !important;
width: auto !important;
min-height: 32px !important;
height: 32px !important;
padding: 0 10px !important;
font-size: 9px !important;
border-radius: 999px !important;
}
.profile-id-chip--inline {
left: 58px !important;
top: 124px !important;
width: min(196px, calc(100% - 170px)) !important;
min-height: 18px !important;
height: 18px !important;
padding: 0 23px 0 46px !important;
border-radius: 0 13px 13px 13px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8.2px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
}
.profile-id-chip--inline .icon-id {
right: 7px !important;
width: 12px !important;
height: 12px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 86px !important;
padding: 10px 12px 10px 76px !important;
border-radius: 24px !important;
}
.profile-stat-copy {
gap: 4px !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -16px !important;
width: 78px !important;
height: 78px !important;
transform: translateY(-50%) !important;
overflow: visible !important;
clip-path: none !important;
border-radius: 50% !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -16px !important;
width: 78px !important;
height: 78px !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-2px, 0) scale(1.08) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(2px, -1px) scale(1.09) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-1px, 1px) scale(1.07) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(3px, 0) scale(1.09) !important;
}
.profile-stat-label {
font-size: 18px !important;
line-height: 1.02 !important;
}
.profile-stat-value {
font-size: 18px !important;
line-height: 1 !important;
}
.profile-links-shell {
margin-top: 6px !important;
gap: 6px !important;
}
.profile-links-seg {
min-height: 54px !important;
padding: 5px !important;
gap: 6px !important;
border-radius: 24px !important;
}
.profile-links-seg > .seg-btn {
min-height: 44px !important;
border-radius: 18px !important;
padding: 0 8px !important;
}
.profile-links-seg .seg-tab-copy {
gap: 6px !important;
font-size: 12px !important;
}
.profile-links-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 46px !important;
border-radius: 18px !important;
box-shadow: 0 4px 0 rgba(41, 54, 76, 0.12) !important;
}
.profile-links-content__label {
font-size: 11px !important;
}
}
/* 2026-04-14 Android corrective pass: shell geometry + profile hero re-anchor */
@media (max-width: 520px) {
body {
--mini-header-lift: 60px !important;
}
.app-header,
.menubar,
.top-icon-btn,
.menu-btn,
.sub-btn,
.profile-mini-btn,
.profile-links-content__item,
.profile-links-content__item--support,
.matches-filter-toggle,
.btn {
-webkit-tap-highlight-color: transparent !important;
}
.app-header {
padding: calc(var(--mini-safe-top) + var(--mini-header-lift) + 14px) var(--mini-shell-gutter) 8px !important;
}
.topbar {
min-height: 48px !important;
grid-template-columns: 98px minmax(0, 1fr) 98px !important;
}
.topbar-side {
min-width: 98px !important;
}
.top-icon-btn {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.app-main.container {
padding: calc(var(--mini-safe-top) + var(--mini-header-lift) + 86px) 0 calc(var(--mini-safe-bottom) + 100px) !important;
}
body[data-current-tab="profile"] .app-main.container {
padding-bottom: calc(var(--mini-safe-bottom) + 90px) !important;
}
.menubar {
bottom: calc(var(--mini-safe-bottom) + 8px) !important;
padding: 6px 14px calc(var(--mini-safe-bottom) + 10px) !important;
}
.menu-btn {
min-height: 54px !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
grid-template-columns: minmax(0, 1fr) 56px !important;
gap: 8px !important;
}
.matches-search-shell,
.catalog-search-shell {
min-height: 52px !important;
padding-left: 14px !important;
border-radius: 20px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
background: transparent !important;
box-shadow: none !important;
padding-left: 34px !important;
padding-right: 14px !important;
}
.matches-filter-toggle {
width: 56px !important;
min-width: 56px !important;
min-height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 20px !important;
}
.matches-filter-toggle__label,
.tour-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle .icon-filter-png,
.matches-filter-toggle .icon-filter-png::before {
margin: 0 !important;
}
.profile-card.screen-card--gradient {
padding: 10px 10px 12px !important;
border-radius: 34px !important;
}
.profile-hero {
min-height: 148px !important;
margin: 0 0 8px !important;
padding-top: 4px !important;
}
.profile-avatar-wrap {
top: 10px !important;
left: 8px !important;
width: 122px !important;
height: 122px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 122px !important;
height: 122px !important;
}
.profile-hero-sheet {
width: calc(100% - 12px) !important;
min-height: 100px !important;
margin: 18px 0 0 60px !important;
padding: 12px 14px 14px 88px !important;
border-radius: 0 30px 30px 22px !important;
box-shadow: 0 14px 22px rgba(33, 53, 81, 0.1) !important;
}
.profile-hero-main {
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy title"
"copy button" !important;
gap: 4px 10px !important;
align-items: end !important;
min-height: 70px !important;
}
.profile-copy {
gap: 2px !important;
padding: 4px 94px 0 0 !important;
}
.profile-hero-side {
display: grid !important;
grid-area: title !important;
justify-items: start !important;
align-self: start !important;
min-width: 76px !important;
padding-top: 4px !important;
}
.profile-hero-side .profile-hero-meta-label {
display: block !important;
font-size: 10px !important;
color: #a7b4c8 !important;
}
.profile-name-value {
font-size: 17px !important;
line-height: 1.02 !important;
}
.profile-title {
margin-top: 1px !important;
font-size: 12px !important;
line-height: 1.02 !important;
font-weight: 700 !important;
color: #8999b3 !important;
display: block !important;
}
.profile-mini-btn {
position: static !important;
grid-area: button !important;
justify-self: end !important;
min-width: 102px !important;
width: auto !important;
min-height: 34px !important;
height: 34px !important;
padding: 0 12px !important;
font-size: 10px !important;
border-radius: 999px !important;
}
.profile-id-chip--inline {
left: 48px !important;
top: 132px !important;
width: min(224px, calc(100% - 150px)) !important;
min-height: 18px !important;
height: 18px !important;
padding: 0 26px 0 10px !important;
border-radius: 0 12px 12px 12px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
}
.profile-id-chip--inline .icon-id {
right: 7px !important;
width: 13px !important;
height: 13px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 90px !important;
padding: 12px 12px 12px 78px !important;
border-radius: 24px !important;
}
.profile-stat-copy {
gap: 4px !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -16px !important;
width: 84px !important;
height: 84px !important;
transform: translateY(-50%) !important;
overflow: visible !important;
clip-path: none !important;
border-radius: 0 !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -16px !important;
width: 84px !important;
height: 84px !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-2px, 0) scale(1.07) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(2px, -1px) scale(1.08) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-1px, 1px) scale(1.06) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(3px, 0) scale(1.08) !important;
}
.profile-stat-label {
font-size: 18px !important;
line-height: 1.02 !important;
}
.profile-stat-value {
font-size: 18px !important;
line-height: 1 !important;
}
.profile-links-shell {
margin-top: 8px !important;
gap: 6px !important;
}
.profile-links-seg {
min-height: 54px !important;
padding: 5px !important;
gap: 6px !important;
border-radius: 24px !important;
}
.profile-links-seg > .seg-btn {
min-height: 44px !important;
border-radius: 18px !important;
padding: 0 8px !important;
}
.profile-links-seg .seg-tab-copy {
gap: 6px !important;
font-size: 12px !important;
}
.profile-links-content {
gap: 8px !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 46px !important;
border-radius: 18px !important;
box-shadow: 0 4px 0 rgba(41, 54, 76, 0.12) !important;
}
.profile-links-content__label {
font-size: 11px !important;
}
}
/* 2026-04-13 Android/Mini App geometry + profile corrective pass */
.profile-hero-side {
display: grid;
gap: 4px;
min-width: 0;
}
@media (max-width: 520px) {
:root {
--mini-shell-gutter: 10px;
--mini-shell-width: min(392px, calc(100vw - (var(--mini-shell-gutter) * 2)));
--mini-shell-radius: 32px;
--mini-safe-top: var(--tg-safe-top-js, env(safe-area-inset-top, 0px));
--mini-safe-bottom: var(--tg-safe-bottom-js, env(safe-area-inset-bottom, 0px));
--mini-header-lift: 0px;
}
body.tg-embedded {
--mini-header-lift: 44px;
}
html,
body,
body * {
-webkit-tap-highlight-color: transparent;
}
html,
body {
overscroll-behavior-y: contain;
}
.app-header,
.menubar {
max-width: none !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
transition:
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.24s ease !important;
will-change: transform, opacity;
}
.app-header {
padding: calc(var(--mini-safe-top) + var(--mini-header-lift) + 8px) var(--mini-shell-gutter) 10px !important;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98) 72%, rgba(239, 246, 255, 0)) !important;
z-index: 80 !important;
}
.topbar {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
min-height: 46px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) 96px !important;
gap: 10px !important;
align-items: center !important;
}
.topbar-side {
min-width: 96px !important;
gap: 10px !important;
}
.top-icon-btn {
width: 43px !important;
height: 43px !important;
border-radius: 13px !important;
box-shadow: 0 8px 16px rgba(33, 53, 81, 0.14) !important;
}
.topbar-logo {
max-width: 148px !important;
min-height: 48px !important;
}
.app-main.container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: calc(var(--mini-safe-top) + var(--mini-header-lift) + 84px) 0 calc(var(--mini-safe-bottom) + 106px) !important;
}
.menubar {
left: 50% !important;
right: auto !important;
bottom: 0 !important;
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin: 0 auto !important;
padding: 8px 14px calc(var(--mini-safe-bottom) + 16px) !important;
transform: translateX(-50%) !important;
z-index: 82 !important;
}
.menu-btn {
min-height: 58px !important;
padding-bottom: 2px !important;
}
body.chrome-hidden .app-header {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(calc(-100% - 12px)) !important;
}
body.chrome-hidden .menubar {
opacity: 0 !important;
pointer-events: none !important;
transform: translate(-50%, calc(100% + var(--mini-safe-bottom) + 26px)) !important;
}
.profile-screen,
.tournaments-screen,
.matches-screen,
.friends-page--v2,
.notif-page--v2 {
width: 100% !important;
align-items: stretch !important;
}
.profile-card.screen-card--gradient,
.profile-links-shell,
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row,
.matches-utility-bar.section-utility-row,
.tournaments-screen .screen-card,
.matches-screen .screen-card,
.friends-page--v2 .screen-card,
.notif-page--v2 .screen-card,
.friends-sticky-footer,
#friends-action-area,
.notif-page--v2 .notif-feed {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
min-height: 56px !important;
margin-top: 0 !important;
padding: 6px !important;
gap: 8px !important;
border-radius: 24px !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-height: 44px !important;
border-radius: 18px !important;
padding: 0 16px !important;
}
.notif-page--v2 .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn {
padding-right: 34px !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy,
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy {
gap: 8px !important;
font-size: 13px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
.friends-page--v2 .friends-tab-badge,
.notif-tab-side-action,
.notif-tab-side-action__count {
min-width: 20px !important;
height: 20px !important;
line-height: 20px !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 800 !important;
}
.friends-page--v2 .friends-tab-badge {
top: 6px !important;
right: 6px !important;
padding: 0 4px !important;
}
.notif-tab-side-action {
top: 6px !important;
right: 6px !important;
width: 20px !important;
padding: 0 !important;
}
.notif-tab-side-action__count {
padding: 0 4px !important;
}
.notif-tab-side-action__icon {
width: 10px !important;
height: 10px !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
width: var(--mini-shell-width) !important;
margin: 10px auto 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 50px !important;
align-items: stretch !important;
gap: 10px !important;
}
.matches-utility-bar.section-utility-row {
width: var(--mini-shell-width) !important;
margin: 10px auto 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
}
.matches-utility-bar .catalog-utility-row.matches-utility-row {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 50px !important;
gap: 10px !important;
margin: 0 !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell,
.catalog-search-shell {
width: 100% !important;
min-height: 52px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(150, 175, 214, 0.28) !important;
box-shadow: 0 7px 0 rgba(41, 54, 76, 0.13) !important;
}
.catalog-search-shell::before,
.matches-search-shell::before {
display: none !important;
}
.matches-search-shell__icon {
left: 16px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
width: 100% !important;
padding-left: 46px !important;
padding-right: 14px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 15px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 !important;
border-radius: 20px !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(150, 175, 214, 0.28) !important;
box-shadow: 0 7px 0 rgba(41, 54, 76, 0.13) !important;
color: #0a66db !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label {
display: none !important;
}
.matches-utility-toggle {
width: 100% !important;
min-height: 48px !important;
border-radius: 18px !important;
justify-content: center !important;
margin: 0 !important;
}
.profile-card.screen-card--gradient {
width: var(--mini-shell-width) !important;
padding: 14px !important;
border-radius: var(--mini-shell-radius) !important;
overflow: visible !important;
background:
linear-gradient(180deg, #0064d6 0%, rgba(0, 100, 214, 0) 84%),
linear-gradient(180deg, #bfd8f5 0%, #bfd8f5 100%) !important;
}
.profile-hero {
width: 100% !important;
min-height: 170px !important;
margin: 0 0 12px !important;
padding-top: 14px !important;
overflow: visible !important;
}
.profile-avatar-wrap {
top: 18px !important;
left: 8px !important;
width: 120px !important;
height: 120px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 120px !important;
height: 120px !important;
}
.profile-avatar-ring {
padding: 4px !important;
background: #0b6fdf !important;
box-shadow:
0 0 0 4px #eff6ff,
0 0 0 7px #0b6fdf !important;
}
.profile-hero-sheet {
position: relative !important;
z-index: 3 !important;
width: calc(100% - 28px) !important;
min-height: 108px !important;
margin: 24px 0 0 64px !important;
padding: 16px 18px 18px 92px !important;
border-radius: 0 32px 32px 26px !important;
background: #eff6ff !important;
box-shadow: 0 16px 24px rgba(33, 53, 81, 0.12) !important;
overflow: visible !important;
}
.profile-hero-main {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy title"
"copy button" !important;
gap: 8px 12px !important;
align-items: end !important;
min-height: 74px !important;
}
.profile-copy {
grid-area: copy !important;
min-width: 0 !important;
display: grid !important;
gap: 4px !important;
padding-top: 6px !important;
}
.profile-hero-side {
grid-area: title !important;
justify-items: start !important;
align-self: center !important;
min-width: 72px !important;
}
.profile-hero-meta-label {
font-size: 12px !important;
line-height: 1 !important;
color: #a7b4c8 !important;
}
.profile-name-value {
font-size: 20px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #111827 !important;
}
.profile-title {
margin-top: 0 !important;
font-size: 13px !important;
line-height: 1.04 !important;
font-weight: 700 !important;
color: #8da0ba !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
}
.profile-level-wrap,
.profile-hero-side .profile-level-value {
display: none !important;
}
.profile-mini-btn {
grid-area: button !important;
justify-self: end !important;
min-width: 116px !important;
width: auto !important;
min-height: 38px !important;
height: 38px !important;
padding: 0 14px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 800 !important;
box-shadow: 0 6px 0 rgba(18, 76, 142, 0.16) !important;
}
.profile-id-chip--inline {
position: absolute !important;
left: 54px !important;
top: 144px !important;
width: min(216px, calc(100% - 156px)) !important;
min-height: 18px !important;
height: 18px !important;
margin: 0 !important;
padding: 0 28px 0 12px !important;
border-radius: 0 12px 12px 12px !important;
background: linear-gradient(90deg, #1071e4 0%, #0a64d4 100%) !important;
box-shadow: none !important;
z-index: 2 !important;
}
.profile-id-chip--inline.is-copied {
background: linear-gradient(90deg, #1180f4 0%, #2191ff 100%) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
color: #93c9ff !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
font-weight: 800 !important;
color: #eff6ff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-id-chip--inline .icon-id {
top: 50% !important;
right: 7px !important;
width: 14px !important;
height: 14px !important;
transform: translateY(-50%) !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stats-grid {
width: 100% !important;
gap: 10px !important;
}
.profile-stat-card {
min-height: 100px !important;
padding: 16px 14px 16px 84px !important;
border-radius: 28px !important;
overflow: visible !important;
}
.profile-stat-copy {
display: grid !important;
gap: 6px !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -12px !important;
width: 88px !important;
height: 88px !important;
transform: translateY(-50%) !important;
overflow: visible !important;
clip-path: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -12px !important;
width: 88px !important;
height: 88px !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-4px, 0) scale(1.04) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(1px, -1px) scale(1.06) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-1px, 0) scale(1.05) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(2px, -1px) scale(1.06) !important;
}
.profile-stat-label {
font-size: 17px !important;
line-height: 1.05 !important;
color: #8b919c !important;
}
.profile-stat-value {
font-size: 18px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.profile-links-shell {
width: var(--mini-shell-width) !important;
margin: 12px auto 0 !important;
gap: 8px !important;
}
.profile-links-seg {
width: 100% !important;
max-width: none !important;
}
.profile-links-content {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 48px !important;
padding: 0 8px !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.98) !important;
color: #1560c9 !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
}
.profile-links-content__label {
font-size: 11px !important;
white-space: nowrap !important;
}
.profile-links-content__icon {
width: 18px !important;
height: 18px !important;
object-fit: contain !important;
}
.profile-links-content__state {
top: 4px !important;
right: 4px !important;
min-width: 18px !important;
height: 14px !important;
padding: 0 4px !important;
border-radius: 999px !important;
font-size: 8px !important;
line-height: 14px !important;
}
.friends-sticky-footer {
margin-top: 12px !important;
padding: 0 !important;
bottom: auto !important;
position: static !important;
}
.friends-action-row--referral {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 48px !important;
gap: 8px !important;
align-items: stretch !important;
}
.friends-ref-code {
min-height: 48px !important;
padding: 0 14px !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
color: #1560c9 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-align: center !important;
}
.friends-ref-code__prefix {
color: #8da0ba !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.friends-ref-code__value {
color: #1560c9 !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
}
.friends-ref-share-btn {
width: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
padding: 0 !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.friends-ref-share-btn__icon {
width: 22px !important;
height: 22px !important;
display: block !important;
color: #1560c9 !important;
}
.friends-page--v2 .friends-action-block {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.friends-page--v2 [data-friends-action="referrals"] {
gap: 10px !important;
padding: 14px 16px !important;
}
.friends-page--v2 [data-friends-action="referrals"] .friends-action-title {
margin-bottom: 2px !important;
font-size: 17px !important;
}
.friends-ref-option {
margin-top: 8px !important;
min-height: 42px !important;
padding: 0 14px !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(150, 175, 214, 0.22) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
}
.friends-ref-option__copy {
min-width: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #3f587f !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.friends-ref-option__icon {
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
color: #1560c9 !important;
}
.friends-ref-option__toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 20px !important;
flex: 0 0 34px !important;
}
.friends-ref-option__toggle input {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.friends-ref-option__track {
position: relative !important;
width: 34px !important;
height: 20px !important;
border-radius: 999px !important;
background: rgba(157, 179, 213, 0.45) !important;
transition: background 0.18s ease !important;
}
.friends-ref-option__thumb {
position: absolute !important;
top: 2px !important;
left: 2px !important;
width: 16px !important;
height: 16px !important;
border-radius: 999px !important;
background: #fff !important;
box-shadow: 0 2px 4px rgba(36, 58, 92, 0.18) !important;
transition: transform 0.18s ease !important;
}
.friends-ref-option__toggle input:checked + .friends-ref-option__track {
background: linear-gradient(180deg, #2c91ff 0%, #1560c9 100%) !important;
}
.friends-ref-option__toggle input:checked + .friends-ref-option__track .friends-ref-option__thumb {
transform: translateX(14px) !important;
}
#tour-filter-modal.overlay,
#friends-filter-modal.overlay,
#notif-filter-modal.overlay {
padding: 0 12px calc(var(--mini-safe-bottom) + 12px) !important;
align-items: flex-end !important;
}
.filters-modal {
width: min(calc(var(--mini-shell-width) - 20px), 372px) !important;
max-width: min(calc(var(--mini-shell-width) - 20px), 372px) !important;
padding: 14px 16px 18px !important;
border-radius: 28px !important;
transform: translateY(var(--sheet-drag-offset, 0px)) !important;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.filters-modal--dragging {
transition: none !important;
}
.filters-modal--snapback {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.filters-modal__grab {
width: 56px !important;
height: 6px !important;
margin: 0 auto 12px !important;
border-radius: 999px !important;
background: rgba(117, 146, 191, 0.34) !important;
}
.filters-close-btn {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
padding: 0 !important;
border-radius: 16px !important;
border: 1px solid rgba(150, 175, 214, 0.24) !important;
background: rgba(237, 245, 255, 0.96) !important;
color: #0a66db !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 7px 0 rgba(41, 54, 76, 0.12) !important;
}
.filters-close-btn__icon {
position: relative !important;
width: 16px !important;
height: 16px !important;
display: inline-block !important;
}
.filters-close-btn__icon::before,
.filters-close-btn__icon::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 18px !important;
height: 2px !important;
border-radius: 999px !important;
background: currentColor !important;
}
.filters-close-btn__icon::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.filters-close-btn__icon::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.filters-actions,
.filters-footer {
padding-bottom: calc(var(--mini-safe-bottom) + 4px) !important;
}
.toast-wrap {
bottom: calc(var(--mini-safe-bottom) + 92px) !important;
}
button:active,
.btn:active,
.seg-btn:active,
.sub-btn:active,
.notif-card:active,
.profile-links-content__item:active {
transform: translateY(1px) scale(0.996) !important;
filter: brightness(0.99) !important;
}
}
/* Halftone dots for Brawl Stars vibe */
.app-main.container::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(var(--tg-theme-button-color, #2563eb) 1px, transparent 1px);
background-size: 16px 16px;
opacity: 0.05;
pointer-events: none;
z-index: -1;
}
[data-theme="dark"] .app-main.container::before {
background-image: radial-gradient(#ffffff 1px, transparent 1px);
opacity: 0.03;
}
/* Brawl Stars Button Text Style */
.btn, .tab-btn {
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-primary {
border-bottom: 3px solid rgba(0,0,0,0.2) !important;
border-radius: 12px;
}
.btn-secondary {
border-bottom: 3px solid rgba(0,0,0,0.2) !important;
border-radius: 12px;
}
.tour-card__cta {
border-bottom: 3px solid rgba(0,0,0,0.2) !important;
border-radius: 12px;
text-transform: uppercase;
font-weight: 800;
}
/* Better header */
.app-header {
border-bottom: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
/* Override Profile Stat Cards to fix overflowing images */
.profile-stat-card {
position: relative;
min-height: auto !important;
display: flex !important;
align-items: center;
padding: 8px 12px !important;
border-radius: 12px !important;
background: var(--tg-theme-secondary-bg-color, #f3f4f6) !important;
color: var(--tg-theme-text-color) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
overflow: hidden !important;
cursor: pointer; /* they are buttons now */
}
[data-theme="dark"] .profile-stat-card {
background: #1f1f22 !important;
}
.profile-stat-card .stat-icon {
position: static !important;
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
margin-right: 12px !important;
transform: none !important;
left: auto !important;
top: auto !important;
}
.profile-stat-card:nth-child(n) .stat-icon {
left: auto !important;
transform: none !important;
height: 36px !important;
width: 36px !important;
}
/* Matchmaking Card Promo */
.matchmaking-card {
background: linear-gradient(135deg, #2563eb, #1e40af);
border-radius: 16px;
padding: 24px;
color: white;
text-align: center;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
margin-bottom: 20px;
}
.matchmaking-title {
font-family: 'Lilita One', sans-serif;
font-size: 24px;
margin-bottom: 8px;
}
.matchmaking-desc {
font-size: 14px;
opacity: 0.9;
margin-bottom: 16px;
}
.matchmaking-btn {
background: #facc15;
color: #854d0e;
border: none;
padding: 12px 24px;
border-radius: 12px;
font-family: 'Lilita One', sans-serif;
font-size: 18px;
width: 100%;
box-shadow: 0 4px 0 #ca8a04;
cursor: pointer;
transition: transform 0.1s;
}
.matchmaking-btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #ca8a04;
}
/* Generic button hover effects */
button, .btn, .seg-btn, .sub-btn, .top-icon-btn, .profile-edit-btn, .add-friend-btn, .social-button, .social-button-inverse, .profile-stat-card, .list-card, .notif-card { transition: transform 0.15s ease, filter 0.15s ease; }
button:active, .btn:active, .seg-btn:active, .sub-btn:active, .top-icon-btn:active, .profile-edit-btn:active, .add-friend-btn:active, .social-button:active, .social-button-inverse:active, .profile-stat-card:active, .list-card:active, .notif-card:active { transform: scale(0.96) !important; filter: brightness(0.9); }
@media (hover: hover) {
button:hover, .btn:hover, .seg-btn:hover, .sub-btn:hover, .top-icon-btn:hover, .profile-edit-btn:hover, .add-friend-btn:hover, .social-button:hover, .social-button-inverse:hover, .profile-stat-card:hover, .list-card:hover, .notif-card:hover { filter: brightness(1.1); transform: scale(1.02); }
}
/* --- EMOJI PNG REPLACEMENTS via CSS MINIMAL --- */
.icon-img { display: inline-block; width: 14px; height: 14px; vertical-align: middle; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex-shrink:0; }
.icon-img.large { width: 24px; height: 24px; }
.icon-star-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-coin-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); color: #F59E0B; }
.icon-copy-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); color: currentColor; }
.icon-search-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-chat-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-eye-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-magic-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); color: #A855F7; }
.icon-swords-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-time-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-group-png { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-filter-png { display: inline-block; width: 14px; height: 14px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex-shrink:0;}
/* -- PROFILE REBUILD -- */
.profile-hero { margin-bottom:12px; position:relative; height: 120px; }
.profile-id-pill { position:absolute; right:16px; top:35px; width:180px; height: 60px; background-color:#0064D6; border-radius: 0 46px 46px 0; color:#EFF6FF; border: 2px solid #EFF6FF; display:flex; flex-direction:column; justify-content:center; padding-left:20px; z-index:1; }
.profile-id-pill .id-label { font-size:10px; opacity:0.8; margin-bottom:2px; }
.profile-id-pill .id-value { font-size:16px; font-weight:bold; }
.icon-btn-copy { position:absolute; right:12px; bottom:12px; width:20px; height:20px; background-color:rgba(255,255,255,0.2); border:1px solid #EFF6FF; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.icon-btn-copy:after { content:''; display:inline-block; width:12px; height:12px; background-color:currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; }
.profile-hero-sheet { position:absolute; right:16px; top:20px; width:274px; height: 50px; background-color:#EFF6FF; color:#000; border-radius: 0 46px 46px 0; z-index:2; padding:8px 12px 8px 30px; display:flex; align-items:center;}
.profile-hero-main { display:flex; justify-content:space-between; align-items:center; width:100%; gap:8px;}
.profile-copy { display:flex; flex-direction:column;}
.profile-level-wrap { display:flex; flex-direction:column; align-items:center;}
.profile-mini-btn { background-color:#0064D6; color:#fff; border:none; border-radius:26px; padding:6px 12px; font-size:11px; white-space:nowrap; cursor:pointer;}
.profile-avatar-wrap { position:absolute; left:16px; top:25px; width:66px; height:66px; z-index:3; border-radius:50%; background:#fff; border:2px solid #EFF6FF;}
.profile-avatar-ring { width:100%; height:100%; border-radius:50%; border:3px solid #0064D6; padding:1px; box-sizing:border-box;}
.profile-avatar-ring img { width:100%; height:100%; overflow:hidden; border-radius:50%; object-fit:cover; display:block; }
/* -- FILTERS REDESIGN -- */
.filters-modal { border-radius: 24px 24px 0 0 !important; width:100% !important; max-width:100% !important; border-top: 2px solid #00d2ff !important; margin: auto auto 0 auto !important; padding: 24px 16px !important; }
.filters-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.filters-close-btn { background:transparent; border:none; color:#EFF6FF; font-size:28px; line-height:1; cursor:pointer;}
.filter-section { margin-bottom: 24px; }
.filter-label { color:#00d2ff; font-size:14px; margin-bottom:12px; font-family:'Lilita One', sans-serif; text-transform:uppercase; display:block; text-shadow:1px 1px 0 #000; }
.filter-scroll-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:-4px; scrollbar-width:none;}
.filter-scroll-row::-webkit-scrollbar { display:none; }
.filter-scroll-row .seg-btn { flex-shrink:0; padding:8px 16px; font-size:14px; white-space:nowrap;}
.tour-filter-bar button { display:flex; align-items:center; justify-content:center; gap:6px; font-family:'Lilita One', sans-serif;}
.matches-utility-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 0 16px;
}
.matches-search-shell {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 46px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 22px rgba(27, 82, 147, 0.1);
}
.matches-search-shell:focus-within {
border-color: rgba(0, 100, 214, 0.32);
box-shadow: 0 0 0 4px rgba(0, 100, 214, 0.08);
}
.matches-search-shell__icon {
color: var(--figma-blue);
}
.matches-search-input {
min-width: 0;
border: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
.matches-search-input:focus {
border: 0;
box-shadow: none;
}
.matches-utility-toggle {
min-height: 46px;
padding: 0 16px;
border-radius: 14px;
font-weight: 800;
white-space: nowrap;
}
.matches-friendly-shell {
display: grid;
gap: 14px;
}
.matches-friendly-copy {
display: grid;
gap: 6px;
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 245, 255, 0.98));
box-shadow: 0 12px 24px rgba(27, 82, 147, 0.12);
}
.matches-friendly-kicker {
font-size: 11px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--figma-blue);
}
.matches-friendly-title {
font-family: 'Lilita One', sans-serif;
font-size: 20px;
line-height: 1.1;
color: var(--figma-text);
}
.matches-friendly-create {
min-height: 48px;
}
.friendly-create-overlay {
align-items: flex-end;
padding: 16px;
background: rgba(17, 24, 39, 0.42);
}
.friendly-create-modal {
width: min(100%, 360px) !important;
margin: 0 auto;
border-radius: 24px !important;
border: 1px solid rgba(0, 100, 214, 0.16) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.98)) !important;
box-shadow: 0 20px 40px rgba(27, 82, 147, 0.16);
padding: 18px !important;
}
.friendly-create-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.friendly-create-modal__copy {
display: grid;
gap: 4px;
}
.friendly-create-modal__kicker {
font-size: 11px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--figma-blue);
}
.friendly-create-modal__title {
margin: 0;
font-family: 'Nunito', sans-serif;
font-size: 22px;
font-weight: 800;
line-height: 1.04;
color: var(--figma-text);
}
.friendly-create-modal__close {
width: 36px;
height: 36px;
flex: 0 0 36px;
border: 0;
border-radius: 12px;
background: rgba(0, 100, 214, 0.08);
color: var(--figma-blue);
font-size: 24px;
line-height: 1;
}
.friendly-create-modal__label {
display: block;
margin-bottom: 6px;
font-family: 'Nunito', sans-serif;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #5b6b82;
}
.friendly-create-modal__input {
margin-bottom: 12px;
}
.friendly-create-modal__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.friendly-create-modal__btn {
width: 100%;
}
.friendly-card {
padding: 14px 16px;
border-radius: 22px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.98));
box-shadow: 0 12px 22px rgba(27, 82, 147, 0.08);
}
.friendly-card__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.friendly-card__copy {
min-width: 0;
}
.friendly-card__title {
font-size: 15px;
font-weight: 800;
line-height: 1.25;
color: #16253d;
}
.friendly-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
color: #63748d;
}
.friendly-card__meta .muted {
color: #63748d;
}
.friendly-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: max-content;
}
[data-theme="dark"] .matches-search-shell {
background: rgba(28, 28, 30, 0.96);
border-color: rgba(91, 155, 245, 0.22);
box-shadow: none;
}
[data-theme="dark"] .matches-friendly-copy {
background: linear-gradient(180deg, rgba(28, 28, 30, 0.96), rgba(21, 37, 61, 0.92));
border-color: rgba(91, 155, 245, 0.2);
box-shadow: none;
}
[data-theme="dark"] .friendly-create-modal {
background: linear-gradient(180deg, rgba(28, 28, 30, 0.98), rgba(18, 31, 51, 0.96)) !important;
border-color: rgba(91, 155, 245, 0.22) !important;
box-shadow: none;
}
[data-theme="dark"] .friendly-create-modal__title {
color: #f4f7fb;
}
[data-theme="dark"] .friendly-create-modal__label,
[data-theme="dark"] .friendly-card__meta,
[data-theme="dark"] .friendly-card__meta .muted {
color: #b8c4d8;
}
[data-theme="dark"] .friendly-card {
background: linear-gradient(180deg, rgba(28, 28, 30, 0.98), rgba(20, 32, 52, 0.94));
border-color: rgba(91, 155, 245, 0.22);
box-shadow: none;
}
[data-theme="dark"] .friendly-card__title {
color: #f4f7fb;
}
@media (max-width: 640px) {
.matches-utility-bar {
grid-template-columns: 1fr;
}
.matches-utility-toggle {
width: 100%;
}
.friendly-card__row {
grid-template-columns: 1fr;
align-items: flex-start;
}
.friendly-card__actions {
width: 100%;
min-width: 0;
justify-content: stretch;
}
.friendly-card__actions .btn,
.friendly-card__actions .muted {
width: 100%;
text-align: center;
}
}
/* --- WAVE 1 SOCIAL V2 OVERRIDES --- */
.friends-page--v2,
.notif-page--v2 {
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px 16px calc(128px + env(safe-area-inset-bottom, 0px));
min-height: 100%;
box-sizing: border-box;
}
.friends-page--v2 {
gap: 10px;
padding: 0 0 calc(108px + env(safe-area-inset-bottom, 0px));
}
.friends-page--v2 .friends-subtabs,
.notif-page--v2 .notif-subtabs {
margin: 0;
}
.friends-page--v2 .friends-subtabs {
margin: 12px 0 0;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy {
gap: 8px;
}
.friends-page--v2 .friends-tab-badge {
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: rgba(0, 100, 214, 0.12);
color: var(--figma-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
}
.friends-page--v2 .friends-search-shell {
display: block;
padding: 0 16px;
}
.friends-page--v2 .friends-search-bar {
display: grid;
gap: 8px;
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: #fff;
box-shadow: 0 4px 14px rgba(27, 82, 147, 0.08);
}
.friends-page--v2 .friends-search-copy {
display: grid;
gap: 4px;
}
.friends-page--v2 .friends-search-label {
font-family: 'Lilita One', sans-serif;
font-size: 16px;
line-height: 1;
color: var(--figma-text);
letter-spacing: 0.01em;
}
.friends-page--v2 .friends-search-hint {
font-size: 11px;
line-height: 1.35;
color: #667085;
}
.friends-page--v2 .friends-search-field {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 0 12px 0 14px;
border-radius: 14px;
background: #f8fbff;
border: 1px solid rgba(0, 100, 214, 0.12);
}
.friends-page--v2 .friends-search-field input {
flex: 1;
width: 100%;
min-width: 0;
border: 0;
background: transparent;
padding: 0;
font-size: 15px;
color: var(--figma-text);
}
.friends-page--v2 .friends-search-field input::placeholder {
color: #8b98ab;
}
.friends-page--v2 .friends-search-field input:focus {
outline: none;
}
.friends-page--v2 .friends-search-icon {
width: 20px;
height: 20px;
color: var(--figma-blue);
display: inline-flex;
align-items: center;
justify-content: center;
}
.friends-page--v2 .friends-detail-stack {
display: flex;
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0 16px;
}
.friends-page--v2 .friends-detail-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.friends-page--v2 .figma-list,
.friends-page--v2 .friend-list {
display: grid;
gap: 12px;
}
.friends-page--v2 .referral-hero-card {
display: grid;
gap: 8px;
padding: 16px 16px 18px;
border-radius: 22px;
background: linear-gradient(145deg, #0064d6 0%, #2681ef 60%, #52b0ff 100%);
color: #fff;
box-shadow: 0 10px 22px rgba(0, 100, 214, 0.16);
}
.friends-page--v2 .referral-hero-card__kicker {
font-size: 11px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.9;
}
.friends-page--v2 .referral-hero-card__title {
font-family: 'Lilita One', sans-serif;
font-size: 24px;
line-height: 1;
}
.friends-page--v2 .referral-hero-card__body {
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.95);
}
.friends-page--v2 .empty-block,
.notif-page--v2 .empty-block {
display: grid;
justify-items: center;
gap: 8px;
padding: 24px 18px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.72);
border: 1px dashed rgba(0, 100, 214, 0.18);
color: var(--figma-text);
text-align: center;
}
.friends-page--v2 .empty-block .emoji,
.notif-page--v2 .empty-block .emoji {
font-size: 28px;
line-height: 1;
}
.friends-page--v2 .empty-block .text,
.notif-page--v2 .empty-block .text {
font-weight: 800;
}
.friends-page--v2 .empty-block .hint,
.notif-page--v2 .empty-block .hint {
font-size: 12px;
line-height: 1.4;
color: #667085;
}
.friends-page--v2 .friend-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: #fff;
box-shadow: 0 2px 10px rgba(27, 82, 147, 0.06);
}
.friends-page--v2 .friend-info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}
.friends-page--v2 .friend-avatar {
position: relative;
width: 44px;
height: 44px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #dceaff;
border: 1px solid #96c0f0;
color: var(--figma-blue);
font-family: 'Lilita One', sans-serif;
font-size: 20px;
}
.friends-page--v2 .friend-online {
position: absolute;
right: -1px;
bottom: -1px;
width: 12px;
height: 12px;
border-radius: 999px;
border: 2px solid #fff;
background: #94a3b8;
}
.friends-page--v2 .friend-online.online {
background: #22c55e;
}
.friends-page--v2 .friend-online.offline {
background: #94a3b8;
}
.friends-page--v2 .friend-text {
min-width: 0;
display: grid;
gap: 3px;
}
.friends-page--v2 .friend-name {
font-size: 16px;
line-height: 1.2;
font-weight: 800;
color: var(--figma-text);
}
.friends-page--v2 .friend-username,
.friends-page--v2 .friend-meta {
font-size: 12px;
line-height: 1.35;
color: #667085;
}
.friends-page--v2 .friend-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.friends-page--v2 .friend-actions .btn {
min-height: 34px;
padding: 0 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
}
.friends-page--v2 .friend-pending-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: rgba(0, 100, 214, 0.08);
color: var(--figma-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.friends-page--v2 .friend-remove-btn {
color: #b42318;
border-color: rgba(180, 35, 24, 0.16);
}
.friends-page--v2 .friends-sticky-footer {
position: sticky;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
z-index: 4;
margin-top: auto;
padding: 0 16px;
}
.friends-page--v2 .friends-action-block {
display: grid;
gap: 12px;
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 24px rgba(27, 82, 147, 0.12);
}
.friends-page--v2 .friends-action-title {
font-family: 'Lilita One', sans-serif;
font-size: 18px;
line-height: 1;
color: var(--figma-text);
}
.friends-page--v2 .friends-action-row {
display: flex;
align-items: center;
gap: 10px;
}
.friends-page--v2 .friends-action-row--share {
align-items: stretch;
}
.friends-page--v2 .friends-action-input,
.friends-page--v2 .friends-ref-link-shell {
flex: 1;
}
.friends-page--v2 .friends-action-input {
min-width: 0;
min-height: 44px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: #fff;
color: var(--figma-text);
font-size: 14px;
}
.friends-page--v2 .friends-action-input:focus,
.friends-page--v2 .friends-ref-link-input:focus {
outline: none;
border-color: rgba(0, 100, 214, 0.36);
box-shadow: 0 0 0 4px rgba(0, 100, 214, 0.08);
}
.friends-page--v2 .friends-action-submit,
.friends-page--v2 .friends-share-btn {
min-height: 44px;
padding: 0 18px;
border-radius: 12px;
font-weight: 800;
}
.friends-page--v2 .friends-action-meta {
font-size: 12px;
line-height: 1.45;
color: #667085;
}
.friends-page--v2 .friends-action-highlight {
color: var(--figma-blue);
font-weight: 800;
}
.friends-page--v2 .friends-ref-link-shell {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 44px;
padding: 0 8px 0 16px;
border-radius: 12px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: #fff;
}
.friends-page--v2 .friends-ref-link-input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
padding: 0;
font-size: 14px;
color: var(--figma-text);
}
.friends-page--v2 .friends-ref-copy {
min-width: 74px;
min-height: 36px;
border: 0;
border-radius: 12px;
background: rgba(0, 100, 214, 0.08);
color: var(--figma-blue);
font-size: 12px;
font-weight: 800;
}
.notif-page--v2 .notif-tab-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--figma-blue);
}
.notif-page--v2 .notif-tab-icon__img {
width: 18px;
height: 18px;
object-fit: contain;
}
.notif-page--v2 .notif-tab-icon svg,
.notif-page--v2 .notif-toolbar-btn__icon svg {
width: 100%;
height: 100%;
display: block;
}
.notif-page--v2 .notif-tab-icon--activity {
color: var(--figma-blue);
}
.notif-page--v2 .notif-toolbar-shell {
display: grid;
gap: 14px;
padding: 16px;
border-radius: 28px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 245, 255, 0.98));
box-shadow: 0 18px 32px rgba(27, 82, 147, 0.14);
}
.notif-page--v2 .notif-toolbar-copy {
display: grid;
gap: 6px;
}
.notif-page--v2 .notif-toolbar-kicker {
font-size: 11px;
line-height: 1.2;
font-weight: 700;
color: var(--figma-blue);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.notif-page--v2 .notif-toolbar-summary {
font-size: 13px;
line-height: 1.45;
color: #526072;
}
.notif-page--v2 .notif-toolbar-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.notif-page--v2 .notif-toolbar-btn {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.notif-page--v2 .notif-toolbar-btn__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.notif-page--v2 .notif-feed {
display: flex;
flex: 1;
min-height: 0;
overflow-y: auto;
padding-bottom: 8px;
}
.notif-page--v2 .notif-feed-list {
display: grid;
gap: 12px;
width: 100%;
}
.notif-page--v2 .notif-card {
--notif-accent: rgba(0, 100, 214, 0.16);
display: grid;
gap: 10px;
padding: 16px;
border-radius: 24px;
border: 1px solid var(--notif-accent);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
box-shadow: 0 12px 28px rgba(27, 82, 147, 0.08);
transform-origin: center;
}
.notif-page--v2 .notif-card--global {
--notif-accent: rgba(0, 100, 214, 0.18);
}
.notif-page--v2 .notif-card--personal {
--notif-accent: rgba(126, 94, 255, 0.2);
}
.notif-page--v2 .notif-card--activity {
--notif-accent: rgba(20, 184, 166, 0.22);
}
.notif-page--v2 .notif-card.is-read {
opacity: 0.84;
}
.notif-page--v2 .notif-card-topline,
.notif-page--v2 .notif-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.notif-page--v2 .notif-card-chip {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
background: rgba(0, 100, 214, 0.08);
color: var(--figma-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
}
.notif-page--v2 .notif-card-time,
.notif-page--v2 .notif-card-action-hint {
font-size: 11px;
line-height: 1.3;
color: #667085;
}
.notif-page--v2 .notif-card-title {
font-size: 16px;
line-height: 1.25;
font-weight: 800;
color: var(--figma-text);
}
.notif-page--v2 .notif-card-body {
font-size: 13px;
line-height: 1.5;
color: #526072;
}
.notif-page--v2 .notif-card-state {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
color: #5b6778;
font-size: 11px;
font-weight: 800;
}
.notif-page--v2 .notif-card-state--unread {
background: rgba(0, 100, 214, 0.1);
color: var(--figma-blue);
}
.notif-page--v2 .notif-empty-state {
width: 100%;
}
.notif-page--v2 .notif-empty-state__icon {
width: 34px;
height: 34px;
object-fit: contain;
}
.admin-chat-modal {
max-width: 392px;
padding: 18px;
border-radius: 28px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.98));
box-shadow: 0 22px 50px rgba(27, 82, 147, 0.22);
}
.admin-chat-header {
gap: 12px;
padding: 0 0 12px;
margin-bottom: 12px;
border-bottom-color: rgba(0, 100, 214, 0.12);
}
.admin-chat-heading {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 12px;
}
.admin-chat-heading__icon {
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: linear-gradient(135deg, #0064d6, #6bc8ff);
color: #fff;
}
.admin-chat-heading__copy {
min-width: 0;
display: grid;
gap: 4px;
}
.admin-chat-heading__title {
margin: 0;
font-size: 18px;
line-height: 1.15;
color: var(--figma-text);
}
.admin-chat-heading__meta {
font-size: 12px;
line-height: 1.4;
color: #667085;
}
.admin-chat-close-btn {
min-width: 38px;
min-height: 38px;
padding: 0;
border-radius: 12px;
}
.admin-chat-modal .match-chat-messages {
min-height: 180px;
max-height: 340px;
padding-right: 2px;
}
.admin-chat-modal .chat-msg-bubble {
background: #edf4ff;
color: var(--figma-text);
}
.admin-chat-modal .chat-msg--me .chat-msg-bubble {
background: var(--figma-blue);
color: #fff;
}
.admin-chat-modal .chat-msg-time,
.admin-chat-modal .chat-msg-status {
color: #667085;
}
.admin-chat-input-row {
margin-top: 12px;
gap: 10px;
}
.admin-chat-input {
min-height: 48px;
border-radius: 16px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: #fff;
color: var(--figma-text);
}
.admin-chat-send-btn {
min-width: 52px;
min-height: 48px;
padding: 0;
border-radius: 16px;
font-size: 18px;
}
@media (max-width: 440px) {
.friends-page--v2,
.notif-page--v2 {
padding-left: 12px;
padding-right: 12px;
}
.friends-page--v2 .friends-search-label {
font-size: 16px;
}
.friends-page--v2 .friends-action-row,
.friends-page--v2 .friends-action-row--share,
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: 1fr;
flex-direction: column;
}
.friends-page--v2 .friends-action-row,
.friends-page--v2 .friends-action-row--share {
align-items: stretch;
}
.friends-page--v2 .friends-action-submit,
.friends-page--v2 .friends-share-btn,
.notif-page--v2 .notif-toolbar-btn {
width: 100%;
}
.friends-page--v2 .friend-row {
align-items: flex-start;
flex-direction: column;
}
.friends-page--v2 .friend-actions {
width: 100%;
justify-content: stretch;
}
.friends-page--v2 .friend-actions .btn,
.friends-page--v2 .friend-pending-badge {
flex: 1 1 100%;
justify-content: center;
}
.admin-chat-modal {
width: calc(100vw - 20px);
padding: 16px;
}
}
/* Keep hidden tab panels collapsed even when late screen-specific rules set display with !important. */
[data-tab-panel].hidden {
display: none !important;
}
/* Friends V2 cleanup after the imported scaffold pass. */
.friends-page--v2 .friends-subtabs {
display: flex;
gap: 8px;
padding: 12px 16px 0;
background: transparent;
border: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.friends-page--v2 .friends-subtabs::-webkit-scrollbar {
display: none;
}
.friends-page--v2 .friends-subtabs .seg-btn {
position: relative;
flex: 0 0 auto !important;
width: max-content;
max-width: none;
min-width: 86px;
min-height: 46px;
padding: 0 14px;
border-radius: 16px;
border: 1px solid rgba(0, 100, 214, 0.12);
background: rgba(255, 255, 255, 0.96);
color: var(--figma-text);
box-shadow: 0 8px 18px rgba(27, 82, 147, 0.08);
}
.friends-page--v2 .friends-subtabs .seg-btn.active {
border-color: transparent;
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%);
color: #fff;
box-shadow: 0 12px 24px rgba(0, 100, 214, 0.2);
}
.friends-page--v2 .seg-tab-copy {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
min-width: auto;
min-height: 28px;
padding-right: 22px;
gap: 0;
}
.friends-page--v2 .seg-tab-copy > span:first-child {
display: block;
min-width: auto;
text-align: center;
font-size: 10.5px;
line-height: 1;
font-weight: 800;
letter-spacing: 0;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
.friends-page--v2 .friends-tab-badge {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: rgba(0, 100, 214, 0.12);
color: var(--figma-blue);
font-size: 10px;
font-weight: 800;
}
.friends-page--v2 .seg-btn.active .friends-tab-badge {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.friends-page--v2 .friends-detail-stack {
padding-top: 4px;
}
.friends-page--v2 .friend-actions {
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: nowrap;
}
.friends-page--v2 .friend-action-invite,
.friends-page--v2 .friend-action-chat,
.friends-page--v2 .friend-remove-btn {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
margin: 0;
padding: 0;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 100, 214, 0.14);
box-shadow: none;
}
.friends-page--v2 .friend-action-invite {
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%);
color: #fff;
}
.friends-page--v2 .friend-action-chat {
background: rgba(0, 100, 214, 0.08);
color: var(--figma-blue);
}
.friends-page--v2 .friend-remove-btn {
background: #fff5f5;
color: #d92d20;
border-color: rgba(217, 45, 32, 0.18);
}
.friends-page--v2 .friend-action-invite svg,
.friends-page--v2 .friend-action-chat svg,
.friends-page--v2 .friend-remove-btn svg {
width: 18px;
height: 18px;
}
@media (max-width: 440px) {
.friends-page--v2 .friends-subtabs .seg-btn {
min-height: 44px;
min-width: 80px;
padding: 0 12px;
}
.friends-page--v2 .seg-tab-copy {
padding-right: 20px;
}
.friends-page--v2 .seg-tab-copy > span:first-child {
font-size: 9.5px;
}
.friends-page--v2 .friend-actions {
flex-wrap: wrap;
}
.friends-page--v2 .friend-action-invite,
.friends-page--v2 .friend-action-chat,
.friends-page--v2 .friend-remove-btn {
flex: 0 0 38px;
}
}
/* --- Late stability pass: profile, friends, matches, filters --- */
body.sheet-open {
overflow: hidden;
}
html,
body,
.app-main.container,
[data-tab-panel],
[data-sub-panel],
[data-my-panel],
.friends-page--v2 .friends-detail-stack,
.notif-page--v2 .notif-feed {
overscroll-behavior-y: contain;
}
@keyframes section-air-enter {
from {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.section-air-enter {
animation: section-air-enter 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-filter-bar,
.matches-utility-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.tour-filter-bar {
padding: 12px 16px !important;
}
.tour-search-input {
min-height: 50px;
padding: 0 16px;
border-radius: 16px;
border-color: rgba(0, 100, 214, 0.14);
box-shadow: 0 10px 22px rgba(27, 82, 147, 0.08);
}
#btn-tour-filter-open,
.matches-filter-toggle {
min-height: 50px;
padding: 0 18px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid rgba(0, 100, 214, 0.14);
background: rgba(255, 255, 255, 0.96);
color: var(--figma-blue);
box-shadow: 0 10px 22px rgba(27, 82, 147, 0.08);
font-weight: 800;
}
.matches-filter-toggle.hidden {
display: none !important;
}
#btn-tour-filter-open.is-filtered,
.matches-filter-toggle.is-filtered {
border-color: transparent;
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%);
color: #fff;
box-shadow: 0 14px 24px rgba(0, 100, 214, 0.22);
}
.matches-utility-bar {
gap: 10px;
}
.matches-utility-toggle {
width: 100%;
min-height: 48px;
justify-content: center;
border-radius: 16px;
}
.filters-modal {
width: min(100%, 430px) !important;
max-width: var(--figma-app-width, 420px) !important;
margin: auto auto 0 auto !important;
padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
border: 0 !important;
border-radius: 32px 32px 0 0 !important;
background: #ffffff !important;
box-shadow: 0 -18px 46px rgba(15, 23, 42, 0.14) !important;
}
.filters-title-wrap {
display: grid;
gap: 6px;
}
.filters-kicker {
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #2791ff;
}
.filters-header {
align-items: flex-start;
margin-bottom: 22px;
}
.filters-header h2 {
margin: 0;
font-size: 34px;
line-height: 1;
color: #111827;
}
.filters-close-btn {
width: 40px;
height: 40px;
border-radius: 14px;
color: #0064d6;
background: #eff6ff;
}
.filter-section {
margin-bottom: 18px;
}
.filter-label {
margin-bottom: 10px;
color: #111827;
font-size: 13px;
font-family: 'Lilita One', sans-serif;
letter-spacing: 0.04em;
text-transform: none;
text-shadow: none;
}
.filter-scroll-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
overflow: visible;
margin: 0;
padding: 0;
}
.filter-scroll-row .seg-btn {
min-width: 72px;
min-height: 42px;
padding: 0 16px;
border-radius: 14px;
border: 1px solid rgba(0, 100, 214, 0.14);
background: #ffffff;
color: #0064d6;
font-size: 15px;
font-weight: 800;
box-shadow: none;
}
.filter-scroll-row .seg-btn.active {
border-color: transparent;
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%);
color: #ffffff;
box-shadow: 0 12px 22px rgba(0, 100, 214, 0.18);
}
.filters-modal .actions .btn {
min-height: 54px;
border-radius: 18px;
}
.friends-page--v2 .friends-subtabs {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
overflow: visible;
}
.friends-page--v2 .friends-subtabs .seg-btn {
position: relative;
width: 100% !important;
min-width: 0 !important;
min-height: 54px;
padding: 0 4px !important;
justify-content: center;
overflow: hidden;
}
.friends-page--v2 .seg-tab-copy {
position: static;
width: 100%;
min-width: 0;
padding: 0 16px 0 4px !important;
gap: 0;
justify-content: center;
}
.friends-page--v2 .seg-tab-copy > span:first-child {
min-width: 0;
font-size: 9.25px !important;
line-height: 1;
letter-spacing: -0.025em;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
.friends-page--v2 .friends-tab-badge {
position: absolute !important;
top: 8px;
right: 8px;
transform: none !important;
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 9px;
}
.profile-hero-meta-label {
font-size: 11px !important;
line-height: 1;
margin: 0 0 3px !important;
color: #98a2b3;
}
.profile-hero {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr);
grid-template-areas:
"avatar sheet"
"avatar pill";
gap: 10px 12px;
align-items: start;
height: auto !important;
min-height: 0 !important;
margin-bottom: 12px;
padding: 8px 4px 0;
}
.profile-avatar-wrap {
grid-area: avatar;
position: relative !important;
left: auto !important;
top: auto !important;
width: 84px !important;
height: 84px !important;
border: 0 !important;
background: transparent !important;
}
.profile-avatar-ring {
width: 100%;
height: 100%;
padding: 4px;
border: 4px solid rgba(255, 255, 255, 0.96);
background: linear-gradient(180deg, #56c6ff 0%, #0064d6 100%);
box-shadow: 0 16px 24px rgba(0, 100, 214, 0.2);
}
.profile-avatar-ring img {
background: #eff6ff;
}
.profile-hero-sheet {
grid-area: sheet;
position: relative !important;
margin-left: 0 !important;
right: auto !important;
top: auto !important;
width: 100% !important;
min-height: 72px;
height: auto !important;
padding: 12px 14px !important;
border-radius: 24px !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 16px 24px rgba(33, 53, 81, 0.12);
overflow: hidden;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"copy level"
"copy button";
gap: 8px 12px;
align-items: end;
}
.profile-copy {
grid-area: copy;
min-width: 0;
align-self: center;
}
.profile-name-value {
font-size: 20px !important;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #111827;
}
.profile-level-value {
font-size: 24px !important;
line-height: 1;
color: #111827;
font-weight: 800;
}
.profile-level-wrap {
grid-area: level;
min-width: 48px;
justify-items: center !important;
}
.profile-mini-btn {
grid-area: button;
justify-self: end;
min-height: 34px;
min-width: 82px;
padding: 0 12px !important;
border-radius: 15px !important;
font-size: 13px !important;
font-weight: 800;
box-shadow: 0 8px 14px rgba(0, 100, 214, 0.16);
}
.profile-id-chip--inline {
grid-area: pill;
width: 100%;
min-height: 34px;
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 44px 8px 14px !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%) !important;
box-shadow: 0 10px 18px rgba(0, 100, 214, 0.16);
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 10px;
color: #cfe7ff;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 14px;
color: #eff6ff;
}
.profile-id-chip--inline .icon-id {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 10px;
border: 0;
background: rgba(255, 255, 255, 0.18);
cursor: pointer;
}
.profile-id-chip--inline .icon-id::before,
.profile-id-chip--inline .icon-id::after {
border-color: #eff6ff;
}
.profile-id-chip--inline .icon-id::after {
background: transparent;
}
.profile-stat-card {
min-height: 74px !important;
padding: 14px 16px !important;
border-radius: 24px !important;
background: rgba(255, 255, 255, 0.94) !important;
box-shadow: 0 12px 22px rgba(33, 53, 81, 0.08) !important;
}
.profile-stat-card .stat-icon {
width: 48px !important;
height: 48px !important;
margin-right: 14px !important;
flex: 0 0 48px;
}
.profile-stat-figma-icon {
width: 48px;
height: 48px;
margin-right: 14px;
flex: 0 0 48px;
display: block;
object-fit: contain;
}
.profile-stat-copy {
min-width: 0;
}
.profile-stat-label {
font-size: 13px;
font-weight: 700;
color: #7d8aa0;
}
.profile-stat-value {
font-size: 28px;
line-height: 1;
font-weight: 800;
color: #24324e;
}
@media (max-width: 440px) {
.friends-page--v2 .friends-subtabs {
gap: 6px;
}
.friends-page--v2 .seg-tab-copy > span:first-child {
font-size: 8.9px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 7px;
right: 6px;
}
.profile-hero {
grid-template-columns: 74px minmax(0, 1fr);
gap: 10px 12px;
}
.profile-avatar-wrap {
width: 74px !important;
height: 74px !important;
}
.profile-hero-sheet {
min-height: 68px;
padding: 10px 12px !important;
}
.profile-hero-main {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"copy button"
"level button";
gap: 8px 10px;
align-items: center;
}
.profile-copy {
grid-area: copy;
}
.profile-level-wrap {
grid-area: level;
min-width: 0;
justify-items: start !important;
}
.profile-name-value {
font-size: 18px !important;
}
.profile-mini-btn {
grid-area: button;
min-height: 32px;
min-width: 74px;
padding: 0 10px !important;
font-size: 12px !important;
}
.profile-id-chip--inline {
min-height: 32px;
padding: 7px 40px 7px 12px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 13px;
}
}
/* --- Final runtime correction pass: Telegram scroll + Figma profile + event toolbar cleanup --- */
html,
body,
.app-main.container,
[data-tab-panel],
[data-sub-panel],
[data-my-panel] {
overscroll-behavior-y: auto !important;
}
.friends-page,
.friends-page--v2,
.notif-page,
.notif-page--v2 {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
.friends-page .friends-detail-stack,
.friends-page--v2 .friends-detail-stack,
.notif-feed,
.notif-page--v2 .notif-feed {
flex: 0 0 auto !important;
min-height: 0 !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
.profile-card.screen-card--gradient {
padding: 9px 13px 12px;
}
.profile-hero {
position: relative !important;
display: block !important;
min-height: 84px !important;
margin-bottom: 8px !important;
padding: 10px 0 0 !important;
}
.profile-avatar-wrap {
position: absolute !important;
top: 6px !important;
left: 0 !important;
width: 70px !important;
height: 70px !important;
z-index: 3 !important;
}
.profile-avatar-ring {
padding: 3px !important;
border: 3px solid rgba(255, 255, 255, 0.96);
background: linear-gradient(180deg, #56c6ff 0%, #0064d6 100%) !important;
box-shadow: 0 10px 18px rgba(0, 100, 214, 0.18) !important;
}
.profile-hero-sheet {
position: relative !important;
margin-left: 46px !important;
width: calc(100% - 46px) !important;
min-height: 56px !important;
height: auto !important;
padding: 11px 14px 11px 34px !important;
border-radius: 0 31px 31px 0 !important;
background: #eff6ff !important;
box-shadow: none !important;
overflow: visible !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 10px !important;
align-items: center !important;
}
.profile-copy,
.profile-level-wrap {
gap: 3px !important;
}
.profile-copy {
min-width: 0;
}
.profile-hero-meta-label,
.profile-stat-label {
font-size: 12px !important;
line-height: 1 !important;
font-weight: 400 !important;
color: #7e7e7e !important;
}
.profile-name-value {
font-size: 16px !important;
line-height: 1.05 !important;
font-weight: 700 !important;
color: #111111 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-level-wrap {
min-width: 42px !important;
justify-items: start !important;
}
.profile-level-value {
font-size: 16px !important;
line-height: 1 !important;
font-weight: 700 !important;
color: #111111 !important;
}
.profile-mini-btn {
min-width: 0 !important;
min-height: 26px !important;
padding: 0 11px !important;
border-radius: 999px !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 600 !important;
box-shadow: none !important;
white-space: nowrap;
}
.profile-id-chip--inline {
position: relative !important;
width: 188px !important;
min-height: 22px !important;
margin: -20px 0 0 46px !important;
display: inline-flex !important;
align-items: center;
gap: 4px !important;
padding: 0 28px 0 12px !important;
border-radius: 0 0 31px 31px !important;
background: #0064d6 !important;
box-shadow: none !important;
}
.profile-id-chip--inline .profile-id-chip-label,
.profile-id-chip--inline .profile-id-chip-value {
line-height: 1;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 9px !important;
color: #99c8ff !important;
}
.profile-id-chip--inline .profile-id-chip-value {
max-width: 120px;
font-size: 9px !important;
font-weight: 700 !important;
color: #eff6ff !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-id-chip--inline .icon-id {
right: 4px !important;
width: 18px !important;
height: 18px !important;
border-radius: 0 !important;
background: transparent !important;
}
.profile-id-chip--inline .icon-id::before,
.profile-id-chip--inline .icon-id::after {
width: 8px !important;
height: 8px !important;
border-width: 1.5px !important;
}
.profile-id-chip--inline .icon-id::before {
top: 2px !important;
right: 2px !important;
}
.profile-id-chip--inline .icon-id::after {
top: 6px !important;
left: 2px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 62px !important;
position: relative;
padding: 10px 12px 10px 74px !important;
border-radius: 31px !important;
background: #eff6ff !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
position: absolute;
top: 50%;
left: 10px;
width: 54px !important;
height: 54px !important;
margin: 0 !important;
transform: translateY(-50%);
object-fit: contain;
}
.profile-stat-copy {
min-width: 0;
}
.profile-stat-value {
font-size: 12px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
color: #111111 !important;
}
.profile-links {
gap: 10px;
}
.social-button,
.social-button-inverse {
min-height: 54px;
height: auto;
border-radius: 16px;
padding: 0 14px;
font-size: 13px;
font-weight: 700;
}
.big-btn-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
object-fit: contain;
}
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.95fr));
align-items: stretch;
}
.notif-page--v2 .notif-toolbar-btn {
min-height: 58px;
gap: 8px;
padding: 0 10px;
border-radius: 18px;
white-space: normal;
text-align: center;
line-height: 1.05;
}
.notif-page--v2 .notif-toolbar-btn > span:last-child {
min-width: 0;
display: block;
}
.notif-page--v2 .notif-toolbar-btn__icon {
width: 17px;
height: 17px;
}
.notif-page--v2 #btn-notif-mark-all {
background: linear-gradient(180deg, #8fc5ff 0%, #6ea9ee 100%);
border: 1px solid rgba(0, 100, 214, 0.2);
color: #eff6ff;
}
.notif-page--v2 #btn-open-admin-chat {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(36, 50, 78, 0.12);
color: #24324e;
}
.notif-page--v2 #btn-notif-purge {
background: rgba(236, 241, 248, 0.98);
border: 1px solid rgba(102, 112, 133, 0.14);
color: #667085;
}
@media (max-width: 440px) {
.profile-avatar-wrap {
width: 66px !important;
height: 66px !important;
}
.profile-hero-sheet {
margin-left: 42px !important;
width: calc(100% - 42px) !important;
padding: 10px 12px 10px 32px !important;
}
.profile-hero-main {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"copy button"
"level button";
gap: 8px 10px !important;
}
.profile-copy {
grid-area: copy;
}
.profile-level-wrap {
grid-area: level;
}
.profile-mini-btn {
grid-area: button;
min-height: 24px !important;
padding: 0 9px !important;
font-size: 9px !important;
}
.profile-id-chip--inline {
margin-left: 42px !important;
width: 180px !important;
}
.profile-stat-card {
padding-left: 70px !important;
}
.profile-stat-figma-icon {
width: 50px !important;
height: 50px !important;
}
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: 1fr;
}
.notif-page--v2 .notif-toolbar-btn {
min-height: 52px;
}
}
/* Final runtime correction pass - friends/tournaments/matches/notif unification */
.catalog-utility-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.catalog-search-shell {
width: 100%;
}
.tour-filter-bar,
.friends-utility-row {
padding: 12px 16px !important;
}
.matches-utility-row {
padding: 0 !important;
}
.friends-utility-bar {
display: grid;
gap: 8px;
}
.matches-utility-bar {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 12px 16px 0 !important;
}
.matches-utility-row,
.matches-utility-row .matches-search-shell {
width: 100%;
}
.matches-utility-toggle {
width: 100%;
}
.friends-page--v2 .friends-subtabs {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px;
overflow: visible;
}
.friends-page--v2 .friends-subtabs .seg-btn {
min-height: 56px;
padding: 0 8px !important;
}
.friends-page--v2 .seg-tab-copy {
padding: 0 18px 0 8px !important;
}
.friends-page--v2 .seg-tab-copy > span:first-child {
font-size: 11px !important;
line-height: 1.08;
letter-spacing: -0.02em;
}
.friends-page--v2 .friends-tab-badge {
top: 7px;
right: 7px;
min-width: 20px;
height: 20px;
font-size: 10px;
}
.friends-page--v2 .friends-detail-stack {
padding: 0 16px 8px;
}
.friend-direction-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(39, 145, 255, 0.12);
color: #1277e1;
font-size: 10px;
font-weight: 800;
line-height: 1;
vertical-align: middle;
}
.notif-page--v2 .notif-toolbar-shell,
.notif-page--v2 .notif-feed {
width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
}
.notif-page--v2 .notif-toolbar-shell {
margin-bottom: 10px;
}
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.notif-page--v2 #btn-notif-purge {
grid-column: 1 / -1;
}
.notif-page--v2 .notif-toolbar-btn {
min-height: 56px;
padding: 0 12px;
}
@media (max-width: 440px) {
.friends-page--v2 .seg-tab-copy > span:first-child {
font-size: 10.5px !important;
}
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: 1fr;
}
}
/* Shared utility geometry + profile bottom row follow-up */
.section-utility-row {
padding: 12px 16px 0 !important;
margin-top: 8px !important;
}
.tour-filter-bar.section-utility-row,
.notif-utility-row.section-utility-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.friends-page--v2 .friends-utility-bar,
.matches-utility-bar {
gap: 10px;
}
.friends-page--v2 .friends-utility-row,
.tournaments-screen .tour-filter-bar,
.matches-screen .matches-utility-row,
.notif-page--v2 .notif-utility-row {
width: 100%;
}
.friends-page--v2 .matches-search-shell,
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.notif-page--v2 .matches-search-shell {
min-height: 52px;
}
.matches-filter-toggle,
.matches-filter-toggle .matches-filter-toggle__label {
color: var(--figma-blue) !important;
}
.notif-page--v2 .notif-toolbar-shell,
.notif-page--v2 .notif-feed {
width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
}
.notif-page--v2 .notif-toolbar-shell {
margin-top: 10px;
margin-bottom: 10px;
padding: 12px 16px 14px;
gap: 10px;
}
.notif-page--v2 .notif-toolbar-kicker {
font-size: 10px;
}
.notif-page--v2 .notif-toolbar-summary {
font-size: 12px;
line-height: 1.35;
}
.notif-page--v2 .notif-toolbar-actions {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto !important;
gap: 8px;
align-items: center;
}
.notif-page--v2 .notif-toolbar-btn {
min-height: 44px !important;
padding: 0 12px !important;
border-radius: 14px !important;
font-size: 12px !important;
}
.notif-page--v2 .notif-toolbar-btn--mini {
min-width: 92px;
min-height: 40px !important;
padding: 0 10px !important;
font-size: 11px !important;
}
.notif-page--v2 .notif-toolbar-btn > span:last-child {
white-space: nowrap;
}
.notif-page--v2 #btn-notif-purge {
grid-column: auto !important;
}
.profile-links.profile-links-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.profile-link-pill {
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
border-radius: 16px;
text-decoration: none;
border: 1px solid rgba(0, 100, 214, 0.14);
box-shadow: 0 10px 22px rgba(27, 82, 147, 0.08);
font-size: 12px;
font-weight: 800;
}
.profile-link-pill--primary {
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%);
border-color: transparent;
color: #ffffff;
}
.profile-link-pill--secondary {
background: rgba(255, 255, 255, 0.96);
color: var(--figma-blue);
}
.profile-link-pill .low-text,
.profile-link-pill .low-text-blue {
font-size: 11px;
line-height: 1.05;
font-weight: 800;
color: inherit;
text-align: center;
white-space: normal;
}
@media (max-width: 440px) {
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: 1fr !important;
}
.notif-page--v2 .notif-toolbar-btn--mini {
min-width: 0;
}
.profile-link-pill {
padding: 0 10px;
}
.profile-link-pill .low-text,
.profile-link-pill .low-text-blue {
font-size: 10px;
}
}
/* Final alignment pass: shared utility rows, profile footer, and root scroll */
html,
body {
min-height: 100% !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
html.sheet-open,
body.sheet-open,
html.avatar-picker-open,
body.avatar-picker-open {
overflow-y: hidden !important;
}
.app-main.container {
overflow: visible !important;
}
[data-tab-panel] {
overflow: visible !important;
}
.friends-page--v2,
.notif-page--v2 {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 0 0 calc(108px + env(safe-area-inset-bottom, 0px)) !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
background: transparent !important;
}
.friends-page--v2 .friends-subtabs,
.notif-page--v2 .notif-subtabs,
.profile-links.profile-links-row {
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box;
}
.friends-page--v2 .friends-subtabs,
.notif-page--v2 .notif-subtabs {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 4px !important;
padding: 4px !important;
border: 0 !important;
border-radius: 28px !important;
background: #bfd8f5 !important;
box-shadow: 0 12px 24px rgba(27, 82, 147, 0.12) !important;
overflow: visible !important;
}
.friends-page--v2 .friends-subtabs .seg-btn,
.notif-page--v2 .notif-subtabs .seg-btn {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: 24px !important;
background: transparent !important;
box-shadow: none !important;
color: var(--figma-blue) !important;
justify-content: center !important;
overflow: hidden !important;
}
.friends-page--v2 .friends-subtabs .seg-btn.active,
.notif-page--v2 .notif-subtabs .seg-btn.active {
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%) !important;
color: #ffffff !important;
box-shadow: 0 12px 24px rgba(0, 100, 214, 0.18) !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy {
width: 100%;
min-width: 0;
padding: 0 16px 0 8px !important;
justify-content: center;
gap: 6px !important;
}
.friends-page--v2 .seg-tab-copy > span:first-child,
.notif-page--v2 .seg-tab-copy > span:last-child {
font-size: 10.5px !important;
line-height: 1.05 !important;
}
.friends-page--v2 .friends-tab-badge {
top: 7px !important;
right: 8px !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 4px !important;
font-size: 9px !important;
}
.tournaments-screen .tour-filter-bar,
.matches-screen .matches-utility-bar,
.friends-page--v2 .friends-utility-row,
.notif-page--v2 .notif-utility-row {
width: calc(100% - 56px) !important;
margin: 8px auto 0 !important;
box-sizing: border-box;
}
.tournaments-screen .tour-filter-bar,
.matches-screen .matches-utility-row,
.friends-page--v2 .friends-utility-row,
.notif-page--v2 .notif-utility-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
}
.matches-screen .matches-utility-bar {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 0 !important;
}
.matches-screen .matches-utility-row {
width: 100% !important;
margin: 0 !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell {
width: 100% !important;
min-height: 52px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
min-width: 137px !important;
min-height: 50px !important;
padding: 0 18px !important;
color: var(--figma-blue) !important;
}
.matches-screen .matches-utility-toggle {
width: 100% !important;
min-height: 48px !important;
}
.friends-page--v2 .friends-detail-stack,
.notif-page--v2 .notif-feed {
flex: 0 0 auto !important;
min-height: 0 !important;
overflow: visible !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 0 8px !important;
}
.notif-page--v2 .notif-toolbar-shell {
width: 100% !important;
margin: 10px auto 0 !important;
padding: 14px 16px !important;
box-sizing: border-box;
}
.friends-page--v2 .friends-utility-row,
.notif-page--v2 .notif-utility-row {
margin-top: 10px !important;
}
.notif-page--v2 .notif-toolbar-actions {
display: grid !important;
grid-template-columns: 76px minmax(0, 1fr) 104px !important;
gap: 8px !important;
align-items: stretch !important;
}
.notif-page--v2 .notif-toolbar-btn {
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
padding: 0 10px !important;
justify-content: center !important;
border-radius: 14px !important;
}
.notif-page--v2 .notif-toolbar-btn--mini {
min-width: 0 !important;
}
.notif-page--v2 .notif-toolbar-btn__icon {
width: 15px;
height: 15px;
}
.profile-links.profile-links-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 4px !important;
padding: 4px !important;
margin-top: 12px !important;
border-radius: 28px !important;
background: #bfd8f5 !important;
box-shadow: 0 12px 24px rgba(27, 82, 147, 0.12) !important;
}
.profile-link-pill {
min-height: 48px !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: 24px !important;
box-shadow: none !important;
justify-content: center !important;
gap: 6px !important;
}
.profile-link-pill--primary {
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%) !important;
color: #ffffff !important;
}
.profile-link-pill--secondary {
background: transparent !important;
color: var(--figma-blue) !important;
}
.profile-link-pill .big-btn-icon {
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
}
.profile-link-pill .low-text,
.profile-link-pill .low-text-blue {
font-size: 10px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
@media (max-width: 440px) {
.friends-page--v2 .friends-subtabs .seg-btn,
.notif-page--v2 .notif-subtabs .seg-btn,
.profile-link-pill {
min-height: 46px !important;
padding: 0 6px !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy {
padding: 0 14px 0 6px !important;
}
.friends-page--v2 .seg-tab-copy > span:first-child,
.notif-page--v2 .seg-tab-copy > span:last-child,
.profile-link-pill .low-text,
.profile-link-pill .low-text-blue {
font-size: 9px !important;
}
.notif-page--v2 .notif-toolbar-actions {
grid-template-columns: 72px minmax(0, 1fr) 92px !important;
}
}
/* Final mobile utility/profile cleanup: fixed filter badge, icon-only mobile filter, compact profile hero */
#btn-tour-filter-open,
.matches-filter-toggle {
position: relative;
flex: 0 0 auto;
}
#btn-tour-filter-open::after,
.matches-filter-toggle::after {
content: attr(data-active-filters);
position: absolute;
top: 7px;
right: 9px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
display: none;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
font-size: 9px;
line-height: 1;
font-weight: 800;
box-sizing: border-box;
}
#btn-tour-filter-open.is-filtered::after,
.matches-filter-toggle.is-filtered::after {
display: inline-flex;
}
#btn-tour-filter-open .tour-filter-toggle__label,
#btn-tour-filter-open .matches-filter-toggle__label,
.matches-filter-toggle .matches-filter-toggle__label,
.matches-filter-toggle .tour-filter-toggle__label {
min-width: 0;
}
.profile-screen {
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
.profile-card.screen-card--gradient {
padding: 12px 14px 12px;
}
.profile-hero {
display: grid !important;
grid-template-columns: 78px minmax(0, 1fr) !important;
grid-template-areas:
"avatar chip"
"avatar sheet";
gap: 6px 12px !important;
min-height: 0 !important;
margin-bottom: 10px !important;
padding: 0 !important;
align-items: start !important;
}
.profile-avatar-wrap {
position: relative !important;
top: auto !important;
left: auto !important;
grid-area: avatar;
width: 78px !important;
height: 78px !important;
}
.profile-hero-sheet {
grid-area: sheet;
margin-left: 0 !important;
width: 100% !important;
min-height: 0 !important;
padding: 12px 14px !important;
border-radius: 28px !important;
overflow: hidden !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy level"
"copy button";
gap: 8px 12px !important;
align-items: center !important;
}
.profile-copy {
grid-area: copy;
min-width: 0;
align-self: stretch;
justify-content: center;
}
.profile-level-wrap {
grid-area: level;
min-width: 54px !important;
justify-items: end !important;
text-align: right;
}
.profile-name-value {
font-size: 18px !important;
line-height: 1.1 !important;
}
.profile-level-value {
font-size: 18px !important;
}
.profile-mini-btn {
grid-area: button;
justify-self: end;
min-width: 96px !important;
min-height: 34px !important;
padding: 0 14px !important;
font-size: 12px !important;
font-weight: 800 !important;
}
.profile-id-chip--inline {
grid-area: chip;
width: fit-content !important;
min-width: 164px;
max-width: 100%;
min-height: 28px !important;
margin: 0 !important;
padding: 0 34px 0 12px !important;
border-radius: 18px !important;
align-self: end;
}
.profile-id-chip--inline .profile-id-chip-label,
.profile-id-chip--inline .profile-id-chip-value {
font-size: 10px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
max-width: 116px;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
}
.profile-stats-grid {
gap: 10px !important;
}
.profile-stat-card {
min-height: 88px !important;
padding: 14px 14px 14px 86px !important;
}
.profile-stat-figma-icon {
left: 14px;
width: 58px !important;
height: 58px !important;
}
.profile-stat-label {
font-size: 12px !important;
}
.profile-stat-value {
font-size: 16px !important;
line-height: 1.1 !important;
}
.profile-links.profile-links-row {
gap: 6px !important;
}
.profile-link-pill--action,
.profile-link-pill--primary,
.profile-link-pill--secondary {
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%) !important;
color: #ffffff !important;
}
.profile-link-pill .low-text,
.profile-link-pill .low-text-blue {
color: inherit !important;
}
@media (max-width: 520px) {
.tournaments-screen .tour-filter-bar,
.matches-screen .matches-utility-row,
.friends-page--v2 .friends-utility-row,
.notif-page--v2 .notif-utility-row {
width: calc(100% - 32px) !important;
gap: 8px !important;
margin-top: 6px !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell {
min-height: 50px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
padding: 0 !important;
border-radius: 16px !important;
justify-self: end;
gap: 0 !important;
}
#btn-tour-filter-open .tour-filter-toggle__label,
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label {
display: none !important;
}
#btn-tour-filter-open::after,
.matches-filter-toggle::after {
top: 5px;
right: 5px;
min-width: 16px;
height: 16px;
padding: 0 3px;
font-size: 8px;
}
}
@media (max-width: 440px) {
.profile-hero {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 6px 10px !important;
}
.profile-avatar-wrap {
width: 72px !important;
height: 72px !important;
}
.profile-hero-sheet {
padding: 11px 12px !important;
border-radius: 24px !important;
}
.profile-hero-main {
gap: 7px 10px !important;
}
.profile-name-value {
font-size: 17px !important;
}
.profile-mini-btn {
min-width: 90px !important;
min-height: 32px !important;
padding: 0 12px !important;
font-size: 11px !important;
}
.profile-id-chip--inline {
min-width: 154px;
min-height: 26px !important;
}
.profile-id-chip--inline .profile-id-chip-label,
.profile-id-chip--inline .profile-id-chip-value {
font-size: 9px !important;
}
.profile-stat-card {
min-height: 80px !important;
padding: 12px 12px 12px 78px !important;
}
.profile-stat-figma-icon {
left: 12px;
width: 52px !important;
height: 52px !important;
}
}
/* 2026-04-08 Wave: shared controls + notifications/profile cleanup */
@keyframes section-air-enter {
from {
opacity: 0;
transform: translateY(6px) scale(0.994);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.section-air-enter {
animation: section-air-enter 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
button:active,
.btn:active,
.seg-btn:active,
.sub-btn:active,
.notif-card:active,
.profile-links-content__item:active {
transform: scale(0.985) !important;
filter: brightness(0.97) !important;
}
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
width: min(396px, calc(100% - 24px)) !important;
min-height: 56px !important;
margin: 0 auto !important;
padding: 8px !important;
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: 1fr !important;
align-items: stretch !important;
gap: 10px !important;
border-radius: 28px !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-height: 56px !important;
margin: 0 !important;
padding: 0 16px !important;
border-radius: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative;
overflow: hidden;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy,
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy {
min-width: 0;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
.friends-page--v2 .friends-tab-badge {
min-width: 24px !important;
height: 24px !important;
padding: 0 7px !important;
border-radius: 999px !important;
font-size: 12px !important;
line-height: 24px !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
width: min(396px, calc(100% - 24px)) !important;
margin: 12px auto 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 144px !important;
gap: 12px !important;
align-items: stretch !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell {
width: 100% !important;
min-height: 56px !important;
margin: 0 !important;
border-radius: 22px !important;
}
.matches-search-shell__icon {
left: 18px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
font-size: 18px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 144px !important;
min-width: 144px !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 16px !important;
border-radius: 22px !important;
justify-content: center !important;
gap: 10px !important;
color: #0a66db !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label {
color: #0a66db !important;
}
.matches-filter-toggle::after {
top: 7px !important;
right: 8px !important;
}
.notif-page--v2 .notif-toolbar-shell,
.notif-page--v2 .notif-toolbar-actions {
display: none !important;
}
.notif-seg-btn {
padding-right: 42px !important;
}
.notif-tab-side-action {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ff4d4f;
color: #ffffff;
box-shadow: 0 6px 14px rgba(255, 77, 79, 0.24);
pointer-events: auto;
z-index: 2;
}
.notif-tab-side-action.hidden {
display: none !important;
}
.notif-tab-side-action__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.notif-tab-side-action__icon {
width: 12px;
height: 12px;
display: none;
}
.notif-tab-side-action[data-notif-side-mode="clear"] {
background: rgba(255, 255, 255, 0.94);
color: #0a66db;
box-shadow: 0 6px 14px rgba(32, 56, 96, 0.16);
}
.notif-tab-side-action[data-notif-side-mode="clear"] .notif-tab-side-action__count {
display: none;
}
.notif-tab-side-action[data-notif-side-mode="clear"] .notif-tab-side-action__icon {
display: block;
}
.notif-page--v2 .notif-feed {
width: min(396px, calc(100% - 24px));
margin: 14px auto 0;
}
.notif-page--v2 .notif-card {
border-radius: 28px !important;
padding: 18px !important;
}
.notif-page--v2 .notif-card-topline {
align-items: center !important;
}
.notif-card-meta {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
.notif-card-delete {
width: 28px;
height: 28px;
border: 1px solid rgba(83, 97, 123, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
display: inline-flex;
align-items: center;
justify-content: center;
color: #7b879d;
padding: 0;
}
.notif-card-delete__icon {
width: 14px;
height: 14px;
}
.notif-page--v2 .notif-card-footer {
margin-top: 12px !important;
}
.notif-page--v2 .notif-empty-state {
padding: 34px 18px !important;
border-radius: 28px !important;
}
.notif-page--v2 .notif-empty-state__icon {
width: 44px !important;
height: 44px !important;
opacity: 0.9;
}
.profile-card.screen-card--gradient {
padding: 14px 12px 14px !important;
}
.profile-hero {
display: grid !important;
grid-template-columns: 78px minmax(0, 1fr) !important;
grid-template-areas:
"avatar sheet"
"avatar chip" !important;
gap: 10px 12px !important;
align-items: start !important;
min-height: 0 !important;
margin-bottom: 12px !important;
padding: 0 !important;
}
.profile-avatar-wrap {
grid-area: avatar;
position: relative !important;
top: auto !important;
left: auto !important;
width: 78px !important;
height: 78px !important;
align-self: start;
}
.profile-hero-sheet {
grid-area: sheet;
position: relative !important;
width: 100% !important;
min-height: 118px !important;
margin: 0 !important;
padding: 16px 16px 16px 22px !important;
border-radius: 30px !important;
overflow: hidden !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 12px 14px !important;
align-items: center !important;
}
.profile-copy {
min-width: 0;
gap: 6px !important;
}
.profile-hero-meta-label {
font-size: 15px !important;
color: rgba(106, 123, 153, 0.78) !important;
}
.profile-name-value {
font-size: 18px !important;
line-height: 1.04 !important;
font-weight: 800 !important;
}
.profile-title {
margin-top: 0 !important;
font-size: 13px !important;
line-height: 1.05 !important;
color: #9aa8c0 !important;
text-align: left !important;
}
.profile-level-wrap,
.profile-level-value {
display: none !important;
}
.profile-mini-btn {
justify-self: end !important;
min-width: 118px !important;
min-height: 42px !important;
padding: 0 18px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.profile-id-chip--inline {
grid-area: chip;
justify-self: end !important;
width: min(100%, 268px) !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 42px 0 16px !important;
border-radius: 18px !important;
background: rgba(10, 102, 219, 0.94) !important;
box-shadow: 0 10px 20px rgba(0, 84, 173, 0.18) !important;
}
.profile-id-chip--inline.is-copied {
background: rgba(14, 123, 228, 0.98) !important;
box-shadow: 0 12px 24px rgba(0, 84, 173, 0.24) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 13px !important;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.86) !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 17px !important;
line-height: 1 !important;
font-weight: 800 !important;
max-width: none !important;
color: #ffffff !important;
}
.profile-id-chip--inline .icon-id {
right: 12px !important;
width: 24px !important;
height: 24px !important;
background: transparent !important;
}
.profile-stats-grid {
gap: 10px !important;
margin-top: 0 !important;
}
.profile-stat-card {
min-height: 86px !important;
padding: 12px 14px 12px 80px !important;
border-radius: 28px !important;
}
.profile-stat-icon-wrap {
position: absolute;
top: 12px;
left: 12px;
width: 52px;
height: 52px;
border-radius: 18px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.profile-stat-figma-icon {
position: relative !important;
top: auto !important;
left: auto !important;
width: 72px !important;
height: 72px !important;
margin: 0 !important;
transform: none !important;
object-fit: cover !important;
object-position: 62% 62% !important;
}
.profile-stat-label {
font-size: 12px !important;
line-height: 1.04 !important;
color: #95a5be !important;
}
.profile-stat-value {
font-size: 18px !important;
line-height: 1.04 !important;
font-weight: 800 !important;
}
.profile-links-shell {
width: min(396px, calc(100% - 24px));
margin: 12px auto 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.profile-links-seg__icon {
width: 18px;
height: 18px;
object-fit: contain;
}
.profile-links-content {
display: flex;
gap: 10px;
flex-wrap: wrap;
width: 100%;
}
.profile-links-content__item {
flex: 1 1 120px;
min-height: 52px;
border-radius: 20px;
border: 1px solid rgba(59, 85, 126, 0.12);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 6px 0 rgba(41, 54, 76, 0.14);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 14px;
color: #143c7a;
font-size: 14px;
font-weight: 800;
text-decoration: none;
}
.profile-links-content__item--support {
border-color: rgba(0, 100, 214, 0.14);
background: linear-gradient(180deg, #2791ff 0%, #0064d6 100%);
color: #ffffff;
}
.profile-links-content__icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.admin-chat-close-btn {
min-width: 56px !important;
width: 56px !important;
min-height: 56px !important;
height: 56px !important;
padding: 0 !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.admin-chat-close-btn__icon {
position: relative;
width: 18px;
height: 18px;
display: inline-block;
}
.admin-chat-close-btn__icon::before,
.admin-chat-close-btn__icon::after {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 18px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.admin-chat-close-btn__icon::before {
transform: rotate(45deg);
}
.admin-chat-close-btn__icon::after {
transform: rotate(-45deg);
}
.toast-wrap {
top: auto !important;
right: auto !important;
left: 50% !important;
bottom: 92px !important;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 10px;
width: min(360px, calc(100vw - 24px));
z-index: 12000 !important;
pointer-events: none;
}
.toast {
width: 100%;
min-height: 58px;
border: 0;
border-radius: 20px;
background: rgba(18, 28, 47, 0.96);
box-shadow: 0 16px 34px rgba(10, 18, 34, 0.28);
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
color: #ffffff;
opacity: 0;
transform: translateY(10px) scale(0.985);
pointer-events: auto;
}
.toast__badge {
width: 12px;
height: 12px;
flex: 0 0 12px;
border-radius: 999px;
background: linear-gradient(180deg, #55c1ff 0%, #0a66db 100%);
box-shadow: 0 0 0 4px rgba(85, 193, 255, 0.16);
}
.toast__copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.toast.show {
opacity: 1;
transform: translateY(0) scale(1);
}
.toast-title {
font-size: 13px;
line-height: 1;
font-weight: 800;
color: #ffffff;
}
.toast-body {
font-size: 13px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 520px) {
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
width: calc(100% - 24px) !important;
min-height: 52px !important;
padding: 7px !important;
gap: 7px !important;
border-radius: 24px !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-height: 50px !important;
padding: 0 12px !important;
border-radius: 18px !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
width: calc(100% - 24px) !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
gap: 8px !important;
margin-top: 10px !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell {
min-height: 52px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
font-size: 15px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 0 !important;
justify-self: end;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle::after {
top: 5px !important;
right: 5px !important;
}
.profile-card.screen-card--gradient {
padding: 12px 10px 12px !important;
}
.profile-hero {
grid-template-columns: 70px minmax(0, 1fr) !important;
gap: 8px 10px !important;
}
.profile-avatar-wrap {
width: 70px !important;
height: 70px !important;
}
.profile-hero-sheet {
min-height: 108px !important;
padding: 14px 14px 14px 20px !important;
border-radius: 28px !important;
}
.profile-name-value {
font-size: 17px !important;
}
.profile-title {
font-size: 12px !important;
}
.profile-level-value {
font-size: 24px !important;
}
.profile-mini-btn {
min-width: 104px !important;
min-height: 38px !important;
font-size: 12px !important;
}
.profile-id-chip--inline {
width: min(100%, 244px) !important;
min-height: 40px !important;
padding: 0 40px 0 14px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 12px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 15px !important;
}
.profile-stat-card {
min-height: 80px !important;
padding: 12px 12px 12px 72px !important;
border-radius: 24px !important;
}
.profile-stat-icon-wrap {
width: 48px;
height: 48px;
border-radius: 16px;
top: 12px;
left: 12px;
}
.profile-stat-figma-icon {
width: 68px !important;
height: 68px !important;
}
.profile-links-content__item {
min-height: 48px;
font-size: 13px;
}
.notif-tab-side-action {
top: 6px;
right: 6px;
width: 22px;
height: 22px;
}
.notif-tab-side-action__count {
min-width: 22px;
height: 22px;
font-size: 10px;
}
.toast-wrap {
bottom: 86px !important;
width: calc(100vw - 24px);
}
}
/* 2026-04-08 follow-up: tiny filter button everywhere + safer notif badges */
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
grid-template-columns: minmax(0, 1fr) 52px !important;
gap: 8px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 0 !important;
justify-self: end;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle::after {
top: 4px !important;
right: 4px !important;
min-width: 16px !important;
height: 16px !important;
padding: 0 3px !important;
font-size: 8px !important;
}
.notif-seg-btn {
padding: 0 40px 0 10px !important;
}
.notif-page--v2 .seg-tab-copy {
gap: 5px !important;
font-size: 12px !important;
}
.notif-tab-side-action {
top: 6px !important;
right: 6px !important;
width: 20px !important;
height: 20px !important;
}
.notif-tab-side-action__count {
min-width: 20px !important;
height: 20px !important;
padding: 0 4px !important;
font-size: 9px !important;
}
.notif-tab-side-action__icon {
width: 11px !important;
height: 11px !important;
}
/* 2026-04-08 final geometry pass: unified controls + mobile profile cleanup */
:root {
--mini-row-width: min(396px, calc(100% - 24px));
--mini-seg-shell-radius: 24px;
--mini-seg-btn-radius: 18px;
--mini-seg-btn-height: 50px;
--mini-utility-gap: 8px;
--mini-filter-size: 52px;
}
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
width: var(--mini-row-width) !important;
max-width: var(--mini-row-width) !important;
min-height: 52px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 7px !important;
gap: 7px !important;
border-radius: var(--mini-seg-shell-radius) !important;
box-sizing: border-box !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-width: 0 !important;
min-height: var(--mini-seg-btn-height) !important;
border-radius: var(--mini-seg-btn-radius) !important;
}
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
width: var(--mini-row-width) !important;
max-width: var(--mini-row-width) !important;
margin-left: auto !important;
margin-right: auto !important;
grid-template-columns: minmax(0, 1fr) var(--mini-filter-size) !important;
gap: var(--mini-utility-gap) !important;
align-items: stretch !important;
}
.tour-filter-bar.section-utility-row > .matches-search-shell,
.matches-utility-row.section-utility-row > .matches-search-shell,
.friends-utility-row.section-utility-row > .matches-search-shell,
.notif-utility-row.section-utility-row > .matches-search-shell {
width: 100% !important;
min-width: 0 !important;
min-height: 52px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: var(--mini-filter-size) !important;
min-width: var(--mini-filter-size) !important;
max-width: var(--mini-filter-size) !important;
height: 52px !important;
min-height: 52px !important;
padding: 0 !important;
justify-self: end !important;
flex: 0 0 var(--mini-filter-size) !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label,
#btn-tour-filter-open .tour-filter-toggle__label,
#btn-my-filter-open .tour-filter-toggle__label,
#btn-friends-filter-open .tour-filter-toggle__label,
#btn-notif-filter-open .tour-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle::after {
top: 4px !important;
right: 4px !important;
min-width: 16px !important;
height: 16px !important;
padding: 0 3px !important;
font-size: 8px !important;
}
.friends-page--v2 .friends-subtabs .seg-btn,
.notif-page--v2 .notif-subtabs .seg-btn {
padding: 0 34px 0 10px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 50% !important;
right: 8px !important;
transform: translateY(-50%) !important;
min-width: 22px !important;
width: 22px !important;
height: 22px !important;
font-size: 10px !important;
}
.notif-seg-btn {
padding: 0 34px 0 10px !important;
}
.notif-page--v2 .seg-tab-copy {
gap: 5px !important;
font-size: 12px !important;
}
.notif-tab-side-action {
top: 50% !important;
right: 8px !important;
transform: translateY(-50%) !important;
width: 20px !important;
height: 20px !important;
}
.notif-tab-side-action__count {
min-width: 20px !important;
width: auto !important;
height: 20px !important;
padding: 0 4px !important;
font-size: 9px !important;
}
.notif-tab-side-action__icon {
width: 11px !important;
height: 11px !important;
}
.profile-screen {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
.profile-card.screen-card--gradient,
.profile-links-shell {
width: var(--mini-row-width) !important;
max-width: var(--mini-row-width) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.profile-card.screen-card--gradient {
padding: 14px 12px 14px !important;
border-radius: 34px !important;
}
.profile-hero {
position: relative !important;
display: block !important;
min-height: 178px !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
.profile-avatar-wrap {
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 3 !important;
width: 72px !important;
height: 72px !important;
}
.profile-avatar-ring {
padding: 4px !important;
}
.profile-hero-sheet {
position: relative !important;
grid-area: auto !important;
width: 100% !important;
min-height: 126px !important;
margin: 0 !important;
padding: 16px 16px 18px 96px !important;
border-radius: 32px !important;
overflow: hidden !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy level"
"copy button" !important;
gap: 10px 12px !important;
align-items: start !important;
}
.profile-copy {
grid-area: copy !important;
min-width: 0 !important;
gap: 4px !important;
padding-top: 4px !important;
}
.profile-level-wrap {
grid-area: level !important;
min-width: 54px !important;
justify-items: end !important;
text-align: right !important;
}
.profile-name-value {
font-size: 17px !important;
line-height: 1.06 !important;
font-weight: 800 !important;
}
.profile-title {
margin-top: 2px !important;
font-size: 12px !important;
line-height: 1.04 !important;
}
.profile-level-value {
font-size: 24px !important;
line-height: 1 !important;
}
.profile-mini-btn {
grid-area: button !important;
justify-self: end !important;
min-width: 108px !important;
min-height: 38px !important;
padding: 0 16px !important;
border-radius: 999px !important;
font-size: 12px !important;
}
.profile-id-chip--inline {
grid-area: auto !important;
position: relative !important;
justify-self: auto !important;
width: min(236px, calc(100% - 86px)) !important;
min-height: 40px !important;
margin: 10px 0 0 auto !important;
padding: 0 38px 0 14px !important;
border-radius: 18px !important;
overflow: hidden !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.profile-id-chip--inline.is-copied {
transform: translateY(-1px) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 11px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 15px !important;
max-width: none !important;
}
.profile-id-chip--inline .icon-id {
right: 10px !important;
width: 22px !important;
height: 22px !important;
}
.profile-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 0 !important;
}
.profile-stat-card {
min-height: 86px !important;
padding: 14px 12px 12px 74px !important;
border-radius: 28px !important;
}
.profile-stat-icon-wrap {
top: 12px !important;
left: 12px !important;
width: 46px !important;
height: 46px !important;
border-radius: 16px !important;
background: transparent !important;
}
.profile-stat-figma-icon {
width: 82px !important;
height: 82px !important;
object-fit: cover !important;
object-position: center !important;
transform: translate(7px, 7px) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(6px, 6px) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(7px, 8px) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(8px, 7px) !important;
}
.profile-stat-label {
font-size: 12px !important;
line-height: 1.04 !important;
}
.profile-stat-value {
font-size: 17px !important;
line-height: 1.04 !important;
}
.profile-links-shell {
margin-top: 0 !important;
gap: 10px !important;
}
.profile-links-seg > .seg-btn:not(.active) {
background: transparent !important;
color: #1560c9 !important;
box-shadow: none !important;
}
.profile-links-content {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
}
.profile-links-content > :only-child {
grid-column: 1 / -1 !important;
}
.profile-links-content__item {
min-height: 46px !important;
border-radius: 18px !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
font-size: 13px !important;
}
.admin-chat-close-btn {
min-width: 48px !important;
width: 48px !important;
min-height: 48px !important;
height: 48px !important;
border-radius: 16px !important;
margin-left: auto !important;
}
.admin-chat-close-btn__icon {
width: 16px !important;
height: 16px !important;
}
.admin-chat-close-btn__icon::before,
.admin-chat-close-btn__icon::after {
top: 7px !important;
width: 16px !important;
}
/* 2026-04-09 final mobile cleanup pass: exact badge corners + thinner profile chip */
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn {
padding: 0 28px 0 12px !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy {
position: relative !important;
min-width: 0 !important;
padding-right: 0 !important;
gap: 6px !important;
font-size: 12px !important;
}
.friends-page--v2 .seg-tab-copy {
position: static !important;
display: flex !important;
width: 100% !important;
}
.friends-page--v2 .friends-tab-badge {
top: 5px !important;
right: 5px !important;
transform: none !important;
min-width: 18px !important;
width: auto !important;
height: 18px !important;
padding: 0 4px !important;
border-radius: 999px !important;
font-size: 9px !important;
line-height: 18px !important;
}
.notif-seg-btn {
padding: 0 28px 0 12px !important;
}
.notif-tab-side-action {
top: 5px !important;
right: 5px !important;
transform: none !important;
width: 18px !important;
height: 18px !important;
}
.notif-tab-side-action__count {
min-width: 18px !important;
height: 18px !important;
padding: 0 4px !important;
font-size: 9px !important;
}
.notif-tab-side-action__icon {
width: 10px !important;
height: 10px !important;
}
.profile-screen {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-content: stretch !important;
}
.profile-card.screen-card--gradient,
.profile-links-shell {
width: calc(100% - 24px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.profile-card.screen-card--gradient {
padding: 12px 12px 12px !important;
border-radius: 32px !important;
}
.profile-hero {
min-height: 154px !important;
margin: 0 0 8px !important;
}
.profile-avatar-wrap {
top: 8px !important;
left: 10px !important;
width: 72px !important;
height: 72px !important;
}
.profile-hero-sheet {
min-height: 114px !important;
padding: 14px 14px 14px 94px !important;
border-radius: 30px !important;
}
.profile-hero-main {
gap: 8px 12px !important;
}
.profile-copy {
gap: 3px !important;
padding-top: 2px !important;
}
.profile-name-value {
font-size: 16px !important;
line-height: 1.05 !important;
}
.profile-title {
margin-top: 1px !important;
font-size: 12px !important;
}
.profile-level-wrap {
min-width: 50px !important;
}
.profile-level-value {
font-size: 22px !important;
}
.profile-mini-btn {
min-width: 104px !important;
min-height: 36px !important;
padding: 0 14px !important;
font-size: 12px !important;
}
.profile-id-chip--inline {
display: flex !important;
align-self: flex-end !important;
width: min(198px, calc(100% - 132px)) !important;
min-height: 24px !important;
margin: -2px 12px 2px auto !important;
padding: 0 28px 0 10px !important;
border-radius: 0 0 14px 14px !important;
background: linear-gradient(180deg, #1c73e8 0%, #0d63d3 100%) !important;
box-shadow: 0 8px 18px rgba(13, 99, 211, 0.16) !important;
overflow: hidden !important;
}
.profile-id-chip--inline.is-copied {
transform: none !important;
background: linear-gradient(180deg, #2a97ff 0%, #1473e8 100%) !important;
box-shadow: 0 10px 20px rgba(13, 99, 211, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
color: rgba(255, 255, 255, 0.82) !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 12px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.profile-id-chip--inline .icon-id {
top: 50% !important;
right: 7px !important;
width: 16px !important;
height: 16px !important;
transform: translateY(-50%) !important;
}
.profile-stats-grid {
width: 100% !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.profile-stat-card {
min-height: 82px !important;
padding: 12px 12px 10px 68px !important;
border-radius: 28px !important;
}
.profile-stat-icon-wrap {
top: 12px !important;
left: 12px !important;
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
overflow: hidden !important;
background: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(32, 58, 98, 0.08) !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: scale(1.06) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon,
.profile-stat-card:nth-child(3) .profile-stat-figma-icon,
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: scale(1.06) !important;
}
.profile-links-shell {
width: min(346px, calc(100% - 24px)) !important;
margin-top: 0 !important;
gap: 10px !important;
}
.profile-links-seg {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
min-height: 52px !important;
padding: 7px !important;
gap: 7px !important;
border-radius: 24px !important;
background: #bfd8f5 !important;
box-shadow: 0 12px 24px rgba(27, 82, 147, 0.12) !important;
}
.profile-links-seg > .seg-btn {
flex: 1 1 0 !important;
min-height: 50px !important;
padding: 0 10px !important;
border-radius: 18px !important;
}
.profile-links-seg > .seg-btn:not(.active) {
background: transparent !important;
color: #1560c9 !important;
box-shadow: none !important;
}
.profile-links-seg .seg-tab-copy {
justify-content: center !important;
align-items: center !important;
gap: 7px !important;
font-size: 12px !important;
}
.profile-links-seg__icon,
.profile-links-content__icon {
width: 16px !important;
height: 16px !important;
object-fit: contain !important;
}
.profile-links-content {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
}
.profile-links-content__item {
min-height: 44px !important;
padding: 0 12px !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.96) !important;
color: #143c7a !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
font-size: 12px !important;
}
.profile-links-content__item--support {
border-color: rgba(0, 100, 214, 0.16) !important;
background: rgba(255, 255, 255, 0.98) !important;
color: #1560c9 !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
}
.admin-chat-close-btn {
min-width: 50px !important;
width: 50px !important;
min-height: 50px !important;
height: 50px !important;
border-radius: 16px !important;
}
.admin-chat-close-btn__icon {
width: 16px !important;
height: 16px !important;
}
.admin-chat-close-btn__icon::before,
.admin-chat-close-btn__icon::after {
top: 7px !important;
width: 16px !important;
}
@media (max-width: 520px) {
.profile-card.screen-card--gradient,
.profile-links-shell {
width: min(346px, calc(100% - 24px)) !important;
}
.profile-links-seg .seg-tab-copy {
font-size: 12px !important;
}
.profile-links-content__item {
min-height: 42px !important;
font-size: 12px !important;
}
}
/* 2026-04-10 profile hero follow-up: explicit grid placement after v53 regression */
@media (max-width: 520px) {
.profile-hero {
position: relative !important;
grid-template-columns: 74px minmax(0, 1fr) !important;
grid-template-areas: none !important;
gap: 0 12px !important;
align-items: start !important;
padding-bottom: 16px !important;
}
.profile-avatar-wrap {
grid-column: 1 !important;
grid-row: 1 !important;
z-index: 3 !important;
width: 72px !important;
height: 72px !important;
margin-top: 8px !important;
}
.profile-hero-sheet {
grid-column: 2 !important;
grid-row: 1 !important;
position: relative !important;
width: auto !important;
max-width: none !important;
min-height: 116px !important;
margin: 0 !important;
padding: 14px 16px 28px 18px !important;
align-self: start !important;
}
.profile-hero-main {
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px 12px !important;
align-items: start !important;
}
.profile-copy {
min-width: 0 !important;
max-width: 100% !important;
}
.profile-name-value {
display: block !important;
max-width: 100% !important;
font-size: 16px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title {
display: block !important;
margin-top: 1px !important;
font-size: 12px !important;
color: #9aa8c0 !important;
}
.profile-level-wrap {
min-width: 54px !important;
}
.profile-level-value {
font-size: 22px !important;
}
.profile-mini-btn {
justify-self: end !important;
align-self: end !important;
min-width: 98px !important;
min-height: 36px !important;
font-size: 12px !important;
}
.profile-id-chip--inline {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: end !important;
width: min(214px, calc(100% - 10px)) !important;
margin: 0 10px -10px auto !important;
}
}
/* 2026-04-10 mobile-first fidelity pass: compact shared controls + attached profile chip */
.profile-links-content > :only-child {
grid-column: 1 / -1 !important;
}
.profile-links-content__item--support {
border-color: rgba(59, 85, 126, 0.12) !important;
background: rgba(255, 255, 255, 0.98) !important;
color: #1560c9 !important;
}
.admin-chat-close-btn {
min-width: 44px !important;
width: 44px !important;
min-height: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.admin-chat-close-btn__icon {
width: 14px !important;
height: 14px !important;
}
.admin-chat-close-btn__icon::before,
.admin-chat-close-btn__icon::after {
top: 50% !important;
left: 50% !important;
width: 16px !important;
}
.admin-chat-close-btn__icon::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.admin-chat-close-btn__icon::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.toast {
min-height: 54px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 18px !important;
backdrop-filter: blur(14px) !important;
}
@media (max-width: 520px) {
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
width: min(346px, calc(100% - 24px)) !important;
min-height: 64px !important;
padding: 7px !important;
gap: 8px !important;
border-radius: 26px !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-height: 50px !important;
padding: 0 12px !important;
border-radius: 20px !important;
}
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn {
padding-right: 28px !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy,
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy {
gap: 6px !important;
font-size: 12px !important;
}
.friends-page--v2 .friends-tab-badge,
.notif-tab-side-action {
top: 6px !important;
right: 6px !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
width: min(346px, calc(100% - 24px)) !important;
margin-top: 10px !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
gap: 10px !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell {
min-height: 52px !important;
border-radius: 18px !important;
}
.matches-search-shell__icon {
left: 15px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
font-size: 16px !important;
padding-left: 46px !important;
padding-right: 14px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 0 !important;
border-radius: 18px !important;
gap: 0 !important;
justify-content: center !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-tour-filter-open .tour-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .tour-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .tour-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .tour-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle::after {
top: 6px !important;
right: 6px !important;
}
.profile-card.screen-card--gradient {
padding: 12px 12px 14px !important;
border-radius: 30px !important;
}
.profile-hero {
grid-template-columns: 80px minmax(0, 1fr) !important;
gap: 0 10px !important;
margin-bottom: 10px !important;
}
.profile-avatar-wrap {
width: 74px !important;
height: 74px !important;
margin-top: 4px !important;
}
.profile-hero-sheet {
min-height: 108px !important;
padding: 13px 14px 26px 18px !important;
border-radius: 28px !important;
}
.profile-hero-main {
gap: 10px 12px !important;
}
.profile-copy {
gap: 4px !important;
padding-top: 0 !important;
}
.profile-hero-meta-label {
font-size: 13px !important;
}
.profile-name-value {
font-size: 15px !important;
line-height: 1.08 !important;
}
.profile-title {
margin-top: 0 !important;
font-size: 11px !important;
line-height: 1.05 !important;
}
.profile-level-wrap {
min-width: 46px !important;
}
.profile-level-value {
font-size: 18px !important;
}
.profile-mini-btn {
min-width: 96px !important;
min-height: 34px !important;
padding: 0 14px !important;
font-size: 11px !important;
}
.profile-id-chip--inline {
width: min(214px, calc(100% - 8px)) !important;
min-height: 22px !important;
height: 22px !important;
margin: -14px 10px 2px auto !important;
padding: 0 28px 0 10px !important;
border-radius: 0 0 14px 14px !important;
align-items: center !important;
box-shadow: 0 8px 16px rgba(0, 84, 173, 0.16) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
}
.profile-id-chip--inline .icon-id {
top: 50% !important;
right: 8px !important;
width: 14px !important;
height: 14px !important;
transform: translateY(-50%) !important;
}
.profile-stats-grid {
gap: 10px !important;
margin-top: 2px !important;
}
.profile-stat-card {
min-height: 88px !important;
padding: 14px 14px 14px 72px !important;
border-radius: 26px !important;
overflow: visible !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -8px !important;
width: 64px !important;
height: 64px !important;
border-radius: 999px !important;
transform: translateY(-50%) !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
width: 64px !important;
height: 64px !important;
object-fit: cover !important;
object-position: center !important;
}
.profile-stat-label {
font-size: 11px !important;
line-height: 1.08 !important;
}
.profile-stat-value {
font-size: 16px !important;
line-height: 1 !important;
}
.profile-links-shell {
width: min(346px, calc(100% - 24px)) !important;
margin-top: 8px !important;
gap: 10px !important;
}
.profile-links-seg {
gap: 8px !important;
border-radius: 26px !important;
}
.profile-links-seg > .seg-btn {
min-height: 50px !important;
padding: 0 10px !important;
}
.profile-links-seg__icon,
.profile-links-content__icon {
width: 15px !important;
height: 15px !important;
}
.profile-links-content {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.profile-links-content__item {
min-height: 42px !important;
padding: 0 10px !important;
border-radius: 18px !important;
gap: 8px !important;
font-size: 11px !important;
}
}
/* 2026-04-10 authoritative mobile Telegram pass:
- one shared geometry for top segmented rows and utility rows
- fixed icon-only filter button on mobile
- stable red unread badges / white clear badges in notifications
- profile hero rebuilt from main-file screenshot: compact sheet + thin attached ID chip
- profile footer segmented row matches the other sections
*/
.lb-btn {
display: none !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
background: #ffffff !important;
border: 1px solid #d5e4f4 !important;
color: #0a66db !important;
box-shadow: 0 6px 0 rgba(43, 57, 81, 0.14) !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-tour-filter-open .tour-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .tour-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .tour-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .tour-filter-toggle__label {
color: #0a66db !important;
}
.matches-filter-toggle.is-filtered,
#btn-tour-filter-open.is-filtered {
background: #ffffff !important;
color: #0a66db !important;
border-color: #98c2f3 !important;
}
@media (max-width: 520px) {
html,
body {
min-height: 100% !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.app-main.container,
main.container,
[data-tab-panel] {
overflow: visible !important;
}
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
width: min(346px, calc(100% - 24px)) !important;
min-height: 64px !important;
margin: 0 auto !important;
padding: 7px !important;
gap: 8px !important;
border-radius: 26px !important;
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: 1fr !important;
align-items: stretch !important;
background: #bfd8f5 !important;
box-shadow: 0 12px 24px rgba(27, 82, 147, 0.12) !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-height: 50px !important;
margin: 0 !important;
padding: 0 12px !important;
border-radius: 20px !important;
}
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn {
padding-right: 34px !important;
}
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy,
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-width: 0 !important;
font-size: 11px !important;
line-height: 1.05 !important;
text-align: center !important;
}
.friends-page--v2 .friends-tab-badge {
top: 7px !important;
right: 7px !important;
min-width: 20px !important;
height: 20px !important;
padding: 0 4px !important;
border-radius: 999px !important;
font-size: 10px !important;
line-height: 20px !important;
}
.notif-seg-btn {
padding-right: 34px !important;
}
.notif-tab-side-action {
top: 7px !important;
right: 7px !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
border-radius: 999px !important;
background: #ee4444 !important;
color: #ffffff !important;
box-shadow: 0 6px 14px rgba(238, 68, 68, 0.24) !important;
}
.notif-tab-side-action__count {
min-width: 20px !important;
height: 20px !important;
padding: 0 4px !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 20px !important;
}
.notif-tab-side-action__icon {
width: 10px !important;
height: 10px !important;
}
.notif-tab-side-action[data-notif-side-mode="clear"] {
background: rgba(255, 255, 255, 0.96) !important;
color: #0a66db !important;
box-shadow: 0 6px 14px rgba(32, 56, 96, 0.16) !important;
}
.notif-tab-side-action[data-notif-side-mode="clear"] .notif-tab-side-action__count {
display: none !important;
}
.notif-tab-side-action[data-notif-side-mode="clear"] .notif-tab-side-action__icon {
display: block !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
width: min(346px, calc(100% - 24px)) !important;
margin: 10px auto 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
align-items: stretch !important;
gap: 10px !important;
}
.matches-utility-bar.section-utility-row {
width: min(346px, calc(100% - 24px)) !important;
margin: 10px auto 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.matches-utility-bar .catalog-utility-row.matches-utility-row {
width: 100% !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
align-items: stretch !important;
gap: 10px !important;
}
.matches-utility-toggle {
width: 100% !important;
min-height: 46px !important;
margin: 0 !important;
border-radius: 18px !important;
justify-content: center !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell,
.catalog-search-shell {
min-height: 52px !important;
border-radius: 18px !important;
}
.matches-search-shell__icon {
left: 15px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
padding-left: 46px !important;
padding-right: 14px !important;
font-size: 16px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 !important;
border-radius: 18px !important;
justify-content: center !important;
gap: 0 !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-tour-filter-open .tour-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .tour-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .tour-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .tour-filter-toggle__label {
display: none !important;
}
.matches-filter-toggle:not(.is-filtered)::after {
display: none !important;
}
.matches-filter-toggle.is-filtered::after,
#btn-tour-filter-open.is-filtered::after {
top: 6px !important;
right: 6px !important;
min-width: 18px !important;
height: 18px !important;
font-size: 10px !important;
line-height: 18px !important;
border-radius: 999px !important;
background: #ee4444 !important;
color: #ffffff !important;
}
.profile-card.screen-card--gradient {
width: min(346px, calc(100% - 24px)) !important;
margin: 0 auto !important;
padding: 12px !important;
border-radius: 30px !important;
}
.profile-hero {
position: relative !important;
display: block !important;
min-height: 154px !important;
margin: 0 0 8px !important;
padding-top: 6px !important;
}
.profile-avatar-wrap {
position: absolute !important;
top: 10px !important;
left: 8px !important;
width: 74px !important;
height: 74px !important;
z-index: 3 !important;
margin: 0 !important;
}
.profile-hero-sheet {
position: relative !important;
display: block !important;
width: calc(100% - 78px) !important;
min-height: 114px !important;
margin: 0 0 0 78px !important;
padding: 14px 14px 20px 18px !important;
border-radius: 28px !important;
overflow: visible !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy level"
"copy button" !important;
gap: 8px 12px !important;
align-items: start !important;
}
.profile-copy {
grid-area: copy !important;
min-width: 0 !important;
padding-top: 2px !important;
gap: 4px !important;
}
.profile-hero-meta-label,
.profile-stat-label {
font-size: 11px !important;
line-height: 1.08 !important;
}
.profile-name-value {
display: block !important;
max-width: 100% !important;
font-size: 16px !important;
line-height: 1.06 !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title {
margin-top: 0 !important;
font-size: 11px !important;
line-height: 1.05 !important;
color: #9aa8c0 !important;
}
.profile-level-wrap {
grid-area: level !important;
min-width: 46px !important;
text-align: right !important;
justify-items: end !important;
}
.profile-level-value {
font-size: 19px !important;
line-height: 1 !important;
}
.profile-mini-btn {
grid-area: button !important;
justify-self: end !important;
align-self: end !important;
min-width: 96px !important;
min-height: 34px !important;
padding: 0 14px !important;
border-radius: 999px !important;
font-size: 11px !important;
}
.profile-id-chip--inline {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: min(188px, calc(100% - 114px)) !important;
min-height: 22px !important;
height: 22px !important;
margin: -2px 10px 6px auto !important;
padding: 0 26px 0 10px !important;
border-radius: 0 0 14px 14px !important;
background: linear-gradient(180deg, #1c73e8 0%, #0d63d3 100%) !important;
box-shadow: 0 8px 16px rgba(0, 84, 173, 0.16) !important;
overflow: hidden !important;
}
.profile-id-chip--inline.is-copied {
transform: none !important;
background: linear-gradient(180deg, #2a97ff 0%, #1473e8 100%) !important;
box-shadow: 0 10px 18px rgba(13, 99, 211, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
color: rgba(255, 255, 255, 0.8) !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
line-height: 1 !important;
font-weight: 800 !important;
color: #ffffff !important;
}
.profile-id-chip--inline .icon-id {
top: 50% !important;
right: 7px !important;
width: 14px !important;
height: 14px !important;
transform: translateY(-50%) !important;
}
.profile-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 4px !important;
}
.profile-stat-card {
min-height: 86px !important;
padding: 12px 12px 12px 70px !important;
border-radius: 26px !important;
overflow: hidden !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: 12px !important;
width: 48px !important;
height: 48px !important;
border-radius: 999px !important;
transform: translateY(-50%) !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: none !important;
}
.profile-stat-value {
font-size: 16px !important;
line-height: 1.02 !important;
}
.profile-links-shell {
width: min(346px, calc(100% - 24px)) !important;
margin: 10px auto 0 !important;
gap: 10px !important;
}
.profile-links-seg > .seg-btn:not(.active) {
background: transparent !important;
color: #1560c9 !important;
box-shadow: none !important;
}
.profile-links-seg__icon,
.profile-links-content__icon {
width: 15px !important;
height: 15px !important;
object-fit: contain !important;
}
.profile-links-content {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 44px !important;
padding: 0 12px !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.97) !important;
color: #143c7a !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
font-size: 12px !important;
}
.profile-links-content > :only-child {
grid-column: 1 / -1 !important;
}
.admin-chat-close-btn {
min-width: 44px !important;
width: 44px !important;
min-height: 44px !important;
height: 44px !important;
border-radius: 14px !important;
margin-left: auto !important;
}
.admin-chat-close-btn__icon {
width: 14px !important;
height: 14px !important;
}
.admin-chat-close-btn__icon::before,
.admin-chat-close-btn__icon::after {
top: 50% !important;
left: 50% !important;
width: 16px !important;
}
.admin-chat-close-btn__icon::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.admin-chat-close-btn__icon::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.toast {
min-height: 54px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 18px !important;
backdrop-filter: blur(14px) !important;
}
}
/* 2026-04-11 narrow profile corrective pass: keep stable baseline, restore 3-up link grid, tighten hero */
@media (max-width: 520px) {
.profile-card.screen-card--gradient {
padding: 12px !important;
}
.profile-hero {
min-height: 154px !important;
margin: 0 0 8px !important;
padding-top: 8px !important;
}
.profile-avatar-wrap {
top: 8px !important;
left: 8px !important;
width: 72px !important;
height: 72px !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 72px !important;
height: 72px !important;
}
.profile-hero-sheet {
min-height: 114px !important;
width: auto !important;
margin: 0 0 0 45px !important;
padding: 14px 14px 14px 46px !important;
border-radius: 0 30px 30px 0 !important;
}
.profile-hero-main {
gap: 8px 10px !important;
}
.profile-copy {
gap: 3px !important;
padding-top: 2px !important;
}
.profile-hero-meta-label {
color: #aec1de !important;
}
.profile-name-value {
font-size: 17px !important;
line-height: 1.05 !important;
}
.profile-title {
margin-top: 1px !important;
font-size: 11px !important;
}
.profile-level-wrap {
min-width: 48px !important;
}
.profile-level-value {
font-size: 22px !important;
}
.profile-mini-btn {
min-width: 112px !important;
min-height: 36px !important;
padding: 0 16px !important;
font-size: 11px !important;
border-radius: 18px !important;
}
.profile-id-chip--inline {
width: min(176px, calc(100% - 132px)) !important;
min-height: 19px !important;
height: 19px !important;
margin: 7px 18px 10px auto !important;
padding: 0 22px 0 10px !important;
border-radius: 0 0 10px 10px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 10px !important;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
width: 13px !important;
height: 13px !important;
}
.profile-stats-grid {
gap: 12px !important;
}
.profile-stat-card {
min-height: 88px !important;
padding: 10px 12px 10px 64px !important;
border-radius: 24px !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: 10px !important;
width: 48px !important;
height: 48px !important;
transform: translateY(-50%) !important;
}
.profile-stat-figma-icon {
object-fit: contain !important;
object-position: center !important;
transform: none !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: scale(1.08) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: scale(1.12) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: scale(1.08) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: scale(1.12) !important;
}
.profile-stat-label {
font-size: 12px !important;
line-height: 1.08 !important;
}
.profile-stat-value {
font-size: 16px !important;
line-height: 1 !important;
}
.profile-links-shell {
width: min(346px, calc(100% - 24px)) !important;
margin-top: 8px !important;
gap: 10px !important;
}
.profile-links-seg {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
min-height: 56px !important;
padding: 6px !important;
gap: 6px !important;
border-radius: 24px !important;
}
.profile-links-seg > .seg-btn {
flex: 1 1 0 !important;
min-height: 44px !important;
border-radius: 18px !important;
}
.profile-links-seg .seg-tab-copy {
gap: 6px !important;
font-size: 12px !important;
}
.profile-links-seg__icon,
.profile-links-content__icon {
width: 18px !important;
height: 18px !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
flex: 0 0 auto !important;
}
.profile-links-content {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
min-height: 56px !important;
padding: 6px !important;
border-radius: 24px !important;
background: #bfd8f5 !important;
box-shadow: 0 12px 24px rgba(27, 82, 147, 0.12) !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
position: relative !important;
min-height: 44px !important;
padding: 0 8px !important;
border-radius: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-align: center !important;
font-size: 11px !important;
line-height: 1.05 !important;
background: rgba(255, 255, 255, 0.97) !important;
color: #1560c9 !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
text-decoration: none !important;
}
.profile-links-content__label {
display: block !important;
text-align: center !important;
white-space: nowrap !important;
font-size: 11px !important;
font-weight: 800 !important;
color: inherit !important;
}
.profile-links-content__state {
position: absolute !important;
top: 5px !important;
right: 5px !important;
min-width: 18px !important;
height: 14px !important;
padding: 0 4px !important;
border-radius: 999px !important;
background: #eaf2ff !important;
color: #1560c9 !important;
font-size: 8px !important;
font-weight: 800 !important;
line-height: 14px !important;
text-align: center !important;
}
.profile-links-content__item--disabled {
opacity: 0.72 !important;
}
.profile-links-content__item--disabled .profile-links-content__label,
.profile-links-content__icon--ghost {
display: none !important;
}
}
/* 2026-04-12 Telegram-like mobile shell + profile corrective pass */
@media (max-width: 520px) {
:root {
--mini-shell-gutter: 10px;
--mini-shell-width: calc(100vw - (var(--mini-shell-gutter) * 2));
--mini-shell-radius: 34px;
--mini-chip-radius: 22px;
}
.app-header {
padding-left: var(--mini-shell-gutter) !important;
padding-right: var(--mini-shell-gutter) !important;
}
.app-main.container {
padding-left: var(--mini-shell-gutter) !important;
padding-right: var(--mini-shell-gutter) !important;
}
.profile-screen,
.tournaments-screen,
.matches-screen,
.friends-page--v2,
.notif-page--v2 {
width: 100% !important;
align-items: stretch !important;
}
.profile-card.screen-card--gradient,
.profile-links-shell,
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row,
.matches-utility-bar.section-utility-row,
.tournaments-screen .screen-card,
.matches-screen .screen-card,
.friends-page--v2 .screen-card,
.notif-page--v2 .screen-card {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.tournaments-screen .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-width: 0 !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
gap: 10px !important;
align-items: stretch !important;
}
.matches-utility-bar.section-utility-row {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
}
.matches-utility-bar .catalog-utility-row.matches-utility-row {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
gap: 10px !important;
align-items: stretch !important;
}
.tournaments-screen .matches-search-shell,
.matches-screen .matches-search-shell,
.friends-page--v2 .matches-search-shell,
.notif-page--v2 .matches-search-shell,
.catalog-search-shell {
min-height: 52px !important;
border-radius: 18px !important;
background: #ffffff !important;
border: 1px solid rgba(150, 175, 214, 0.32) !important;
box-shadow: 0 7px 0 rgba(41, 54, 76, 0.14) !important;
}
.catalog-search-shell::before {
display: none !important;
}
.matches-search-shell__icon {
left: 16px !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
padding-left: 46px !important;
padding-right: 14px !important;
font-size: 15px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open {
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 !important;
border-radius: 18px !important;
justify-content: center !important;
}
.matches-utility-toggle {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 !important;
border-radius: 18px !important;
justify-content: center !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label {
display: none !important;
}
.profile-card.screen-card--gradient {
padding: 18px 14px 20px !important;
border-radius: var(--mini-shell-radius) !important;
overflow: visible !important;
background:
linear-gradient(180deg, #0064d6 0%, rgba(0, 100, 214, 0) 82%),
linear-gradient(90deg, #bfd8f5 0%, #bfd8f5 100%) !important;
}
.profile-hero,
.profile-stats-grid {
width: 100% !important;
}
.profile-hero {
min-height: 208px !important;
margin: 0 0 16px !important;
padding-top: 18px !important;
overflow: visible !important;
}
.profile-avatar-wrap {
top: 44px !important;
left: 8px !important;
width: 106px !important;
height: 106px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 106px !important;
height: 106px !important;
}
.profile-avatar-ring {
padding: 4px !important;
background: #0b6fdf !important;
box-shadow:
0 0 0 4px #eff6ff,
0 0 0 7px #0b6fdf !important;
}
.profile-hero-sheet {
position: relative !important;
z-index: 3 !important;
width: calc(100% - 34px) !important;
min-height: 112px !important;
margin: 26px 0 0 52px !important;
padding: 18px 18px 18px 86px !important;
border-radius: 0 30px 30px 0 !important;
background: #eff6ff !important;
overflow: visible !important;
}
.profile-hero-main {
position: relative !important;
display: block !important;
min-height: 76px !important;
}
.profile-copy {
display: grid !important;
gap: 4px !important;
min-width: 0 !important;
padding: 6px 124px 0 0 !important;
}
.profile-hero-side {
display: none !important;
}
.profile-hero-meta-label {
font-size: 12px !important;
line-height: 1 !important;
color: #a7b4c8 !important;
}
.profile-hero-side .profile-hero-meta-label {
display: none !important;
}
.profile-name-value {
font-size: 18px !important;
line-height: 1.04 !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title {
margin-top: 2px !important;
font-size: 12px !important;
line-height: 1.04 !important;
font-weight: 700 !important;
color: #8da0ba !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
}
.profile-level-wrap {
display: none !important;
}
.profile-mini-btn {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
min-width: 104px !important;
width: 104px !important;
min-height: 36px !important;
height: 36px !important;
padding: 0 14px !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 800 !important;
box-shadow: 0 5px 0 rgba(18, 76, 142, 0.16) !important;
}
.profile-id-chip--inline {
position: absolute !important;
left: 68px !important;
top: 160px !important;
width: min(208px, calc(100% - 164px)) !important;
min-height: 20px !important;
height: 20px !important;
margin: 0 !important;
padding: 0 28px 0 12px !important;
border-radius: 0 12px 12px 12px !important;
background: linear-gradient(90deg, #1071e4 0%, #0a64d4 100%) !important;
box-shadow: none !important;
z-index: 2 !important;
}
.profile-id-chip--inline.is-copied {
background: linear-gradient(90deg, #1180f4 0%, #2191ff 100%) !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
color: #93c9ff !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
font-weight: 800 !important;
color: #eff6ff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-id-chip--inline .icon-id {
top: 50% !important;
right: 8px !important;
width: 14px !important;
height: 14px !important;
transform: translateY(-50%) !important;
}
.profile-stats-grid {
gap: 12px !important;
}
.profile-stat-card {
min-height: 112px !important;
padding: 18px 14px 18px 92px !important;
border-radius: 28px !important;
overflow: visible !important;
}
.profile-stat-copy {
display: grid !important;
gap: 6px !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -16px !important;
width: 90px !important;
height: 90px !important;
transform: translateY(-50%) !important;
border-radius: 50% !important;
overflow: hidden !important;
clip-path: circle(50% at 50% 50%) !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
transform: scale(1.02) !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap {
width: 92px !important;
height: 92px !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-2px, 0) scale(1.05) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap {
left: -10px !important;
width: 94px !important;
height: 94px !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(1px, -1px) scale(1.06) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap {
width: 90px !important;
height: 90px !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-1px, 0) scale(1.04) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -8px !important;
width: 96px !important;
height: 96px !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(3px, -1px) scale(1.08) !important;
}
.profile-stat-label {
font-size: 16px !important;
line-height: 1.05 !important;
color: #8b919c !important;
}
.profile-stat-value {
font-size: 20px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.profile-links-shell {
margin-top: 14px !important;
gap: 10px !important;
}
.profile-links-seg,
.profile-links-content {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.profile-links-seg {
min-height: 56px !important;
padding: 6px !important;
gap: 6px !important;
border-radius: 24px !important;
}
.profile-links-seg > .seg-btn {
flex: 1 1 0 !important;
min-height: 44px !important;
border-radius: 18px !important;
}
.profile-links-seg .seg-tab-copy {
gap: 6px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
.profile-links-seg__icon,
.profile-links-content__icon {
width: 18px !important;
height: 18px !important;
object-fit: contain !important;
object-position: center !important;
flex: 0 0 auto !important;
display: block !important;
}
.profile-links-content {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
min-height: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 50px !important;
padding: 0 6px !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.98) !important;
color: #1560c9 !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
}
.profile-links-content__label {
font-size: 11px !important;
white-space: nowrap !important;
}
.profile-links-content__state {
top: 4px !important;
right: 4px !important;
min-width: 18px !important;
height: 14px !important;
padding: 0 4px !important;
border-radius: 999px !important;
font-size: 8px !important;
line-height: 14px !important;
}
}
/* 2026-04-14 EOF mobile corrective override: final authority */
@media (max-width: 520px) {
body {
--mini-header-lift: 76px !important;
}
.profile-screen,
.tournaments-screen,
.matches-screen,
.friends-page--v2,
.notif-page--v2 {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.app-header {
padding: calc(max(var(--mini-safe-top), 22px) + var(--mini-header-lift) + 8px) var(--mini-shell-gutter) 10px !important;
}
.app-main.container {
padding: calc(max(var(--mini-safe-top), 22px) + var(--mini-header-lift) + 86px) 0 calc(max(var(--mini-safe-bottom), 12px) + 112px) !important;
}
body[data-current-tab="profile"] .app-main.container {
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 18px) !important;
}
.topbar {
min-height: 48px !important;
grid-template-columns: 100px minmax(120px, 1fr) 100px !important;
gap: 10px !important;
}
.topbar-side {
min-width: 100px !important;
gap: 12px !important;
}
.topbar-logo {
max-width: 162px !important;
min-height: 50px !important;
}
.top-icon-btn {
width: 44px !important;
height: 44px !important;
flex-basis: 44px !important;
border-radius: 13px !important;
}
.top-icon-btn .tab-btn-icon {
width: 26px !important;
height: 26px !important;
}
.menubar {
bottom: calc(max(var(--mini-safe-bottom), 12px) + 20px) !important;
padding: 6px 14px calc(max(var(--mini-safe-bottom), 12px) + 12px) !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
grid-template-columns: minmax(0, 1fr) 56px !important;
gap: 8px !important;
}
.matches-filter-toggle {
width: 56px !important;
min-width: 56px !important;
min-height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 20px !important;
}
.matches-filter-toggle__label,
.tour-filter-toggle__label {
display: none !important;
}
.profile-card.screen-card--gradient {
padding: 12px 10px 8px !important;
border-radius: 36px !important;
}
.profile-hero {
min-height: 170px !important;
margin: 0 0 8px !important;
padding-top: 2px !important;
}
.profile-avatar-wrap {
top: 10px !important;
left: -4px !important;
width: 134px !important;
height: 134px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 134px !important;
height: 134px !important;
}
.profile-hero-sheet {
width: calc(100% - 22px) !important;
min-height: 102px !important;
margin: 20px 0 0 34px !important;
padding: 12px 14px 12px 98px !important;
border-radius: 0 34px 34px 24px !important;
box-shadow: 0 14px 22px rgba(33, 53, 81, 0.1) !important;
}
.profile-hero-main {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy button"
"title button" !important;
gap: 3px 10px !important;
align-items: center !important;
min-height: 80px !important;
}
.profile-copy {
display: grid !important;
gap: 3px !important;
min-width: 0 !important;
padding: 2px 0 0 0 !important;
}
.profile-hero-side {
display: grid !important;
grid-area: title !important;
justify-items: start !important;
align-self: start !important;
min-width: 0 !important;
padding-top: 0 !important;
}
.profile-hero-side .profile-hero-meta-label {
display: none !important;
}
.profile-level-wrap,
.profile-hero-side .profile-level-value {
display: none !important;
}
.profile-name-value {
font-size: 18px !important;
line-height: 1 !important;
}
.profile-title {
display: block !important;
margin-top: 0 !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 700 !important;
color: #8999b3 !important;
}
.profile-mini-btn {
position: static !important;
grid-area: button !important;
justify-self: end !important;
align-self: center !important;
min-width: 98px !important;
width: auto !important;
min-height: 32px !important;
height: 32px !important;
padding: 0 12px !important;
font-size: 9px !important;
border-radius: 999px !important;
}
.profile-id-chip--inline {
left: 68px !important;
top: 132px !important;
width: min(238px, calc(100% - 144px)) !important;
min-height: 20px !important;
height: 20px !important;
padding: 0 24px 0 44px !important;
border-radius: 0 13px 13px 13px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8.4px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11px !important;
}
.profile-id-chip--inline .icon-id {
right: 7px !important;
width: 12px !important;
height: 12px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 88px !important;
padding: 10px 12px 10px 78px !important;
border-radius: 24px !important;
overflow: visible !important;
}
.profile-stat-copy {
gap: 4px !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -20px !important;
width: 94px !important;
height: 94px !important;
transform: translateY(-50%) !important;
overflow: hidden !important;
clip-path: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -20px !important;
width: 94px !important;
height: 94px !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-8px, 0) scale(1.02) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(-8px, 0) scale(1.02) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-8px, 0) scale(1.02) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(-8px, 0) scale(1.02) !important;
}
.profile-stat-label {
font-size: 18px !important;
line-height: 1 !important;
}
.profile-stat-value {
font-size: 19px !important;
line-height: 1 !important;
}
.profile-links-shell {
margin-top: 8px !important;
gap: 8px !important;
}
.profile-links-seg {
min-height: 56px !important;
padding: 5px !important;
gap: 6px !important;
border-radius: 24px !important;
}
.profile-links-seg > .seg-btn {
min-height: 46px !important;
border-radius: 18px !important;
padding: 0 8px !important;
}
.profile-links-seg .seg-tab-copy {
gap: 6px !important;
font-size: 12px !important;
}
.profile-links-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 46px !important;
border-radius: 18px !important;
box-shadow: 0 4px 0 rgba(41, 54, 76, 0.12) !important;
}
.profile-links-content__label {
font-size: 10.5px !important;
}
#tour-filter-modal.overlay,
#friends-filter-modal.overlay,
#notif-filter-modal.overlay {
padding: 0 14px calc(max(var(--mini-safe-bottom), 12px) + 20px) !important;
}
.filters-modal {
width: min(calc(var(--mini-shell-width) - 36px), 352px) !important;
max-width: min(calc(var(--mini-shell-width) - 36px), 352px) !important;
padding: 16px 16px 18px !important;
border-radius: 26px !important;
}
.filters-modal__grab {
width: 54px !important;
margin-bottom: 10px !important;
}
.filters-close-btn {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
border-radius: 14px !important;
}
.filters-close-btn__icon {
width: 14px !important;
height: 14px !important;
}
.filters-modal .actions {
margin-top: 18px !important;
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 2px) !important;
}
.filters-modal .actions .btn {
min-height: 52px !important;
}
}
/* 2026-04-15 final authority: mobile shell, profile hero, zero-badges, referral row */
* {
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 520px) {
body {
--mini-shell-gutter: 10px !important;
--mini-shell-width: calc(100vw - (var(--mini-shell-gutter) * 2)) !important;
--mini-header-lift: 90px !important;
}
body.tg-embedded {
--mini-header-lift: 118px !important;
}
.app-header,
.menubar {
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease !important;
}
.app-header {
width: 100% !important;
max-width: none !important;
padding: calc(max(var(--mini-safe-top), 22px) + var(--mini-header-lift) + 12px) var(--mini-shell-gutter) 8px !important;
}
.topbar,
.profile-card.screen-card--gradient,
.profile-links-shell,
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.matches-utility-bar.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row,
.friends-sticky-footer,
#friends-action-area,
.notif-page--v2 .notif-feed {
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.app-main.container {
width: 100% !important;
max-width: none !important;
padding: calc(max(var(--mini-safe-top), 22px) + var(--mini-header-lift) + 86px) 0 calc(max(var(--mini-safe-bottom), 12px) + 106px) !important;
}
body[data-current-tab="profile"] .app-main.container {
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 14px) !important;
}
.topbar {
min-height: 48px !important;
grid-template-columns: 98px minmax(0, 1fr) 98px !important;
gap: 10px !important;
}
.topbar-side {
min-width: 98px !important;
gap: 12px !important;
}
.topbar-logo {
max-width: 164px !important;
min-height: 50px !important;
}
.top-icon-btn {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.menubar {
left: 50% !important;
right: auto !important;
bottom: calc(max(var(--mini-safe-bottom), 12px) + 16px) !important;
width: var(--mini-shell-width) !important;
max-width: var(--mini-shell-width) !important;
padding: 6px 12px calc(max(var(--mini-safe-bottom), 12px) + 10px) !important;
transform: translateX(-50%) !important;
}
body.chrome-hidden .app-header {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(calc(-100% - 16px)) !important;
}
body.chrome-hidden .menubar {
opacity: 0 !important;
pointer-events: none !important;
transform: translate(-50%, calc(100% + max(var(--mini-safe-bottom), 12px) + 30px)) !important;
}
.tournaments-screen .subtabs.seg,
.matches-screen .subtabs.seg,
.friends-page--v2 .subtabs.seg,
.notif-page--v2 .subtabs.seg,
.profile-links-seg {
min-height: 58px !important;
padding: 6px !important;
gap: 8px !important;
border-radius: 24px !important;
}
.tournaments-screen .subtabs.seg > .seg-btn,
.matches-screen .subtabs.seg > .seg-btn,
.friends-page--v2 .subtabs.seg > .seg-btn,
.notif-page--v2 .subtabs.seg > .seg-btn,
.profile-links-seg > .seg-btn {
min-height: 46px !important;
border-radius: 18px !important;
padding: 0 14px !important;
}
.tournaments-screen .subtabs.seg > .seg-btn.active .seg-tab-copy,
.matches-screen .subtabs.seg > .seg-btn.active .seg-tab-copy,
.friends-page--v2 .subtabs.seg > .seg-btn.active .seg-tab-copy,
.notif-page--v2 .subtabs.seg > .seg-btn.active .seg-tab-copy,
.profile-links-seg > .seg-btn.active .seg-tab-copy {
color: #ffffff !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy,
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy {
width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 20px 0 8px !important;
font-size: 13px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
.friends-page--v2 .friends-subtabs .seg-btn[data-friends-view="referrals"] .seg-tab-copy {
padding-right: 26px !important;
}
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg path,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon path {
color: #ffffff !important;
fill: currentColor !important;
opacity: 1 !important;
}
.friends-page--v2 .friends-tab-badge,
.notif-tab-side-action,
.notif-tab-side-action__count {
min-width: 20px !important;
height: 20px !important;
line-height: 20px !important;
font-size: 10px !important;
font-weight: 800 !important;
border-radius: 999px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 7px !important;
right: 7px !important;
padding: 0 4px !important;
}
.notif-tab-side-action {
top: 7px !important;
right: 7px !important;
background: #ff4d4f !important;
color: #ffffff !important;
}
.notif-tab-side-action[data-notif-side-mode="zero"] {
background: #ff4d4f !important;
color: #ffffff !important;
box-shadow: 0 6px 14px rgba(255, 77, 79, 0.24) !important;
}
.notif-tab-side-action[data-notif-side-mode="zero"] .notif-tab-side-action__icon {
display: none !important;
}
.section-utility-row,
.tour-filter-bar.section-utility-row,
.matches-utility-row.section-utility-row,
.friends-utility-row.section-utility-row,
.notif-utility-row.section-utility-row {
grid-template-columns: minmax(0, 1fr) 56px !important;
gap: 8px !important;
}
.matches-screen .matches-utility-bar.section-utility-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.matches-screen .matches-utility-row.section-utility-row {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.matches-search-shell {
min-height: 52px !important;
padding: 0 14px 0 46px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(59, 85, 126, 0.12) !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.14) !important;
}
.matches-search-input,
.catalog-search-input,
.tour-search-input {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 17px !important;
}
#btn-tour-filter-open,
#btn-my-filter-open,
#btn-friends-filter-open,
#btn-notif-filter-open,
.matches-filter-toggle {
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 20px !important;
color: #0a66db !important;
}
#btn-tour-filter-open .matches-filter-toggle__label,
#btn-my-filter-open .matches-filter-toggle__label,
#btn-friends-filter-open .matches-filter-toggle__label,
#btn-notif-filter-open .matches-filter-toggle__label,
.matches-filter-toggle__label {
display: none !important;
}
.profile-card.screen-card--gradient {
padding: 12px 10px 10px !important;
border-radius: 36px !important;
}
.profile-hero {
min-height: 154px !important;
margin: 0 0 10px !important;
padding-top: 4px !important;
}
.profile-avatar-wrap {
top: 10px !important;
left: 4px !important;
width: 118px !important;
height: 118px !important;
z-index: 4 !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 118px !important;
height: 118px !important;
}
.profile-avatar-ring {
padding: 4px !important;
box-shadow:
0 0 0 4px #eff6ff,
0 0 0 7px #0b6fdf !important;
}
.profile-hero-sheet {
width: calc(100% - 18px) !important;
min-height: 98px !important;
margin: 20px 0 0 54px !important;
padding: 16px 14px 14px 78px !important;
border-radius: 0 34px 34px 24px !important;
background: #eff6ff !important;
box-shadow: 0 14px 22px rgba(33, 53, 81, 0.1) !important;
}
.profile-hero-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
align-items: center !important;
min-height: 70px !important;
}
.profile-copy {
display: grid !important;
gap: 5px !important;
min-width: 0 !important;
padding: 0 !important;
}
.profile-hero-meta-label,
.profile-hero-side {
display: none !important;
}
.profile-name-value {
font-size: 22px !important;
line-height: 1 !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title-btn {
width: fit-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #8da0ba !important;
font-size: 14px !important;
line-height: 1.05 !important;
font-weight: 700 !important;
text-align: left !important;
justify-self: start !important;
box-shadow: none !important;
}
.profile-title-btn:active {
transform: none !important;
filter: none !important;
}
.profile-mini-btn {
position: static !important;
width: auto !important;
min-width: 116px !important;
min-height: 34px !important;
height: 34px !important;
padding: 0 16px !important;
border-radius: 999px !important;
font-size: 10.5px !important;
font-weight: 800 !important;
box-shadow: 0 5px 0 rgba(18, 76, 142, 0.16) !important;
}
.profile-id-chip--inline {
left: 74px !important;
top: 128px !important;
width: min(226px, calc(100% - 146px)) !important;
min-height: 24px !important;
height: 24px !important;
padding: 0 28px 0 76px !important;
border-radius: 0 13px 13px 13px !important;
background: linear-gradient(90deg, #1071e4 0%, #0a64d4 100%) !important;
z-index: 2 !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8.5px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 12px !important;
font-weight: 800 !important;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
width: 13px !important;
height: 13px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 92px !important;
padding: 10px 12px 10px 82px !important;
border-radius: 24px !important;
overflow: visible !important;
}
.profile-stat-icon-wrap {
top: 50% !important;
left: -16px !important;
width: 88px !important;
height: 88px !important;
transform: translateY(-50%) !important;
border-radius: 999px !important;
overflow: hidden !important;
clip-path: circle(50% at 50% 50%) !important;
background: transparent !important;
box-shadow: none !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -16px !important;
width: 88px !important;
height: 88px !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
}
.profile-stat-copy {
gap: 4px !important;
}
.profile-stat-label {
font-size: 17px !important;
line-height: 1.04 !important;
color: #8b919c !important;
}
.profile-stat-value {
font-size: 20px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.profile-links-shell {
margin-top: 10px !important;
gap: 8px !important;
}
.profile-links-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 !important;
align-items: stretch !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 48px !important;
padding: 0 6px !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.profile-links-content__label {
font-size: 11px !important;
white-space: nowrap !important;
}
.profile-links-content__state {
position: static !important;
min-width: 0 !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
color: #0a66db !important;
font-size: 11px !important;
line-height: 1 !important;
box-shadow: none !important;
}
.friends-page--v2 .empty-block,
.notif-page--v2 .empty-block {
padding: 24px 16px !important;
}
.empty-block__icon svg {
width: 34px !important;
height: 34px !important;
display: block !important;
color: #79a7e2 !important;
}
.friends-page--v2 [data-friends-action="referrals"] {
gap: 10px !important;
padding: 14px 16px !important;
}
.friends-action-row--referral {
grid-template-columns: minmax(0, 1fr) 48px !important;
gap: 8px !important;
}
.friends-ref-code {
min-width: 0 !important;
min-height: 48px !important;
justify-content: flex-start !important;
padding: 0 14px !important;
overflow: hidden !important;
}
.friends-ref-code__value {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.friends-ref-share-btn {
width: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
border-radius: 18px !important;
}
.friends-ref-option {
min-height: 42px !important;
padding: 0 12px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
}
.friends-ref-option__copy {
min-width: 0 !important;
font-size: 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.friends-ref-option__icon {
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
display: block !important;
}
#tour-filter-modal.overlay,
#friends-filter-modal.overlay,
#notif-filter-modal.overlay {
padding: 0 10px calc(max(var(--mini-safe-bottom), 12px) + 16px) !important;
align-items: flex-end !important;
justify-content: center !important;
}
.filters-modal {
width: min(calc(var(--mini-shell-width) - 28px), 360px) !important;
max-width: min(calc(var(--mini-shell-width) - 28px), 360px) !important;
margin: 0 auto !important;
padding: 16px 16px calc(max(var(--mini-safe-bottom), 12px) + 10px) !important;
border-radius: 30px !important;
background: rgba(255, 255, 255, 0.99) !important;
box-shadow: 0 20px 40px rgba(34, 53, 83, 0.18) !important;
}
.filters-modal__grab {
display: block !important;
width: 44px !important;
height: 5px !important;
margin: 0 auto 12px !important;
border-radius: 999px !important;
background: rgba(143, 165, 197, 0.75) !important;
}
.filters-close-btn {
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 14px !important;
background: #eef5ff !important;
border: 1px solid rgba(103, 144, 201, 0.16) !important;
color: #0a66db !important;
box-shadow: 0 5px 0 rgba(41, 54, 76, 0.1) !important;
}
.filters-close-btn__icon {
width: 14px !important;
height: 14px !important;
position: relative !important;
display: block !important;
}
.filters-close-btn__icon::before,
.filters-close-btn__icon::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 16px !important;
height: 2px !important;
background: currentColor !important;
border-radius: 999px !important;
transform-origin: center !important;
}
.filters-close-btn__icon::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.filters-close-btn__icon::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.filters-modal .actions {
margin-top: 16px !important;
padding-bottom: 0 !important;
}
.filters-modal .actions .btn {
min-height: 52px !important;
border-radius: 18px !important;
}
}
@media (max-width: 520px) {
.app-main.container {
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 118px) !important;
}
body[data-current-tab="profile"] .app-main.container {
padding-bottom: calc(max(var(--mini-safe-bottom), 12px) + 8px) !important;
}
.menubar {
bottom: calc(max(var(--mini-safe-bottom), 12px) + 12px) !important;
padding: 6px 12px calc(max(var(--mini-safe-bottom), 12px) + 8px) !important;
}
.top-icon-btn,
.menu-btn,
.seg-btn,
.sub-btn,
.btn,
.profile-mini-btn,
.profile-links-content__item,
.profile-links-content__item--support,
.notif-tab-side-action,
.filters-close-btn {
-webkit-tap-highlight-color: transparent !important;
}
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon *,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon * {
color: #ffffff !important;
fill: currentColor !important;
stroke: currentColor !important;
opacity: 1 !important;
}
.friends-page--v2 .seg-tab-copy,
.notif-page--v2 .seg-tab-copy,
.profile-links-seg .seg-tab-copy,
.tournaments-screen .seg-tab-copy,
.matches-screen .seg-tab-copy {
padding: 0 24px 0 10px !important;
gap: 6px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 6px !important;
right: 6px !important;
min-width: 18px !important;
height: 18px !important;
line-height: 18px !important;
font-size: 9px !important;
}
.notif-tab-side-action,
.notif-tab-side-action__count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.notif-tab-side-action {
top: 6px !important;
right: 6px !important;
min-width: 18px !important;
width: 18px !important;
height: 18px !important;
line-height: 18px !important;
}
.notif-tab-side-action__count {
width: 100% !important;
}
.notif-tab-side-action__icon {
width: 10px !important;
height: 10px !important;
}
.notif-tab-side-action[data-notif-side-mode="zero"] .notif-tab-side-action__count {
display: inline-flex !important;
}
.profile-card.screen-card--gradient {
padding: 14px 10px 12px !important;
}
.profile-hero {
min-height: 162px !important;
margin: 0 0 10px !important;
padding-top: 0 !important;
}
.profile-avatar-wrap {
top: 8px !important;
left: 2px !important;
width: 122px !important;
height: 122px !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 122px !important;
height: 122px !important;
}
.profile-hero-sheet {
width: calc(100% - 30px) !important;
min-height: 100px !important;
margin: 18px 0 0 66px !important;
padding: 12px 14px 12px 82px !important;
border-radius: 0 34px 34px 22px !important;
}
.profile-hero-main {
min-height: 74px !important;
gap: 8px !important;
}
.profile-name-value {
font-size: 24px !important;
line-height: 1.02 !important;
}
.profile-title-btn {
font-size: 15px !important;
color: #7d90aa !important;
}
.profile-mini-btn {
min-width: 108px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 14px !important;
font-size: 10.5px !important;
}
.profile-id-chip--inline {
left: 64px !important;
top: 132px !important;
width: min(244px, calc(100% - 128px)) !important;
min-height: 22px !important;
height: 22px !important;
padding: 0 26px 0 80px !important;
border-radius: 0 12px 12px 12px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 8px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 11.5px !important;
letter-spacing: 0.01em !important;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
width: 12px !important;
height: 12px !important;
}
.profile-stats-grid {
gap: 8px !important;
}
.profile-stat-card {
min-height: 90px !important;
padding: 8px 12px 8px 84px !important;
border-radius: 26px !important;
}
.profile-stat-icon-wrap {
left: -20px !important;
width: 92px !important;
height: 92px !important;
}
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -20px !important;
width: 92px !important;
height: 92px !important;
}
.profile-stat-figma-icon {
object-fit: contain !important;
transform: scale(1.08) !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-2px, 0) scale(1.14) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(0, -1px) scale(1.15) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-2px, 1px) scale(1.12) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(-4px, 2px) scale(1.22) !important;
}
.profile-stat-copy {
gap: 6px !important;
}
.profile-stat-label {
font-size: 18px !important;
}
.profile-stat-value {
font-size: 22px !important;
}
.profile-links-shell {
margin-top: 6px !important;
}
.profile-links-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.profile-links-content__item,
.profile-links-content__item--support {
min-height: 44px !important;
padding: 0 8px !important;
}
.profile-links-content__icon {
width: 16px !important;
height: 16px !important;
}
.profile-links-content__label,
.profile-links-content__state {
font-size: 10.5px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.friends-page--v2 [data-friends-action="referrals"] {
padding: 12px 14px !important;
gap: 8px !important;
}
.friends-action-row--referral {
grid-template-columns: minmax(0, 1fr) 44px !important;
gap: 6px !important;
}
.friends-ref-code {
min-height: 44px !important;
border-radius: 16px !important;
padding: 0 12px !important;
}
.friends-ref-code__prefix {
font-size: 11px !important;
}
.friends-ref-code__value {
font-size: 13px !important;
}
.friends-ref-share-btn {
width: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 16px !important;
}
.friends-ref-share-btn__icon {
width: 18px !important;
height: 18px !important;
}
.friends-ref-option {
min-height: 38px !important;
padding: 0 10px !important;
border-radius: 16px !important;
}
.friends-ref-option__copy {
font-size: 11px !important;
}
.friends-ref-option__track {
width: 34px !important;
height: 20px !important;
}
.friends-ref-option__thumb {
width: 14px !important;
height: 14px !important;
}
.friends-ref-option__toggle input:checked + .friends-ref-option__track .friends-ref-option__thumb {
transform: translateX(14px) !important;
}
#tour-filter-modal.overlay,
#friends-filter-modal.overlay,
#notif-filter-modal.overlay {
padding: 0 12px calc(max(var(--mini-safe-bottom), 12px) + 18px) !important;
}
.filters-modal {
width: min(calc(var(--mini-shell-width) - 48px), 336px) !important;
max-width: min(calc(var(--mini-shell-width) - 48px), 336px) !important;
padding: 14px 14px calc(max(var(--mini-safe-bottom), 12px) + 8px) !important;
border-radius: 28px !important;
}
.filters-header {
align-items: flex-start !important;
margin-bottom: 16px !important;
}
.filters-title-wrap {
gap: 4px !important;
}
.filters-title-wrap h2 {
font-size: 32px !important;
line-height: 0.94 !important;
}
.filters-kicker {
font-size: 11px !important;
letter-spacing: 0.16em !important;
}
.filter-scroll-row {
gap: 10px !important;
}
.filter-scroll-row .seg-btn {
min-width: 92px !important;
min-height: 48px !important;
padding: 0 12px !important;
border-radius: 18px !important;
font-size: 15px !important;
}
.filters-close-btn {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
color: #0a66db !important;
}
.filters-close-btn__icon {
width: 16px !important;
height: 16px !important;
}
.filters-modal .actions {
margin-top: 14px !important;
}
.filters-modal .actions .btn {
min-height: 50px !important;
font-size: 15px !important;
}
}
@media (max-width: 520px) {
.friends-page--v2 .subtabs.seg > .seg-btn .seg-tab-copy,
.notif-page--v2 .subtabs.seg > .seg-btn .seg-tab-copy {
padding-right: 30px !important;
}
.friends-page--v2 .friends-tab-badge {
top: 5px !important;
right: 8px !important;
min-width: 18px !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
font-size: 9px !important;
}
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg path,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg circle,
.notif-page--v2 .notif-subtabs .seg-btn.active .notif-tab-icon svg rect,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon path,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon circle,
.profile-links-seg > .seg-btn.active .profile-links-seg__icon rect {
color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
opacity: 1 !important;
}
.profile-card.screen-card--gradient {
padding: 10px 8px 10px !important;
}
.profile-hero {
min-height: 138px !important;
margin: 0 0 8px !important;
padding-top: 0 !important;
}
.profile-avatar-wrap {
top: 18px !important;
left: 2px !important;
width: 108px !important;
height: 108px !important;
}
.profile-avatar-ring,
.profile-avatar-ring .avatar-img {
width: 108px !important;
height: 108px !important;
}
.profile-avatar-ring {
background: #0b6fdf !important;
box-shadow: 0 0 0 4px #eff6ff, 0 0 0 7px #0b6fdf !important;
}
.profile-hero-sheet {
width: calc(100% - 20px) !important;
min-height: 82px !important;
margin: 20px 0 0 44px !important;
padding: 10px 12px 10px 78px !important;
border-radius: 0 28px 28px 16px !important;
}
.profile-hero-main {
min-height: 62px !important;
gap: 6px !important;
}
.profile-copy {
gap: 2px !important;
padding-top: 6px !important;
padding-right: 106px !important;
}
.profile-name-value {
font-size: 22px !important;
line-height: 1.02 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.profile-title-btn {
font-size: 13px !important;
line-height: 1.05 !important;
color: #7d90aa !important;
}
.profile-mini-btn {
min-width: 102px !important;
width: 102px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 12px !important;
font-size: 10px !important;
right: 0 !important;
bottom: 2px !important;
}
.profile-id-chip--inline {
left: 54px !important;
top: 112px !important;
width: min(200px, calc(100% - 148px)) !important;
min-height: 18px !important;
height: 18px !important;
padding: 0 24px 0 12px !important;
border-radius: 0 10px 10px 10px !important;
}
.profile-id-chip--inline .profile-id-chip-label {
font-size: 7px !important;
}
.profile-id-chip--inline .profile-id-chip-value {
font-size: 10.5px !important;
letter-spacing: 0.01em !important;
}
.profile-id-chip--inline .icon-id {
right: 8px !important;
width: 11px !important;
height: 11px !important;
}
.profile-stats-grid {
gap: 6px !important;
}
.profile-stat-card {
min-height: 84px !important;
padding: 8px 12px 8px 72px !important;
border-radius: 24px !important;
}
.profile-stat-icon-wrap,
.profile-stat-card:nth-child(1) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(2) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(3) .profile-stat-icon-wrap,
.profile-stat-card:nth-child(4) .profile-stat-icon-wrap {
left: -14px !important;
width: 78px !important;
height: 78px !important;
top: 50% !important;
transform: translateY(-50%) !important;
overflow: hidden !important;
clip-path: circle(50% at 50% 50%) !important;
}
.profile-stat-figma-icon {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: scale(1.04) !important;
}
.profile-stat-card:nth-child(1) .profile-stat-figma-icon {
transform: translate(-3px, 0) scale(1.1) !important;
}
.profile-stat-card:nth-child(2) .profile-stat-figma-icon {
transform: translate(1px, -1px) scale(1.12) !important;
}
.profile-stat-card:nth-child(3) .profile-stat-figma-icon {
transform: translate(-2px, 1px) scale(1.08) !important;
}
.profile-stat-card:nth-child(4) .profile-stat-figma-icon {
transform: translate(2px, 0) scale(1.12) !important;
}
.profile-stat-copy {
gap: 4px !important;
}
.profile-stat-label {
font-size: 15px !important;
line-height: 1.04 !important;
}
.profile-stat-value {
font-size: 20px !important;
}
.profile-links-shell {
margin-top: 4px !important;
}
}