@font-face {
    font-family: font1;
    src: url("./uploads/font/AABebasNeue.ttf");
}

@font-face {
    font-family: font2;
    src: url("./uploads/font/GHEAGpalatBld.otf");
}

@font-face {
    font-family: font3;
    src: url("./uploads/font/proximanova_regular.ttf");
}

@font-face {
    font-family: font4;
    src: url("./uploads/font/Sakana.ttf");
}

@font-face {
    font-family: font5;
    src: url("./uploads/font/FontdinerSwanky-Regular.ttf");
}

@font-face {
    font-family: font6;
    src: url("./uploads/font/LilitaOne-Regular.ttf");
}

@font-face {
    font-family: font7;
    src: url("./uploads/font/Chalk-Board.ttf");
}

@font-face {
    font-family: font8;
    src: url("./uploads/font/Adamathuz_Bold.ttf");
}

@font-face {
    font-family: font9;
    src: url("./uploads/font/Mirage-Expanded.otf");
}


@font-face {
    font-family: font10;
    src: url("./uploads/font/Arm_Hmk_Bebas_Neue.TTF");
}




:root {
    --bg0: #F6F8FF;
    --bg1: #EEF2FF;
    --card: rgba(255, 255, 255, .72);
    --card2: rgba(255, 255, 255, .62);
    --line: rgba(15, 23, 42, .08);
    --text: #0F172A;
    --muted: rgba(15, 23, 42, .55);

    --primary: #2F66FF;
    --primary2: #1E4FFF;

    --shadow: 0 24px 70px rgba(15, 23, 42, .10);
    --shadow2: 0 14px 28px rgba(15, 23, 42, .10);

    --r14: 14px;
    --r18: 18px;
    --r22: 22px;
    --r28: 28px;

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
    --font1: font1;
    --font2: font2;
    --font3: font3;
    --font4: font4;
    --font5: font5;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font3);
    color: #fff;
    overflow-x: hidden;
    background: #06351e;
}

/* фон-картинка на весь экран */
.bg {
    position: fixed;
    top: -2px;
    right: 0;
    bottom: -2px;
    left: 0;
    z-index: -1;
    pointer-events: none;

    /* background: linear-gradient(135deg, #59595980 0%, #521111 35%, #903030 65%, #641111 100%); */
    /* background: linear-gradient(135deg, #59595980 0%, #1d83c2 35%, #1b8395 65%, #0c2d3e 100%);
    background-color: #1a252c; 
  
  /* Комбинируем несколько слоев градиента для эффекта глубины */
    background-image: url("./uploads/img/green-textile-texture_23-2147729348.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* backdrop-filter: blur(10px); */
    filter: blur(4px);

    min-height: 100vh;
    min-height: 100dvh;
}

/* чуть затемнить чтобы UI читался */
.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    /* можно 0.15..0.35 */
}

.app {
    max-width: 1220px;
    margin: 0 auto;
    padding: 22px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    position: relative;
    z-index: 1;
}

.avatarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 29%;
    display: block;
}

.avatarLetter {
    width: 100%;
    height: 100%;
    border-radius: 29%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffbf00;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey;  */
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #9f9f9f;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #9f9f9f;
}

/* topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 83px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    display: flex;
    margin-left: 45px;
    /* place-items: center; */
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.116), rgba(255, 255, 255, 0.178)); */
    /* border: 1px solid rgba(15, 23, 42, .08); */
    /* box-shadow: var(--shadow2); */
}

.sigma {
    font-weight: 900;
    color: #2F66FF;
}

.brandTitle {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
}

.brandSub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.topActions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-right: 49px;
}

.topLoginBtn {
    position: relative;
    overflow: hidden;
    min-width: 176px;
    min-height: 58px;
    padding: 15px 30px;
    border: 1px solid rgba(255, 243, 130, .86);
    border-radius: 20px;
    background: linear-gradient(135deg, #fff06a 0%, #ffbf1f 38%, #ff7a00 100%);
    color: #2a1200;
    box-shadow: 0 16px 36px rgba(255, 150, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .42);
    font-family: 'font10';
    font-size: 28px;
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
    font-style: normal;
    text-transform: uppercase;
}

.topLoginBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .42) 48%, transparent 72%);
    transform: translateX(-130%);
    transition: transform .45s ease;
}

.topLoginBtn:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05) saturate(1.08);
    box-shadow: 0 20px 44px rgba(255, 145, 0, .42), 0 0 20px rgba(255, 220, 96, .24);
}

.topLoginBtn:hover::before {
    transform: translateX(130%);
}

.topLoginBtn:active {
    transform: translateY(0) scale(.99);
}

@media (max-width: 560px) {
    .topbar {
        gap: 12px;
    }

    .topActions {
        gap: 8px;
        margin-right: 0;
    }

    .topLoginBtn {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        border-radius: 15px;
        font-size: 0;
        letter-spacing: 0;
        color: transparent;
        text-indent: -9999px;
        white-space: nowrap;
        overflow: hidden;
        text-shadow: none;
        box-shadow: 0 12px 24px rgba(255, 145, 0, .30);
    }

    .topLoginBtn::before {
        display: none;
    }

    .topLoginBtn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translate(-50%, -50%);
        background: #fff;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-6 0V6a2 2 0 1 1 4 0v2h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-6 0V6a2 2 0 1 1 4 0v2h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* card */
.card {
    /* background: linear-gradient(180deg, #0024e817, var(--card2)); */
    /* background: linear-gradient(180deg, #ff572200, rgb(145 145 145 / 8%)); */
    border: 1px solid var(--line);
    border-radius: var(--r28);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background:
        radial-gradient(800px 280px at 10% 0%, rgba(47, 102, 255, .10), transparent 55%),
        radial-gradient(700px 260px at 90% 15%, rgba(98, 112, 255, .08), transparent 55%); */
    opacity: .85;
    pointer-events: none;
}

.card>* {
    position: relative;
    z-index: 1;
}

.cardTitle {
    font-size: 45px;
    font-weight: 800;
    font-family: font1;
    font-style: italic;
    letter-spacing: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cardTitlebox2 {
    font-size: 36px;
    font-weight: 800;
    font-family: font1;
    font-style: italic;
    letter-spacing: 4px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 8px;
}


.cardSub {
    margin-top: 6px;
    font-size: 13px;
    color: rgb(255 255 255 / 55%);
    line-height: 1.45;
}

.muted {
    color: rgb(255 255 255);
}

.small {
    font-size: 12px;
}

.hr {
    height: 1px;
    background: rgb(255 255 255 / 7%);
    margin: 14px 0;
    border-radius: 99px;
}

/* buttons */
.btn {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 16px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    background: rgba(255, 255, 255, .78);
    color: #fff;
    box-shadow: var(--shadow2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    font-family: font1;
    letter-spacing: 2px;
    font-size: 25px;
    font-style: italic;
}

.btn:hover {
    filter: brightness(1.02);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.btn:active {
    transform: scale(.99);
}

.btn.primary {
    border-color: transparent;
    /* background: linear-gradient(135deg, var(--primary), var(--primary2)); */
    background: linear-gradient(156deg, #5c480d, #FFEB3B);
    /* background: #c06c2e; */
    color: #fff;
    box-shadow: 0 18px 50px rgba(47, 102, 255, .18);
}

.btn.ghost {
    background: #7373744a;
}

.btn.big {
    padding: 12px 16px;
}

.btn.sm {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-family: 'font10';
}

.ico {
    font-weight: 900;
    opacity: .9;
}

/* inputs */
.inp {
    width: 100%;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 16px;
    padding: 16px 26px;
    font-size: 18px;
    outline: none;
    background: rgb(98 30 31 / 16%);
    color: #ffffff;
    transition: box-shadow .12s ease, border-color .12s ease;
    letter-spacing: 5px;
    font-family: font1;
    font-style: italic;
}

.inp::placeholder {
    color: rgba(255, 255, 255, 0.753);
}

.inp:focus {
    border-color: rgba(255, 222, 34, 0.534);
    box-shadow: 0 0 0 5px rgba(255, 222, 34, 0.185);
}

.bigInp {
    font-size: 18px;
    padding: 14px 14px;
}

/* hints */
.hint {
    min-height: 18px;
    font-weight: 800;
    font-size: 13px;
}

.hint.ok {
    color: #16A34A;
}

.hint.bad {
    color: #DC2626;
}

/* pills */
.pill {
    /* width: 55px; */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 1px 4px;
    border-radius: 999px;
    /* border: 1px solid rgb(189 22 255); */
    background: rgba(255, 255, 255, .74);
    color: rgba(15, 23, 42, .78);
    font-size: 20px;
    font-family: 'font5';
    font-weight: 800;
    letter-spacing: 2px;
    transform: skew(0deg, -3deg);
}

.pill.soft {
    background: rgb(167 26 222);
    color: #fff;
}

/* views */
.view {
    width: 100%;
}

/* login grid */
.gridLogin {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 980px) {
    .gridLogin {
        grid-template-columns: 1fr;
    }
}

.hero h1 {
    margin: 12px 0 8px;
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.2px;
    font-weight: 900;
}

.hero p {
    margin: 0;
    max-width: 62ch;
}

.heroTiles {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 560px) {
    .heroTiles {
        grid-template-columns: 1fr;
    }
}

.tile {
    height: 300px;
    border-radius: var(--r22);
    border: 1px solid rgb(106 24 138 / 61%);
    background: rgba(0, 0, 0, 0.6);
    padding: 12px;
    background-image: url(./uploads/img/ads_img/a3.png);
    background-size: cover;
    background-position: center;
    filter: saturate(1.3);
}

.tileK {
    position: absolute;
    bottom: 21px;
    left: 19px;
    padding: 4px 9px;
    font-size: 27px;
    border-radius: 9px;
    color: #ffffff;
    font-weight: 800;
    font-family: font6;
    background-color: #a71ade;
}

.tileV {
    margin-top: 4px;
    font-weight: 900;
}

.auth .form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lbl {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    font-weight: 800;
}

.row {
    display: flex;
    gap: 10px;
}

.row .btn {
    flex: 1;
}

/* lobby layout */
.layout {
    display: block;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1020px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

.col {
    height: 100px;
    display: flex;
    flex-direction: column;
}

.profileTop {
    display: flex;
    gap: 12px;
    align-items: center;
}

.avatar {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .85);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profileMeta {
    min-width: 0;
}

.nameRow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.name {
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 18px;
}

.kv {
    display: flex;
    gap: 10px;
    margin: 17px;
}

.kvRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: transparent;
    gap: 24px;
}

.kvK {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(255 255 255);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: font5;
}

.kvV {
    font-weight: 900;
}

.pillRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.playRow {
    display: flex;
    gap: 10px;
}

.playRow .btn {
    flex: 1;
}

/* queue line */
.queueLine {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(15, 23, 42, .76);
    font-weight: 900;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--primary2), var(--primary));
    box-shadow: 0 0 0 6px rgba(47, 102, 255, .10);
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: .78;
    }
}

/* rules */
.rules {
    margin: 10px 0 0;
    padding-left: 23px;
    color: rgb(255 255 255 / 55%);
    font-weight: 800;
    font-size: 13px;
}

.rules li {
    margin: 6px 0;
}

/* board */
.boardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* top3 + table */
.top3 {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 820px) {
    .top3 {
        grid-template-columns: 1fr;
    }
}

.podium {
    border-radius: 22px;
    /* border: 1px solid rgba(15, 23, 42, .08); */
    background: rgb(144 210 9);
    padding: 14px;
    box-shadow: var(--shadow2);
}



.podiumTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.rankTag {
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    /* background: rgba(255, 255, 255, .85); */
    background: #8BC34A;
    border: 1px solid rgba(15, 23, 42, .08);
    font-family: var(--font5);
}

.podiumName {
    margin-top: 10px;
    font-weight: 900;
    font-size: 33px;
}

.podiumMeta {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.table {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.tr {
    display: grid;
    grid-template-columns: 56px 1fr 90px 120px 90px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgb(0 0 0 / 6%);
}

@media (max-width: 820px) {
    .tr {
        grid-template-columns: 44px 1fr 80px 90px 70px;
    }
}

.bold {
    font-weight: 900;
}

.cellUser {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.a24 {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .85);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.a24 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* shop */
.shopGrid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 980px) {
    .shopGrid {
        grid-template-columns: 1fr;
    }
}

.pack {
    border-radius: 22px;
    /* border: 1px solid rgba(15, 23, 42, .08); */
    /* background: rgba(255, 255, 255, .62); */
    padding: 20px;
    align-items: center;
    box-shadow: var(--shadow2);
    height: 290px;
    background-image: url("./uploads/img/Frame16.png");
    background-color: #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pack .t {
    font-weight: 900;
}

.pack .p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.pack .right {
    justify-content: center;
    align-items: center;
    gap: 97px;
    position: absolute;
    bottom: 16px;
}

.pack .price {
    font-weight: 900;
}

/* game */
.gameTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.metaLine {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rightLine {
    display: flex;
    gap: 10px;
    align-items: center;
}

.gameGrid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 980px) {
    .gameGrid {
        grid-template-columns: 1fr;
    }
}

.players {
    margin-top: 12px;
}

.pcard {
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #161616;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
}

.pLeft {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pName {
    width: auto;
    font-weight: 900;
}

.pMeta {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.taskBox {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    /* background: rgba(255, 255, 255, .62); */
    padding: 9px;
    text-align: center;
    box-shadow: var(--shadow2);
    background-image: url("./uploads/img/empty-blackboard.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.taskText {
    margin-top: 45px;
    font-weight: 1000;
    font-size: 60px;
    letter-spacing: .4px;
    color: #ffffff;
    font-family: font7;
    display: block;
    text-align: center;
}

.answerRow {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.answerRow .inp {
    flex: 1;
}

@media (max-width: 560px) {
    .answerRow {
        flex-direction: column;
        align-items: stretch;
    }

    .answerRow .btn {
        width: 100%;
    }
}

.footer {
    padding: 2px;
}



.taskHead {
    display: block;
    /* align-items: center; */
    /* justify-content: space-between; */
    /* gap: 16px; */
}

.timerBox {
    min-width: 41px;
    text-align: right;
}

.timerVal {
    font-family: font7;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 3.5px;
}

.choices {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.choiceBtn {
    padding: 20px 15px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    /* background: rgba(255, 255, 255, .7); */
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    cursor: pointer;
    font-weight: 1000;
    font-size: 35px;
    font-family: 'font7';
    background-image: url(./uploads/img/ans-bg.jpg);
    background-size: cover;
    background-position: center;
    transform: skew(0deg, -2deg);
    color: #a71ade;
}

.choiceBtn:hover {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .choices {
        grid-template-columns: repeat(2, 1fr);
    }
}




.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9999;

    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(18, 18, 24, .88);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);

    font-weight: 800;
    letter-spacing: .2px;
    max-width: min(520px, calc(100vw - 24px));
    text-align: center;
}

.toast.ok {
    border-color: rgba(130, 255, 170, .25);
}

.toast.bad {
    border-color: rgba(255, 120, 120, .25);
}


.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    font-weight: 700;
    z-index: 9999;
}








.modalBack {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.modalCard {
    width: min(520px, 92vw);
    border-radius: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    border: 1px solid rgba(15, 23, 42, .10);
}

.modalTitle {
    font-size: 26px;
    font-weight: 900;
}

.modalSub {
    margin-top: 6px;
    opacity: .75;
}

.modalStats {
    margin-top: 14px;
    border-radius: 18px;
    padding: 12px;
    background: rgba(15, 23, 42, .04);
}

.msRow {
    display: flex;
    justify-content: space-between;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.msRow:last-child {
    border-bottom: 0;
}

.modalBtns {
    margin-top: 14px;
    display: flex;
    gap: 10px;
}



.appShell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}



.scorePop {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 5;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(20, 22, 30, 0.55);
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-10px) scale(.98);
    opacity: 0;
    pointer-events: none;
    font-weight: 700;
}

.scorePop .who {
    font-weight: 800;
    opacity: .95;
}

.scorePop .plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(46, 204, 113, .18);
    color: #8affb0;
    font-weight: 900;
}

.scorePop.show {
    animation: scorePopIn 1.25s ease forwards;
}

@keyframes scorePopIn {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(.98);
        filter: blur(2px);
    }

    12% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    75% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(6px) scale(.99);
    }
}



.xpProg {
    margin-top: 0px;
}

.xpTop {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.xpBar {
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-top: 6px;
}

.xpFill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(35, 114, 255, 0.95), rgba(120, 170, 255, 0.95));
    transition: width .35s ease;
}



.modalBack {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(8px);
    z-index: 9999;
    padding: 18px;
}

.modalCard {
    width: 600px;
    background: rgb(0 0 0 / 30%);
    border: 1px solid rgb(190 143 0 / 26%);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgb(255 255 255 / 9%);
    padding: 18px;
}




#pointToast.toast {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(20, 25, 40, 0.88);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    animation: toastPop .22s ease;
}

@keyframes toastPop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}







.pack {
    position: relative;
    border-radius: 22px;
    /* border: 1px solid rgba(15, 23, 42, .08); */
    overflow: hidden;
    box-shadow: var(--shadow2);

    /* фикс высоты карточки */
    min-height: 170px;

    /* background-image: url("./uploads/img/Frame16.png"); */
    /* background-color: #cccccc; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* затемнение/контраст сверху, чтобы текст читался */
.pack::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.123));
    pointer-events: none;
}

/* текст и кнопки поверх */
.packTitle,
.packBottom {
    position: relative;
    z-index: 1;
}

.packTitle {
    position: absolute;
    left: 14px;
    top: 12px;
    font-weight: 900;
    font-size: 14px;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.packBottom {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.packPrice {
    font-weight: 900;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.packBtn {
    padding: 10px 14px;
    border-radius: 14px;
    white-space: nowrap;
}


.pack .t {
    font-size: 28px;
    letter-spacing: 4px;
    font-family: var(--font5);
    -webkit-text-stroke: .1px #ffffff;
    color: transparent;
}


.packBottom {
    justify-content: space-between;
}

.packBtn {
    margin-left: auto;
    /* важное */
}

.packPrice {
    margin-right: auto;
    /* можно, чтобы точно держалось слева */
}

.price {
    font-size: 23px;
    font-family: font5;
    letter-spacing: 3px;
}

.packBottom {
    display: flex;
}

.packBottom .right {
    margin-left: auto;
}

/* МОБИЛА: не даём карточке стать “высокой/узкой кашей” */
@media (max-width: 560px) {
    .pack {
        min-height: 140px;
        border-radius: 20px;
        position: relative;
    }

    .packTitle {
        font-size: 13px;
        left: 12px;
        top: 10px;
    }

    .packBottom {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .packBtn {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .pack .right {
        position: absolute;
        right: 14px;
        bottom: 14px;

        display: flex;
        justify-content: flex-end;
        /* или просто убрать */
        align-items: center;
        gap: 10px;
    }
}















/* ===== TOP-3 PODIUM (NO HTML CHANGES) ===== */
.top3 {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 820px) {
    .top3 {
        grid-template-columns: 1fr;
    }
}

/* base card */
.podium {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14);

    /* glass on your dark bg */
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .25);
}

/* glow + texture */
.podium::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(180px 120px at 18% 18%, rgba(255, 255, 255, .16), transparent 70%),
        radial-gradient(260px 160px at 82% 28%, rgba(255, 255, 255, .10), transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .18));
    opacity: .95;
    pointer-events: none;
}

.podium::after {
    /* big faded icon */
    content: "";
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 44px;
    opacity: .16;
    transform: rotate(-10deg);
    pointer-events: none;
}

/* header row */
.podiumTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 2;
}

/* rank chip */
.rankTag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 950;
    letter-spacing: .2px;
    color: #0b1220;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

/* level pill (your .badge used here) */
.podium .badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 900;
    color: rgba(255, 255, 255, .92);
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .18);
}

/* name/meta */
.podiumName {
    margin-top: 10px;
    font-weight: 950;
    font-family: 'font1';
    letter-spacing: 3px;
    font-style: italic;
    font-size: 33px;
    color: rgb(255 255 255);
    text-shadow: 0 10px 25px rgba(0, 0, 0, .25);
    position: relative;
    z-index: 2;
}

.podiumMeta {
    margin-top: 4px;
    font-size: 12px;
    font-family: 'font1';
    letter-spacing: 2px;
    font-style: italic;
    font-weight: 850;
    color: rgba(255, 255, 255, .70);
    position: relative;
    z-index: 2;
}

/* ===== variants ===== */

/* GOLD */
.podium.gold .rankTag {
    background: linear-gradient(180deg, #FFD56A, #F4B63A);
}

.podium.gold {
    box-shadow: 0 1px 42px rgb(244 182 58 / 44%), 0 18px 55px rgb(0 0 0 / 0%);
}

.podium.gold::after {
    content: "🏆";
}

/* SILVER */
.podium.silver .rankTag {
    background: linear-gradient(180deg, #E7EEF8, #BFCBDD);
}

.podium.silver {
    box-shadow: 0 18px 60px rgba(191, 203, 221, .10), 0 18px 55px rgba(0, 0, 0, .25);
}

.podium.silver::after {
    content: "🥈";
}

/* BRONZE */
.podium.bronze .rankTag {
    background: linear-gradient(180deg, #E5A07A, #B96B46);
}

.podium.bronze {
    box-shadow: 0 18px 60px rgba(185, 107, 70, .12), 0 18px 55px rgba(0, 0, 0, .25);
}

.podium.bronze::after {
    content: "🥉";
}















/* ===== TOP TABLE (NO HTML CHANGES) ===== */

.table {
    gap: 10px;
}

/* row */
.tr {
    position: relative;
    border-radius: 18px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);

    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

/* soft shine */
.tr::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(220px 90px at 12% 20%, rgba(255, 255, 255, .12), transparent 70%),
        radial-gradient(260px 110px at 88% 50%, rgba(255, 255, 255, .08), transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .14));
    opacity: .9;
    pointer-events: none;
}

.tr>* {
    position: relative;
    z-index: 2;
}

/* hover */
.tr:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

/* rank number (1..30) */
.tr>.bold:first-child {
    opacity: .95;
    font-weight: 950;
    color: rgba(255, 255, 255, .92);
}

/* user cell */
.cellUser {
    gap: 12px;
}

.cellUser .bold {
    color: rgba(255, 255, 255, .92);
    letter-spacing: .2px;
}

/* avatar */
.a24 {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .18);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .20);
}

.a24 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* columns (LV / XP / W) */
.tr .bold {
    color: rgba(255, 255, 255, .88);
}

/* special: first row highlight (idx 0 has class th in your JS) */
.tr.th {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .20);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .26);
}

.tr.th::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(320px 120px at 20% 50%, rgba(255, 215, 106, .18), transparent 70%);
    pointer-events: none;
}

/* mobile tweak */
@media (max-width: 820px) {
    .tr {
        padding: 11px 12px;
        border-radius: 16px;
    }

    .a24 {
        width: 30px;
        height: 30px;
        border-radius: 11px;
    }
}
















/* ===== ICONS FOR TABLE (NO HTML) ===== */

/* 1) Rank icon near number */
.table .tr>.bold:first-child {
    position: relative;
    padding-left: 26px;
    /* место под иконку */
}

.table .tr>.bold:first-child::before {
    content: "🏁";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: .9;
}

/* 2) Column icons: LV / XP / W (target by grid index)
   grid columns: [1]=rank, [2]=user, [3]=LV, [4]=XP, [5]=W */
.table .tr>.bold:nth-child(3),
.table .tr>.bold:nth-child(4),
.table .tr>.bold:nth-child(5) {
    position: relative;
    padding-left: 22px;
    text-align: left;
    /* чтобы иконка + текст были ровно */
}

.table .tr>.bold:nth-child(3)::before {
    content: "🎮";
}

/* LV */
.table .tr>.bold:nth-child(4)::before {
    content: "⚡";
}

/* XP */
.table .tr>.bold:nth-child(5)::before {
    content: "🏆";
}

/* Wins */

.table .tr>.bold:nth-child(3)::before,
.table .tr>.bold:nth-child(4)::before,
.table .tr>.bold:nth-child(5)::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: .95;
}

/* 3) medals for top 3 rows (works because rows are .tr inside .table) */
.table .tr:nth-child(1)>.bold:first-child::before {
    content: "🥇";
}

.table .tr:nth-child(2)>.bold:first-child::before {
    content: "🥈";
}

.table .tr:nth-child(3)>.bold:first-child::before {
    content: "🥉";
}

/* tiny polish */
.table .tr:nth-child(1),
.table .tr:nth-child(2),
.table .tr:nth-child(3) {
    border-color: rgba(255, 255, 255, .18);
}



/* ===== MOBILE FIX: leaderboard rows ===== */
@media (max-width: 520px) {

    /* делаем таблицу компактнее */
    .tr {
        grid-template-columns: 34px 1fr 64px 74px 54px;
        /* rank | user | LV | XP | W */
        gap: 8px;
        padding: 10px 10px;
    }

    /* имя не должно лезть на LV */
    .cellUser {
        min-width: 0;
        /* важно для ellipsis */
        overflow: hidden;
    }

    .cellUser .bold {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        /* обрезаем длинные имена */
        white-space: nowrap;
    }

    /* аватар меньше */
    .a24 {
        width: 24px;
        height: 24px;
        border-radius: 9px;
    }

    /* колонки LV/XP/W делаем короче и выравниваем */
    .tr>.bold:nth-child(3),
    .tr>.bold:nth-child(4),
    .tr>.bold:nth-child(5) {
        font-size: 12px;
        padding-left: 16px;
        /* меньше место под иконку */
    }

    /* иконки меньше + чуть прозрачнее */
    .tr>.bold:nth-child(3)::before,
    .tr>.bold:nth-child(4)::before,
    .tr>.bold:nth-child(5)::before {
        font-size: 12px;
        opacity: .85;
    }

    /* ранг тоже компактнее */
    .table .tr>.bold:first-child {
        padding-left: 18px;
    }

    .table .tr>.bold:first-child::before {
        left: 2px;
        font-size: 12px;
    }
}








/* ===== PROFILE CARD UPGRADE (no HTML changes) ===== */

.profileCard {
    padding: 18px;
    overflow: hidden;
    display: flex;
    /* gap: 75px; */
    align-items: center;
    justify-content: center;
}

/* мягкое свечение внутри */
.profileCard::after {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(520px 240px at 20% 10%, rgba(47, 102, 255, .18), transparent 55%),
        radial-gradient(520px 240px at 85% 25%, rgba(255, 170, 70, .14), transparent 60%),
        radial-gradient(520px 300px at 50% 120%, rgba(70, 255, 190, .10), transparent 60%);
    opacity: .85;
    pointer-events: none;
    filter: blur(0px);
}

/* шапка */
.profileTop {
    gap: 14px;
}

.nameRow {
    gap: 10px;
}

.name {
    font-size: 19px;
    letter-spacing: .2px;
}

/* аватар: стекло + лёгкий shine */
.avatar {
    position: relative;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.avatar::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(120deg, transparent 35%, rgb(255 255 255 / 57%), transparent 65%);
    transform: translateX(-40%) rotate(15deg);
    animation: avatarShine 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes avatarShine {
    0% {
        transform: translateX(-55%) rotate(15deg);
        opacity: .0;
    }

    15% {
        opacity: .9;
    }

    45% {
        opacity: .0;
    }

    100% {
        transform: translateX(65%) rotate(15deg);
        opacity: 0;
    }
}

/* кв строки: чуть объёма + hover */
.kvRow {
    position: relative;
    overflow: hidden;
    /* background: #5e1b78; */
    background: #ececec1a;
    /* background: linear-gradient(180deg, #fb5522bf 0%, #c97e48 50%, #fc562266 100%); */
    border: 1px solid rgb(105 101 100 / 44%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}



/* иконка слева чуть ярче */
.kvK .ico {
    opacity: .95;
}

/* chips число — “живее” */
#meChips {
    font-size: 26px;
    letter-spacing: 1px;
    font-family: font5;
}

/* XP прогресс — красивее */
.xpProg {
    width: 100%;
}

.xpTop {
    opacity: .92;
}

.xpBar {
    position: relative;
    height: 26px;
    border-radius: 999px;
    background: rgb(40 136 250 / 18%);
    border: 1px solid rgb(255 255 255 / 5%);
    overflow: hidden;
}

.xpFill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(65, 145, 255, .95), rgba(140, 195, 255, .95));
    box-shadow: 0 0 0 4px rgba(47, 102, 255, .10);
}

.xpFill::after {
    /* бегущая полоска */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    width: 55%;
    transform: translateX(-80%);
    animation: xpShine 1.6s ease-in-out infinite;
    opacity: .65;
}

@keyframes xpShine {
    0% {
        transform: translateX(-80%);
    }

    100% {
        transform: translateX(220%);
    }
}

/* Плашки “ставка/до” */
.pillRow .pill {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
}

/* Play row — кнопки ровнее, без прыжков */
.playRow {
    gap: 10px;
    align-items: stretch;
}

.dailyBox {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* кнопки: чуть больше “игрового” характера */
#btnPlay {
    position: relative;
    overflow: hidden;
}

#btnPlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .22), transparent 60%);
    transform: translateX(-60%);
    transition: transform .35s ease;
}

#btnPlay:hover::after {
    transform: translateX(60%);
}

#btnDaily {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .12);
}

/* очередь: делаем строку “статус” красивее */
.queueLine {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .10);
}

/* лёгкая анимация появления карточки (когда ты показываешь lobby) */
.profileCard {
    animation: cardIn .28s ease both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* мобилка: чтобы кнопки не ломались */
@media (max-width: 520px) {
    .playRow {
        flex-direction: column;
    }

    .playRow .btn {
        width: 100%;
    }
}





/* ===== DAILY BUTTON (premium) ===== */
#btnDaily {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
    color: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
    backdrop-filter: blur(12px);
    transform: translateZ(0);
}

/* glow ring */
#btnDaily::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: radial-gradient(180px 120px at 30% 30%, rgba(255, 255, 255, .20), transparent 55%),
        radial-gradient(180px 120px at 80% 70%, rgba(255, 170, 70, .22), transparent 60%);
    opacity: .85;
    pointer-events: none;
}

/* shine */
#btnDaily::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .28), transparent 65%);
    transform: translateX(-70%);
    transition: transform .38s ease;
    pointer-events: none;
}

#btnDaily:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .26);
    filter: brightness(1.03);
}

#btnDaily:hover::after {
    transform: translateX(70%);
}

#btnDaily:active {
    transform: translateY(0px) scale(.99);
}

/* disabled state */
#btnDaily[disabled] {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.25);
}

/* ===== Reward toast (small) ===== */
.rewardToast {
    position: fixed;
    left: 50%;
    top: 88px;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(10, 12, 18, .86);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    font-weight: 800;
    letter-spacing: .2px;
    animation: rewardToastIn .22s ease both;
}

@keyframes rewardToastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* ===== Flying chips ===== */
.flyChip {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .55), transparent 55%),
        radial-gradient(circle at 60% 70%, rgba(0, 0, 0, .18), transparent 60%),
        linear-gradient(135deg, #FFD36A, #FF9A2A);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
    z-index: 9998;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.chipsPulse {
    animation: chipsPulse .55s ease;
}

@keyframes chipsPulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}



.navCard {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.navBtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
    cursor: pointer;

    transition: transform .12s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
}

.navBtn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.navBtn.active {
    background: linear-gradient(135deg, rgba(255, 140, 60, .95), rgba(255, 80, 30, .95));
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.navIco {
    width: 22px;
    display: inline-flex;
    justify-content: center;
}

/* мобилка: левую колонку делаем "шапкой", nav — горизонтально */
@media (max-width: 1020px) {
    .navCard {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .navBtn {
        width: auto;
        flex: 1;
        justify-content: center;
    }
}






.navBtn {
    font-family: font6;
    letter-spacing: .4px;
}

.navBtn.active {
    position: relative;
}

.navBtn.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .22), transparent 60%);
    transform: translateX(-70%);
    animation: navShine 1.8s ease-in-out infinite;
    pointer-events: none;
    border-radius: 18px;
}

@keyframes navShine {
    0% {
        transform: translateX(-70%);
        opacity: .0;
    }

    15% {
        opacity: .9;
    }

    55% {
        opacity: 0;
    }

    100% {
        transform: translateX(70%);
        opacity: 0;
    }
}








.profileCard {
    overflow: hidden;
}

.profileCard::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 74px;
    background: linear-gradient(180deg, rgba(255, 140, 60, .28), rgba(255, 140, 60, 0));
    pointer-events: none;
    z-index: 0;
}

.profileTop {
    position: relative;
    z-index: 1;
    padding-bottom: 6px;
}

.profileTop .name {
    font-size: 28px;
    font-family: 'font1';
    font-style: italic;
    letter-spacing: 2.5px;
}

#meLevel.pill {
    background: rgb(189 22 255);
    border: 1px solid rgb(255 255 255);
    color: #fff;
    border-radius: 50%;
    font-family: 'font6';
    font-size: 16px;
    transform: skew(0deg, 0deg);
    padding: 3px 8px;
    letter-spacing: 0px;
}


/* ===============================
   FIX LAYOUT -> HEADER + CONTENT
   =============================== */

/* layout должен быть grid, а не block */
.layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
}

/* верхняя панель-хедер (заменяет левую секцию) */
.lobbyHeader {
    padding: 14px 16px;
}

/* сетка хедера */
.lobbyHeaderGrid {
    display: grid;
    grid-template-columns: 260px 1fr 240px;
    gap: 12px;
    align-items: center;
}

/* блок профиля слева */
.lhProfile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lhProfile .avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

.lhProfile .profileMeta {
    min-width: 0;
}

.lhProfile .nameRow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lhProfile .name {
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lhProfile .small {
    opacity: .75;
}

/* центр: быстрые статы */
.lhStats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lhStat {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(12px);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.lhStat .k {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    opacity: .9;
    white-space: nowrap;
}

.lhStat .v {
    font-weight: 1000;
    font-family: font6;
    letter-spacing: .6px;
}

/* правый блок: навигация (Рейтинг/Магазин/Правила) */
.lhNav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.lhNav .navBtn {
    width: auto;
    padding: 10px 12px;
    border-radius: 16px;
}

/* текст-статус (поиск отменён и т.п.) */
.lhStatus {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .12);
    color: rgba(255, 255, 255, .85);
    font-weight: 800;
}

/* контент ниже хедера */
.lobbyBody {
    display: block;
}

/* ===============================
   BOTTOM NAVBAR + MODES DRAWER
   =============================== */

/* нижняя панель (фиксированная) */
.bottomBar {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 28px));
    z-index: 9998;

    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #ffffff12;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);

    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bottomBar .bbBtn {
    flex: 1;
    height: 46px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 1000;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    transition: .3s;
}

.bottomBar .bbBtn.primary {
    border-color: transparent;
    background: linear-gradient(156deg, #fbae74, #cc5c09);
    box-shadow: 0 18px 50px rgba(204, 92, 9, .25);
}

/* чтобы контент не прятался под bottomBar */
.app {
    padding-bottom: 92px;
}

/* выезжающая панель режимов */
.modesDrawer {
    /* position: fixed; */
    /* left: 50%; */
    /* bottom: 76px; */
    /* transform: translateX(-50%) translateY(12px); */
    width: min(980px, calc(100vw - 28px));
    z-index: 9997;

    opacity: 0;
    pointer-events: none;

    border-radius: 26px;
    /* border: 1px solid rgba(255, 255, 255, .12); */
    background: rgba(20, 22, 30, .35);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    padding: 12px;
    transition: .18s ease;
}

.modesDrawer.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0px);
}

/* горизонтальный скролл карточек */
.modesRow {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    scroll-snap-type: x mandatory;
}

.modesRow::-webkit-scrollbar {
    height: 8px;
}

.modesRow::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

/* карточка режима (как “баннер” из твоего примера) */
.modeCard {
    flex: 0 0 320px;
    scroll-snap-align: start;
    border-radius: 22px;
    overflow: hidden;
    position: relative;

    /* border: 1px solid rgba(255, 255, 255, .12); */
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    padding: 14px;
    display: flex;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.modeCard:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.modeIcon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    display: grid;
    place-items: center;
    font-size: 24px;
}

.modeInfo {
    min-width: 0;
    flex: 1;
}

.modeTitle {
    font-weight: 1000;
    font-size: 16px;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modeSub {
    margin-top: 4px;
    font-size: 12px;
    opacity: .78;
    font-weight: 800;
}

.modeMeta {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-family: font2;
}

.modeTag {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    font-weight: 900;
    font-size: 12px;
}

/* мобила */
@media (max-width: 820px) {
    .lobbyHeaderGrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lhNav {
        justify-content: flex-start;
    }

    .lhStats {
        grid-template-columns: 1fr 1fr;
    }

    .modeCard {
        flex-basis: 280px;
    }
}




/* ===============================
   LOBBY: ровный хедер без ломки HTML
   =============================== */

/* ВАЖНО: layout у тебя был display:block — из-за этого всё ехало */
#viewLobby .layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    align-items: start;
}

/* левая колонка в лобби = только шапка */
#viewLobby .layout>.col:first-child {

    align-self: start;
    z-index: 2;
}

/* профиль-карта превращается в "header panel" */
#viewLobby .profileCard {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px;
    align-items: center;
}

/* верхняя часть профиля */
#viewLobby .profileTop {
    margin: 0;
}

/* kv блок (chips, w/l) в одну линию */
#viewLobby .kv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}




/* playRow в хедере НЕ нужен -> скрываем (ты хочешь Играть снизу) */
#viewLobby #btnPlay,
#viewLobby .playRow {
    display: none !important;
}

/* navCard внутри профиля: делаем её горизонтальной полосой в правой части */
#viewLobby .profileCard .navCard {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;

    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

/* кнопки меню компактные */
#viewLobby .profileCard .navBtn {
    width: auto;
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 16px;
}

/* очередь/хинт аккуратно под хедером */
#viewLobby #queueLine,
#viewLobby #lobbyHint {
    grid-column: 1 / -1;
}

/* RIGHT колонка = контент */
#viewLobby .layout>.col:last-child {
    min-width: 0;
}

/* ===============================
   BOTTOM BAR + MODES DRAWER
   =============================== */

.bottomBar {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(1100px, calc(89vw - 28px));
    z-index: 9999;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: transparent;
    backdrop-filter: unset;
    box-shadow: none;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    overflow-x: auto;
}

.bottomBar .bbBtn {
    flex: 1;
    height: 46px;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: font1;
    letter-spacing: 1px;

    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #ffbf00;
    color: rgb(255, 255, 255);
    transform: skew(-4deg, -3deg);
    transition: .3s;
}

.bottomBar .bbBtn.primary {
    border-color: transparent;
    background: linear-gradient(156deg, #fbae74, #cc5c09);
    box-shadow: 0 18px 50px rgba(204, 92, 9, .25);
}

/* чтобы страница не пряталась под нижней панелью */
.app {
    padding-bottom: 92px;
}

/* выезжающая панель режимов */
.modesDrawer {
    /* position: fixed; */
    /* left: 50%; */
    /* bottom: 76px; */
    /* transform: translateX(-50%) translateY(12px); */
    width: min(1100px, calc(100vw - 28px));
    z-index: 9997;

    opacity: 0;
    pointer-events: none;

    border-radius: 26px;
    /* border: 1px solid rgba(255, 255, 255, .12); */
    background: rgba(20, 22, 30, .35);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    padding: 12px;
    transition: .18s ease;
}

.modesDrawer.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0px);
}

.modesRow {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    scroll-snap-type: x mandatory;
}

.modesRow::-webkit-scrollbar {
    height: 8px;
}

.modesRow::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.modeCard {
    flex: 0 0 320px;
    scroll-snap-align: start;

    border-radius: 22px;
    overflow: hidden;
    /* border: 1px solid rgba(255, 255, 255, .12); */
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);

    padding: 14px;
    display: flex;
    gap: 14px;
    align-items: flex-end;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.modeCard:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.modeIcon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    display: grid;
    place-items: center;
    font-size: 24px;
}

.modeInfo {
    min-width: 0;
    flex: 1;
}

.modeTitle {
    font-weight: 1000;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modeSub {
    margin-top: 4px;
    font-size: 12px;
    opacity: .78;
    font-weight: 800;
}

.modeMeta {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.modeTag {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    font-weight: 900;
    font-size: 12px;
}

/* мобилка */
@media (max-width: 820px) {
    #viewLobby .profileCard {
        grid-template-columns: 1fr;
    }

    #viewLobby .profileCard .navCard {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .modeCard {
        flex-basis: 280px;
    }
}





.bbBtn {
    flex: 1;
    border: 0;
    border-radius: 14px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bbBtn:hover {
    background: rgba(255, 255, 255, .10);
}

.bbIco {
    font-size: 16px;
}

.bbTxt {
    font-size: 27px;
    opacity: .95;
}


.modesDrawer.open {
    pointer-events: auto;
}

.modesInner {
    height: 432px;
    border-radius: 18px;
    /* backdrop-filter: blur(16px); */
    /* background: rgba(20, 30, 25, .62); */
    /* border: 1px solid rgba(255, 255, 255, .10); */
    padding: 14px;
    transform: translateY(14px);
    opacity: 0;
    transition: .18s ease;
}

.modesDrawer.open .modesInner {
    transform: translateY(0);
    opacity: 1;
}

.modesTitle {
    color: #fff;
    font-weight: 700;
    /* margin-bottom: 9px; */
    font-family: 'font1';
    letter-spacing: 3px;
    font-style: italic;
    font-size: 34px;
    display: flex;
    gap: 10px;
    align-items: center;
    /* margin-left: 24px; */
}

.modesRow {
    display: flex;
    gap: 43px;
    overflow: auto;
    padding-bottom: 5px;
    /* padding-left: 106px; */
    /* margin-left: 28px; */
    height: 377px;
}

.modeCard {
    min-width: 170px;
    border-radius: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, .06);
    /* border: 1px solid rgba(255, 255, 255, .08); */
    color: #fff;
    cursor: pointer;

    background-image: url("./uploads/img/Frame9.png");
    background-color: #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
}

.modeCard:hover {
    opacity: .7;
}

.modeIco {
    font-family: font2;
    font-size: 18px;
    margin-bottom: 6px;
}

.modeName {
    font-weight: 800;
    font-family: font6;
    font-size: 25px;
    letter-spacing: 2px;
    font-style: italic;
    position: absolute;
    bottom: 50px;
}

.modeMeta {
    font-size: 12px;
    opacity: .8;
    /* margin-top: 4px; */
    position: absolute;
    bottom: 9%;
}


.bottomBar {
    z-index: 9999;
}

.modesDrawer {
    z-index: 10000;
}


.layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width:1020px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

.col {
    height: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* ===== FINAL: bottom bar must show ===== */
#bottomBar {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(1100px, calc(89vw - 28px));
    z-index: 9999;

    border-radius: 22px;
    border: none;
    background: transparent;
    backdrop-filter: unset;
    box-shadow: none;
    border-bottom: 2px solid #ffab0036;

    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    overflow-x: auto;
}

#modesDrawer {
    position: relative;
    left: 50%;
    height: 524px;
    /* top: 332px; */
    transform: translateX(-50%) translateY(12px);
    width: min(1185px, calc(97vw - 28px));
    z-index: 10000;

    opacity: 0;
    pointer-events: none;

    border-radius: 26px;
    /* border: 1px solid rgba(255, 255, 255, .12); */
    background: #00000036;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    padding: 12px;
    transition: .18s ease;
}

#modesDrawer.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0px);
}

/* чтобы контент не уезжал под панель */
.app {
    padding-bottom: 110px;
}


#viewLobby .tabSection {
    display: none;
}

#viewLobby .tabSection.active {
    display: block;
}




.mmCard {
    max-width: 520px;
    width: min(520px, 92vw);
    text-align: center;
    padding: 22px;
}

.mmSpin {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .15);
    border-top-color: rgba(255, 255, 255, .75);
    margin: 0 auto 12px;
    animation: mmspin .9s linear infinite;
}

@keyframes mmspin {
    to {
        transform: rotate(360deg);
    }
}

.mmTitle {
    font-size: 31px;
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: 2px;
}

.mmSub {
    opacity: .75;
    font-size: 12px;
    margin-top: 6px;
}

.mmProg {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #554c4c1f;
    margin: 14px 0 10px;
}

.mmProgFill {
    height: 100%;
    background: rgb(89 58 40);
    width: 0%;
    transition: width .2s ease;
}

.mmTime {
    font-variant-numeric: tabular-nums;
    opacity: .8;
    margin-bottom: 14px;
}


@media only screen and (max-width: 1900px) {
    #viewLobby .kv {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

@media only screen and (max-width: 1200px) {
    #viewLobby .kv {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}


@media only screen and (max-width: 900px) {
    #viewLobby .kv {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 10px;
    }
}




































/* ===== MODES: arrows + dots (SAFE) ===== */
#modesDrawer .modesInner {
    position: relative;
}

#modesDrawer .modesRow {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

#modesDrawer .modeCard {
    scroll-snap-align: center;
}

/* arrows */
#modesDrawer .mArrow {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 99999;
    user-select: none;
    pointer-events: auto;
}

#modesDrawer .mArrow.left {
    left: 10px;
}

#modesDrawer .mArrow.right {
    right: 10px;
}

#modesDrawer .mArrow[disabled] {
    opacity: .35;
    cursor: default;
}

/* dots */
#modesDrawer .mDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

#modesDrawer .mDot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
}

#modesDrawer .mDot.active {
    background: rgba(255, 255, 255, .95);
    transform: scale(1.25);
}






/* ===== FIX: arrows clickable + nice position ===== */
#modesDrawer .modesInner {
    position: relative;
}

#modesDrawer .mArrow {
    position: absolute !important;
    top: 67% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(0, 0, 0, .35) !important;
    color: #fff !important;
    font-size: 22px !important;
    display: grid !important;
    place-items: center !important;
}

#modesDrawer .mArrow.left {
    left: 8px !important;
}

#modesDrawer .mArrow.right {
    right: 8px !important;
}

/* ВАЖНО: чтобы картинка/оверлей не перехватывали клик по стрелкам */
#modesDrawer .modeCard,
#modesDrawer .modeCard * {
    pointer-events: auto;
}

/* часто именно псевдо-слой ::after ловит клики — выключаем */
#modesDrawer .modeCard::after {
    pointer-events: none !important;
}

#modesDrawer .mArrow.left {
    left: -6px !important;
}

#modesDrawer .mArrow.right {
    right: -6px !important;
}


/* ===== MODES FINAL (NO STRIP, CENTER, WORKS) ===== */

#modesDrawer .modesInner {
    position: relative !important;
}

/* row */
#modesDrawer .modesRow {
    display: flex !important;
    align-items: center !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 14px !important;
    padding: 10px 18px 6px !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    height: auto !important;
}

/* card (ВАЖНО: задаём нормальную высоту, иначе будет полоска) */
#modesDrawer .modeCard {
    flex: 0 0 auto !important;
    width: min(276px, 86vw) !important;
    height: 356px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 28px !important;
    display: block !important;
}

/* убираем твой flex, который сжимает */

/* если у тебя был затемняющий ::after — он не должен влиять на клики */
#modesDrawer .modeCard::after {
    pointer-events: none !important;
}

/* центрирование: добавляем “пустое место” по бокам */
#modesDrawer .modesRow::before,
#modesDrawer .modesRow::after {
    content: "";
    flex: 0 0 18px;
}

/* ПК: показываем 3 карточки норм (как у тебя на большом экране) */
@media (min-width: 900px) {
    #modesDrawer .modeCard {
        width: 320px !important;
        height: 320px !important;
        /* квадрат красиво для ПК */
    }
}

/* скрыть скроллбар */
#modesDrawer .modesRow::-webkit-scrollbar {
    display: none;
}

#modesDrawer .modesRow {
    scrollbar-width: none;
}

#modesDrawer .modesNav {
    display: flex;
    flex-wrap: inherit;
    gap: 8px;
    padding: 5px 9px 0;
    /* display: flex; */
    overflow: hidden;
    overflow-x: scroll;
}

#modesDrawer .modesFilterBtn {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    border-radius: 999px;
    min-width: 100px;
    padding: 10px 16px;
    font: inherit;
    font-size: 12px;
    letter-spacing: .12em;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

#modesDrawer .modesFilterBtn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    transform: translateY(-1px);
}

#modesDrawer .modesFilterBtn.active {
    color: #0d1324;
    background: linear-gradient(135deg, #f8f0c0, #ffffff);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(248, 240, 192, .2);
}

#modesDrawer .modeCard.is-hidden {
    display: none !important;
}























.matchIdTag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0px;
    font-family: font5;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, .10);
    color: #ffd100;
    font-size: 20px;
    font-weight: 800;
}


/* theme picker UI */
.themeGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    max-height: 320px;
    /* ВОТ ЭТОГО не хватает */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    /* чтобы скроллбар не резал контент */
}

.themePick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    align-items: center;
}

.themePick input {
    display: none;
}

.themeThumb {
    width: 100%;
    height: 40px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.themeName {
    font-size: 12px;
    opacity: .85;
    font-weight: 800;
}

.themePick input:checked+.themeThumb {
    outline: 2px solid rgba(255, 255, 255, .85);
}

/* маленькие превью */
.themeThumb.t-red {
    background: linear-gradient(135deg, #6b1b1b, #2a0505);
}

.themeThumb.t-wood {
    width: 100%;
    background-image: url("./uploads/img/themes/2206_w026_n002_2022b_p1_2022.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-space {
    background-image: url("./uploads/img/themes/2305.w064.n002.258B.p1.258.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor5 {
    background-image: url("./uploads/img/themes/frogs-jumping-math-blocks_1308-178062.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor6 {
    background-image: url("./uploads/img/themes/mathematics-class-school-with-teacher-boy_107791-14504.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor7 {
    background-image: url("./uploads/img/themes/enchanted-classroom-with-math-teacher-textbooks-chalkboard-fantasy-back-school-theme_980716-358749.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor8 {
    background-image: url("./uploads/img/themes/2206_w030_n003_417b_p1_417.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor9 {
    background-image: url("./uploads/img/themes/scattered-yellow-bananas-pattern-with-brown-stems-background_719647-223.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}


.themeThumb.t-categor10 {
    background-image: url("./uploads/img/themes/3d-realistic-image-mascot-solar-energy-company_1106493-304818.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}


.themeThumb.t-categor11 {
    background-image: url("./uploads/img/themes/cute-funny-squirrel-smiling-winter-holiday-skiing-wide-banner-with-copy-space-side_916191-242924.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor12 {
    background-image: url("./uploads/img/themes/cute-funny-squirrel-smiling-winter-holiday-skiing-wide-banner-with-copy-space-side_916191-214412.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}


.themeThumb.t-categor13 {
    background-image: url("./uploads/img/themes/highquality-3d-render-cute-baby-flamingo-with-big-eyes-blue-background-concept-flamingo-baby-animal-3d-render-cute-blue-background_864588-167387.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}


.themeThumb.t-categor14 {
    background-image: url("./uploads/img/themes/portrait-photography-cute-cat-little-professional-smiling-cute-cat-little-nurse-practitioner-wi_997641-10304.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}


.themeThumb.t-categor15 {
    background-image: url("./uploads/img/themes/duck-wearing-red-sunglasses-with-stars-it_916191-379876.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor16 {
    background-image: url("./uploads/img/themes/funny-cute-teddy-polar-white-bear-sunglasses-hat-points-with-finger-copy-space-yellow-isolated-background_118086-26389.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.themeThumb.t-categor17 {
    background-image: url("./uploads/img/themes/cute-yellow-cartoon-bird-with-sunglasses-flies-front-yellow-background_1228923-2178.jpg");
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}









/* фон игрока по теме */
.pcard1 {
    position: relative;
    overflow: hidden;
}

.pcard1::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .7;
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    pointer-events: none;
}

.pcard1[data-theme="red"]::before {
    background-image: linear-gradient(135deg, #6b1b1b, #2a0505);
}

.pcard1[data-theme="wood"]::before {
    background-image: url("./uploads/img/themes/2206_w026_n002_2022b_p1_2022.jpg");
}

.pcard1[data-theme="space"]::before {
    background-image: url("./uploads/img/themes/2305.w064.n002.258B.p1.258.jpg");
}

.pcard1[data-theme="categor5"]::before {
    background-image: url("./uploads/img/themes/frogs-jumping-math-blocks_1308-178062.jpg");
}

.pcard1[data-theme="categor6"]::before {
    background-image: url("./uploads/img/themes/mathematics-class-school-with-teacher-boy_107791-14504.jpg");
}

.pcard1[data-theme="categor7"]::before {
    background-image: url("./uploads/img/themes/enchanted-classroom-with-math-teacher-textbooks-chalkboard-fantasy-back-school-theme_980716-358749.jpg");
}

.pcard1[data-theme="categor8"]::before {
    background-image: url("./uploads/img/themes/2206_w030_n003_417b_p1_417.jpg");
}

.pcard1[data-theme="categor9"]::before {
    background-image: url("./uploads/img/themes/scattered-yellow-bananas-pattern-with-brown-stems-background_719647-223.jpg");
}

.pcard1[data-theme="categor10"]::before {
    background-image: url("./uploads/img/themes/3d-realistic-image-mascot-solar-energy-company_1106493-304818.jpg");
}

.pcard1[data-theme="categor11"]::before {
    background-image: url("./uploads/img/themes/cute-funny-squirrel-smiling-winter-holiday-skiing-wide-banner-with-copy-space-side_916191-242924.jpg");
}

.pcard1[data-theme="categor12"]::before {
    background-image: url("./uploads/img/themes/cute-funny-squirrel-smiling-winter-holiday-skiing-wide-banner-with-copy-space-side_916191-214412.jpg");
}

.pcard1[data-theme="categor13"]::before {
    background-image: url("./uploads/img/themes/highquality-3d-render-cute-baby-flamingo-with-big-eyes-blue-background-concept-flamingo-baby-animal-3d-render-cute-blue-background_864588-167387.jpg");
}

.pcard1[data-theme="categor14"]::before {
    background-image: url("./uploads/img/themes/portrait-photography-cute-cat-little-professional-smiling-cute-cat-little-nurse-practitioner-wi_997641-10304.jpg");
}

.pcard1[data-theme="categor15"]::before {
    background-image: url("./uploads/img/themes/duck-wearing-red-sunglasses-with-stars-it_916191-379876.jpg");
}

.pcard1[data-theme="categor16"]::before {
    background-image: url("./uploads/img/themes/funny-cute-teddy-polar-white-bear-sunglasses-hat-points-with-finger-copy-space-yellow-isolated-background_118086-26389.jpg");
}

.pcard1[data-theme="categor17"]::before {
    background-image: url("./uploads/img/themes/cute-yellow-cartoon-bird-with-sunglasses-flies-front-yellow-background_1228923-2178.jpg");
}



/* чтобы текст был сверху */
.pcard>* {
    position: relative;
    z-index: 1;
}


/* ===== SETTINGS MODAL SCROLL FIX ===== */
#settingsModal.modalBack {
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    /* фон не скроллим */
}

/* сама карточка должна иметь max-height и скролл */
#settingsModal .modalCard {
    max-height: calc(100dvh - 32px);
    /* мобильные норм */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* на всякий: чтобы grid не раздувал карточку */
#settingsModal .form {
    min-height: 0;
}

/* красивый скролл (не обязательно) */
#settingsModal .modalCard::-webkit-scrollbar {
    width: 10px;
    height: 0px;
}

#settingsModal .modalCard::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
}




.shopCardX {
    position: relative;
    overflow: hidden;
    min-height: 290px;
    border-radius: 28px;
    padding: 20px 18px 18px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
    transform: translateY(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.shopCardX:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, .34),
        0 0 24px rgba(170, 64, 255, .22),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .22);
}

.shopCardX__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(20, 10, 45, .20) 0%, rgba(33, 12, 70, .10) 20%, rgba(50, 10, 90, .16) 45%, rgba(18, 8, 40, .38) 100%);
    pointer-events: none;
}

.shopCardX::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .18), transparent 22%),
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, .10), transparent 18%),
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 38%);
    pointer-events: none;
}

.shopCardX__top,
.shopCardX__center,
.shopCardX__bottom {
    position: relative;
    z-index: 1;
}

.shopCardX__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.shopCardX__title {
    font-size: 36px;
    line-height: 1;
    font-family: font1;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 3.5px;
    color: #f6ecff;
    text-shadow: 0 2px 0 rgba(74, 22, 114, .85), 0 4px 12px rgba(0, 0, 0, .22);
    text-transform: uppercase;
}

.shopCardX__badge {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    font-family: font3;
    letter-spacing: 1.1px;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
}

.shopCardX__center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.shopCardX__amount {
    font-size: 72px;
    line-height: .95;
    font-family: font2, sans-serif;
    font-weight: 1000;
    letter-spacing: 1px;
    color: #fff4ff;
    text-shadow:
        0 4px 0 rgba(122, 29, 170, .95),
        0 10px 22px rgba(0, 0, 0, .24);
    filter: drop-shadow(0 8px 18px rgba(154, 53, 255, .22));
}

.shopCardX__bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.shopCardX__price {
    font-size: 57px;
    font-style: italic;
    letter-spacing: 2px;
    line-height: 1;
    font-family: 'font10';
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 3px 0 rgba(110, 41, 155, .85), 0 8px 16px rgba(0, 0, 0, .22);
    white-space: nowrap;
}

.shopCardX__btn {
    border: none;
    border-radius: 18px;
    min-width: 117px;
    height: 51px;
    padding: 0 17px;
    cursor: pointer;
    font-family: font1;
    font-style: italic;
    letter-spacing: 2.5px;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    background: #673AB7;
    box-shadow: 0 10px 24px rgb(255 255 255 / 12%), inset 0 1px 0 rgba(255, 255, 255, .35);
    text-shadow: 0 2px 0 rgba(126, 58, 9, .9);
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.shopCardX__btn:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.03);
    box-shadow:
        0 14px 28px rgba(180, 89, 12, .34),
        0 0 18px rgba(255, 168, 84, .22),
        inset 0 1px 0 rgba(255, 255, 255, .4);
}

.shopCardX__btn:active {
    transform: translateY(0) scale(.99);
}

@media (max-width: 900px) {
    .shopCardX {
        min-height: 250px;
        border-radius: 24px;
    }

    .shopCardX__title {
        font-size: 24px;
    }

    .shopCardX__amount {
        font-size: 58px;
    }

    .shopCardX__price {
        font-size: 34px;
    }

    .shopCardX__btn {
        min-width: 112px;
        height: 48px;
        font-size: 20px;
    }
}


























.notifyWrap {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
}

.notifyStack {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.notifyStack.right {
    top: 24px;
    right: 24px;
    align-items: flex-end;
}

.notifyStack.left {
    top: 24px;
    left: 24px;
    align-items: flex-start;
}

.notifyStack.center {
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.notifyCard {
    min-width: 280px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-12px) scale(.96);
    animation: notifyIn .28s ease forwards;
    overflow: hidden;
    position: relative;
}

.notifyCard.out {
    animation: notifyOut .22s ease forwards;
}

.notifyCard.success {
    background: linear-gradient(135deg, rgba(30, 120, 60, .95), rgba(20, 70, 35, .92));
}

.notifyCard.error {
    background: linear-gradient(135deg, rgba(150, 35, 35, .96), rgba(85, 20, 20, .94));
}

.notifyCard.info {
    background: linear-gradient(135deg, rgba(70, 70, 110, .96), rgba(35, 35, 65, .94));
}

.notifyCard.warning {
    background: linear-gradient(135deg, rgba(170, 120, 20, .96), rgba(100, 65, 10, .94));
}

.notifyMedia {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.notifyMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.notifyBody {
    flex: 1;
    min-width: 0;
}

.notifyText {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    word-wrap: break-word;
}

.notifyClose {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto;
}

.notifyClose:hover {
    background: rgba(255, 255, 255, .20);
}

.notifyBar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.notifyBarFill {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .92);
    transform-origin: left center;
    animation: notifyBar linear forwards;
}

@keyframes notifyIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes notifyOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(.96);
    }
}

@keyframes notifyBar {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}





.notifyWrap {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
}

.notifyStack {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.notifyStack.right {
    top: 24px;
    right: 24px;
    align-items: flex-end;
}

.notifyStack.left {
    top: 24px;
    left: 24px;
    align-items: flex-start;
}

.notifyStack.center {
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.notifyCard {
    min-width: 280px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    pointer-events: auto;
    overflow: hidden;
    position: relative;

    opacity: 0;
    will-change: transform, opacity;
}

.notifyStack.right .notifyCard {
    transform: translateX(70px) scale(.92);
    animation: notifyInRight .42s cubic-bezier(.22, .9, .22, 1) forwards;
}

.notifyStack.left .notifyCard {
    transform: translateX(-70px) scale(.92);
    animation: notifyInLeft .42s cubic-bezier(.22, .9, .22, 1) forwards;
}

.notifyStack.center .notifyCard {
    transform: translateY(-20px) scale(.92);
    animation: notifyInCenter .42s cubic-bezier(.22, .9, .22, 1) forwards;
}

.notifyCard.out {
    animation-duration: .26s !important;
    animation-timing-function: ease !important;
    animation-fill-mode: forwards !important;
}

.notifyStack.right .notifyCard.out {
    animation-name: notifyOutRight !important;
}

.notifyStack.left .notifyCard.out {
    animation-name: notifyOutLeft !important;
}

.notifyStack.center .notifyCard.out {
    animation-name: notifyOutCenter !important;
}

.notifyCard.success {
    background: linear-gradient(135deg, rgba(30, 120, 60, .95), rgba(20, 70, 35, .92));
}

.notifyCard.error {
    background: linear-gradient(135deg, rgba(150, 35, 35, .96), rgba(85, 20, 20, .94));
}

.notifyCard.info {
    background: linear-gradient(135deg, rgba(70, 70, 110, .96), rgba(35, 35, 65, .94));
}

.notifyCard.warning {
    background: linear-gradient(135deg, rgba(170, 120, 20, .96), rgba(100, 65, 10, .94));
}

.notifyMedia {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.notifyMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.notifyBody {
    flex: 1;
    min-width: 0;
}

.notifyText {
    font-size: 16px;
    font-family: font10;
    font-style: italic;
    letter-spacing: 1px;
    line-height: 1.35;
    font-weight: 800;
    word-wrap: break-word;
}

.notifyClose {
    width: 34px;
    height: 34px;
    min-width: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 27px;
    cursor: pointer;
    pointer-events: auto;
}

.notifyClose:hover {
    background: rgba(255, 255, 255, .20);
}

.notifyBar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.notifyBarFill {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .92);
    transform-origin: left center;
    animation: notifyBar linear forwards;
}

@keyframes notifyInRight {
    0% {
        opacity: 0;
        transform: translateX(70px) scale(.92);
    }

    60% {
        opacity: 1;
        transform: translateX(-6px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes notifyOutRight {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(45px) scale(.96);
    }
}

@keyframes notifyInLeft {
    0% {
        opacity: 0;
        transform: translateX(-70px) scale(.92);
    }

    60% {
        opacity: 1;
        transform: translateX(6px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes notifyOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-45px) scale(.96);
    }
}

@keyframes notifyInCenter {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(.92);
    }

    60% {
        opacity: 1;
        transform: translateY(4px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes notifyOutCenter {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-12px) scale(.96);
    }
}

@keyframes notifyBar {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}













































.txt-122 {
    color: #fff;
    font-family: font1;
    font-style: italic;
    letter-spacing: 2px;
    font-size: 16px;
}

.gl-191293 {
    font-family: font1;
    letter-spacing: 2.5px;
    font-style: italic;
}

.gl-191291 {
    font-family: font1;
    letter-spacing: 1.2px;
    font-style: italic;
    max-width: 100ch;
}

.gl-223421 {
    font-size: 20px;
    font-family: font7;
    font-weight: 1000;
    letter-spacing: 5px;
}



/* default (ru/en) */
:root {
    --ui-font: font8;
}



/* Armenian */
html:lang(hy) {
    --ui-font: font8;
}

/* если хочешь отдельный “chalk” только для армянского текста */
html:lang(hy) .taskText,
html:lang(hy) .pName,
html:lang(hy) .cardTitle,
html:lang(hy) .bbBtn,
.modesTitle,
#btnRefreshTop,
.jl-9123,
.txt-122,
.tx-arm-st,
.pill {
    font-family: font10;
}




@media (max-width: 980px) {
    .gridLogin {
        grid-template-columns: 1fr;
    }

    /* .ban-pc-version {
        display: none;
    } */

    .tile {
        height: 150px;
    }


}



@media (max-width: 560px) {

    .til1,
    .til2 {
        display: none;
    }

    .tileK {
        position: absolute;
        bottom: 10px;
        left: 19px;
        padding: 4px 9px;
        font-size: 19px;
        border-radius: 9px;
        color: #ffffff;
        font-weight: 800;
        font-family: font10;
        background-color: #a71ade;
    }

    .gl-191293,
    .hero h1 {
        font-size: 20px;
    }
}