/* /Components/Account/Login.razor.rz.scp.css */
/* ===== экран входа: центрированная карточка в теме тёмного пергамента ===== */
.auth-wrap[b-4x3kjirmg9] { display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 40px;
             font-family: system-ui, sans-serif; color: var(--text);
             background: radial-gradient(110% 80% at 50% -10%, #ffe08a14, transparent 60%); }

.auth-card[b-4x3kjirmg9] { width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--border2);
             border-radius: 12px; padding: 26px 28px 22px; box-shadow: 0 10px 34px #000a; }

.auth-title[b-4x3kjirmg9] { margin: 0 0 4px; font-size: 26px; font-weight: 800; text-align: center; letter-spacing: .5px;
              background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-sub[b-4x3kjirmg9] { margin: 0 0 18px; text-align: center; color: var(--text-dim); font-size: 13px; }

.auth-error[b-4x3kjirmg9] { background: #5d2f2f66; border: 1px solid #7d3f3f; color: #f0c9c9; border-radius: 8px;
              padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }

.auth-field[b-4x3kjirmg9] { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.auth-field > span[b-4x3kjirmg9] { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }
.auth-field[b-4x3kjirmg9]  input { background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px;
                           color: var(--text); padding: 9px 11px; font-size: 15px; outline: none;
                           transition: border-color .12s, box-shadow .12s; width: 100%; box-sizing: border-box; }
.auth-field[b-4x3kjirmg9]  input:focus { border-color: var(--accent); box-shadow: 0 0 8px #e3bd4f44; }
.auth-field[b-4x3kjirmg9]  .validation-message { font-size: 12px; }

.auth-check[b-4x3kjirmg9] { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; color: var(--text-dim);
              font-size: 14px; cursor: pointer; }
.auth-check[b-4x3kjirmg9]  input { accent-color: var(--accent); width: 16px; height: 16px; }

.auth-submit[b-4x3kjirmg9] { display: block; width: 100%; background: linear-gradient(180deg, #3a9540, #2f7d32); color: #fff;
               border: none; border-radius: 10px; padding: 11px 22px; font-size: 16px; font-weight: 700;
               cursor: pointer; box-shadow: 0 4px 14px #1c5a2055; transition: filter .12s, transform .12s; }
.auth-submit:hover[b-4x3kjirmg9] { filter: brightness(1.08); transform: translateY(-1px); }

.auth-alt[b-4x3kjirmg9] { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--text-soft); }
.auth-alt a[b-4x3kjirmg9] { color: var(--accent); text-decoration: none; }
.auth-alt a:hover[b-4x3kjirmg9] { text-decoration: underline; }
/* /Components/Account/Register.razor.rz.scp.css */
/* ===== экран входа: центрированная карточка в теме тёмного пергамента ===== */
.auth-wrap[b-qe97rg52nc] { display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 40px;
             font-family: system-ui, sans-serif; color: var(--text);
             background: radial-gradient(110% 80% at 50% -10%, #ffe08a14, transparent 60%); }

.auth-card[b-qe97rg52nc] { width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--border2);
             border-radius: 12px; padding: 26px 28px 22px; box-shadow: 0 10px 34px #000a; }

.auth-title[b-qe97rg52nc] { margin: 0 0 4px; font-size: 26px; font-weight: 800; text-align: center; letter-spacing: .5px;
              background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-sub[b-qe97rg52nc] { margin: 0 0 18px; text-align: center; color: var(--text-dim); font-size: 13px; }

.auth-error[b-qe97rg52nc] { background: #5d2f2f66; border: 1px solid #7d3f3f; color: #f0c9c9; border-radius: 8px;
              padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }

.auth-field[b-qe97rg52nc] { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.auth-field > span[b-qe97rg52nc] { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }
.auth-field[b-qe97rg52nc]  input { background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px;
                           color: var(--text); padding: 9px 11px; font-size: 15px; outline: none;
                           transition: border-color .12s, box-shadow .12s; width: 100%; box-sizing: border-box; }
.auth-field[b-qe97rg52nc]  input:focus { border-color: var(--accent); box-shadow: 0 0 8px #e3bd4f44; }
.auth-field[b-qe97rg52nc]  .validation-message { font-size: 12px; }

.auth-check[b-qe97rg52nc] { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; color: var(--text-dim);
              font-size: 14px; cursor: pointer; }
.auth-check[b-qe97rg52nc]  input { accent-color: var(--accent); width: 16px; height: 16px; }

.auth-submit[b-qe97rg52nc] { display: block; width: 100%; background: linear-gradient(180deg, #3a9540, #2f7d32); color: #fff;
               border: none; border-radius: 10px; padding: 11px 22px; font-size: 16px; font-weight: 700;
               cursor: pointer; box-shadow: 0 4px 14px #1c5a2055; transition: filter .12s, transform .12s; }
.auth-submit:hover[b-qe97rg52nc] { filter: brightness(1.08); transform: translateY(-1px); }

.auth-alt[b-qe97rg52nc] { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--text-soft); }
.auth-alt a[b-qe97rg52nc] { color: var(--accent); text-decoration: none; }
.auth-alt a:hover[b-qe97rg52nc] { text-decoration: underline; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===== верхняя навигация в теме «Сундука войны» ===== */
.topnav[b-ior76exnjj] { display: flex; align-items: center; gap: 22px; padding: 8px 18px;
          background: var(--panel); border-bottom: 1px solid var(--border2);
          font-family: system-ui, sans-serif; }

.brand[b-ior76exnjj] { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img[b-ior76exnjj] { width: 30px; height: 30px; border-radius: 50%; filter: drop-shadow(0 1px 4px #000a); }
.brand span[b-ior76exnjj] { font-weight: 800; font-size: 17px; letter-spacing: .4px;
              background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a);
              -webkit-background-clip: text; background-clip: text; color: transparent; }

.links[b-ior76exnjj] { display: flex; gap: 4px; }
.links[b-ior76exnjj]  a { color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 600;
                  padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; transition: .12s; }
.links[b-ior76exnjj]  a:hover { color: var(--text); border-color: var(--border2); }
.links[b-ior76exnjj]  a.active { color: var(--accent); border-color: var(--border2); background: var(--panel2); }

.account[b-ior76exnjj] { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.account a[b-ior76exnjj] { color: var(--text-dim); text-decoration: none; font-size: 14px; padding: 5px 12px;
             border-radius: 8px; border: 1px solid transparent; }
.account a:hover[b-ior76exnjj] { color: var(--text); border-color: var(--border2); }
.account a.reg[b-ior76exnjj] { border: 1px solid var(--accent); color: var(--accent); font-weight: 600; }
.account a.reg:hover[b-ior76exnjj] { background: var(--accent); color: #241e14; }
.uname[b-ior76exnjj] { color: var(--accent); font-size: 14px; font-weight: 700; max-width: 180px;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout[b-ior76exnjj] { display: inline; margin: 0; }
.logout button[b-ior76exnjj] { background: transparent; border: 1px solid var(--border2); color: var(--text-dim);
                 border-radius: 8px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.logout button:hover[b-ior76exnjj] { border-color: #c0584a; color: #e08a7a; }

main.content[b-ior76exnjj] { min-height: calc(100vh - 48px); }

#blazor-error-ui[b-ior76exnjj] { color-scheme: dark; background: #5d2f2f; color: #f2ded7; border-top: 1px solid #7d3f3f;
                   bottom: 0; box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4); box-sizing: border-box; display: none;
                   left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .reload[b-ior76exnjj] { color: #ffd9a8; }
#blazor-error-ui .dismiss[b-ior76exnjj] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-x4gr2j6715] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-x4gr2j6715] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-x4gr2j6715] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-x4gr2j6715] {
    font-size: 1.1rem;
}

.bi[b-x4gr2j6715] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-x4gr2j6715] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-x4gr2j6715] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-x4gr2j6715] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-x4gr2j6715] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-x4gr2j6715] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-x4gr2j6715] {
        padding-bottom: 1rem;
    }

    .nav-item[b-x4gr2j6715]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-x4gr2j6715]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-x4gr2j6715]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-x4gr2j6715] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-x4gr2j6715] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-x4gr2j6715] {
        display: none;
    }

    .nav-scrollable[b-x4gr2j6715] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ВАЖНО: правила видимости по состояниям (components-reconnect-*) — служебные,
   на них опирается blazor.web.js + ReconnectModal.razor.js. Не переименовывать. */

.components-reconnect-first-attempt-visible[b-wm5ymh4xe8],
.components-reconnect-repeated-attempt-visible[b-wm5ymh4xe8],
.components-reconnect-failed-visible[b-wm5ymh4xe8],
.components-pause-visible[b-wm5ymh4xe8],
.components-resume-failed-visible[b-wm5ymh4xe8],
.components-rejoining-animation[b-wm5ymh4xe8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-retrying[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-failed[b-wm5ymh4xe8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wm5ymh4xe8] {
    display: block;
}

/* ===== карточка в теме «Сундука войны» =====
   Диалог живёт вне интерактивного рантайма — только статические CSS/JS. */

#components-reconnect-modal[b-wm5ymh4xe8] {
    background: var(--panel, #241e14);
    color: var(--text, #e8dcc0);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border2, #50432c);
    border-radius: 12px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-wm5ymh4xe8 0.5s both;
    &[open] {
        animation: components-reconnect-modal-slideUp-b-wm5ymh4xe8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-wm5ymh4xe8 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-wm5ymh4xe8]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-wm5ymh4xe8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-wm5ymh4xe8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-wm5ymh4xe8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-wm5ymh4xe8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-wm5ymh4xe8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-wm5ymh4xe8] {
    margin: 0;
    text-align: center;
    color: var(--text-dim, #c9b88c);
    font-size: 14px;
    line-height: 1.45;
}

#components-reconnect-modal p strong[b-wm5ymh4xe8] {
    color: var(--accent, #e3bd4f);
    font-size: 16px;
}

/* ===== кнопки: акцентная золотая + «призрачная» второстепенная ===== */

#components-reconnect-modal button[b-wm5ymh4xe8] {
    border: 0;
    background: var(--accent, #e3bd4f);
    color: #241e14;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 26px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(227, 189, 79, .25);
    transition: filter .12s, transform .12s;
}

    #components-reconnect-modal button:hover[b-wm5ymh4xe8] {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    #components-reconnect-modal button:active[b-wm5ymh4xe8] {
        filter: none;
        transform: none;
    }

    #components-reconnect-modal button.wcr-ghost[b-wm5ymh4xe8] {
        background: transparent;
        border: 1px solid var(--border2, #50432c);
        color: var(--text-dim, #c9b88c);
        font-weight: 400;
        font-size: 13px;
        padding: 6px 18px;
        box-shadow: none;
    }

        #components-reconnect-modal button.wcr-ghost:hover[b-wm5ymh4xe8] {
            border-color: var(--accent, #e3bd4f);
            color: var(--text, #e8dcc0);
        }

/* ===== «вращающаяся монета» на чистом CSS =====
   Дубликат анимации WcLoader: этот диалог рендерится статически,
   Blazor-компоненты сюда вставлять нельзя. */

.components-rejoining-animation[b-wm5ymh4xe8] {
    position: relative;
    width: 84px;
    height: 84px;
    perspective: 420px;
}

    /* золотое свечение на неподвижной обёртке */
    .components-rejoining-animation[b-wm5ymh4xe8]::after {
        content: "";
        position: absolute;
        inset: 5%;
        border-radius: 50%;
        pointer-events: none;
        animation: wcr-glow-b-wm5ymh4xe8 1.2s ease-in-out infinite;
    }

    /* тень «на земле» под монетой */
    .components-rejoining-animation[b-wm5ymh4xe8]::before {
        content: "";
        position: absolute;
        left: 16%;
        right: 16%;
        bottom: -16px;
        height: 10px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
        animation: wcr-shadow-b-wm5ymh4xe8 1.2s ease-in-out infinite;
    }

.wcr-coin[b-wm5ymh4xe8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: wcr-flip-b-wm5ymh4xe8 1.2s ease-in-out infinite;
    /* фоллбэк-«золото», если png недоступен (сервер лежит, кэша нет) */
    background: radial-gradient(circle at 35% 30%, #f0d066, #8a6a26 70%, #5a4419);
}

    .wcr-coin img[b-wm5ymh4xe8] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

.wcr-gloss[b-wm5ymh4xe8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, .38) 0%,
        rgba(255, 255, 255, .10) 32%,
        rgba(255, 255, 255, 0) 55%);
}

/* keyframes в scoped-css попадают в общий бандл без переименования — префикс wcr- */

@keyframes wcr-flip-b-wm5ymh4xe8 {
    0%   { transform: translateY(0) rotateY(0deg); }
    50%  { transform: translateY(-9px) rotateY(180deg); }
    100% { transform: translateY(0) rotateY(360deg); }
}

@keyframes wcr-glow-b-wm5ymh4xe8 {
    0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--accent, #e3bd4f) 40%, transparent); }
    50%      { box-shadow: 0 0 28px color-mix(in srgb, var(--accent, #e3bd4f) 70%, transparent); }
}

@keyframes wcr-shadow-b-wm5ymh4xe8 {
    0%, 100% { transform: scaleX(1); opacity: .8; }
    50%      { transform: scaleX(.72); opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .wcr-coin[b-wm5ymh4xe8],
    .components-rejoining-animation[b-wm5ymh4xe8]::before {
        animation: none;
    }
    .components-rejoining-animation[b-wm5ymh4xe8]::after {
        animation-duration: 2.4s;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
h1[b-w1pqy9gzhq] { color: var(--text); }

/* ===== стартовый экран ===== */
/* (общие игровые стили — доска, полосы, панель действий, .pick/.setup-bar — в wwwroot/game.css) */
.setup[b-w1pqy9gzhq] { max-width: 1100px; margin: 22px auto; color: var(--text); font-family: system-ui, sans-serif; text-align: center;
         background: radial-gradient(110% 80% at 50% -10%, #ffe08a14, transparent 60%);
         padding: 8px 16px 28px; border-radius: 20px; }

/* герб + заголовок */
.hero[b-w1pqy9gzhq] { margin: 6px 0 22px; }
.hero-crest[b-w1pqy9gzhq] { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 6px; }
.hero-crest .crest[b-w1pqy9gzhq] { width: 64px; height: 64px; border-radius: 50%; filter: drop-shadow(0 3px 8px #000a); animation: crest-in-b-w1pqy9gzhq .6s ease both; }
.hero-crest .crest.wolf[b-w1pqy9gzhq] { animation-delay: .05s; }
.hero-crest .crest.crow[b-w1pqy9gzhq] { animation-delay: .15s; }
.hero-x[b-w1pqy9gzhq] { font-size: 30px; color: var(--accent); text-shadow: 0 2px 10px #e3bd4f66; }
.setup h1[b-w1pqy9gzhq] { margin: 2px 0; font-size: clamp(34px, 6vw, 52px); font-weight: 800; letter-spacing: .5px;
            background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a); -webkit-background-clip: text;
            background-clip: text; color: transparent; text-shadow: 0 2px 18px #00000040; }
.tagline[b-w1pqy9gzhq] { color: var(--text-soft); font-size: 15px; margin: 4px 0 0; }
.lede[b-w1pqy9gzhq] { color: var(--text-dim); font-size: 15px; margin: 0 auto 16px; max-width: 640px; }
@keyframes crest-in-b-w1pqy9gzhq { from { opacity: 0; transform: translateY(-8px) scale(.8); } to { opacity: 1; transform: none; } }

/* плашка «вернуться в незаконченную партию» */
.resume-bar[b-w1pqy9gzhq] { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
              max-width: 640px; margin: 0 auto 18px; padding: 12px 18px; border-radius: 14px;
              background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 0 14px #e3bd4f33;
              color: var(--text-dim); font-size: 15px; }

/* табы режима */
.mode-tabs[b-w1pqy9gzhq] { display: flex; gap: 12px; justify-content: center; margin: 0 auto 18px; max-width: 900px; }
.tab[b-w1pqy9gzhq] { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel2);
       border: 2px solid var(--border); border-radius: 14px; padding: 12px 16px; color: var(--text); cursor: pointer; transition: .15s; }
.tab:hover[b-w1pqy9gzhq] { border-color: var(--border2); transform: translateY(-1px); }
.tab.on[b-w1pqy9gzhq] { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px #0006; }
.tab .tab-ico[b-w1pqy9gzhq] { font-size: 26px; line-height: 1; opacity: .85; }
.tab .tab-t[b-w1pqy9gzhq] { display: flex; flex-direction: column; }
.tab .tab-t b[b-w1pqy9gzhq] { font-size: 15px; }
.tab .tab-t em[b-w1pqy9gzhq] { font-style: normal; font-size: 12px; color: var(--text-soft); }

/* интро живого драфта */
.draft-intro[b-w1pqy9gzhq] { max-width: 560px; margin: 0 auto 8px; }
.rules[b-w1pqy9gzhq] { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.rules li[b-w1pqy9gzhq] { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text-dim); display: flex; gap: 10px; align-items: center; }
.rules .r-ico[b-w1pqy9gzhq] { font-size: 20px; }

/* ===== жребий стороны (волк/ворон) ===== */
.roll[b-w1pqy9gzhq] { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 30px 0 12px; min-height: 360px; justify-content: center; }
.coin[b-w1pqy9gzhq] { width: 168px; height: 168px; position: relative; transform-style: preserve-3d; }
.coin .coin-face[b-w1pqy9gzhq] { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 50%; box-shadow: 0 10px 30px #000a; }
.coin .coin-face img[b-w1pqy9gzhq] { width: 100%; height: 100%; border-radius: 50%; display: block; }
.coin .f-crow[b-w1pqy9gzhq] { transform: rotateY(180deg); }
/* спин: волк = чётное число полуоборотов (лицо), ворон = нечётное (оборот) */
.coin.to-wolf[b-w1pqy9gzhq] { animation: flip-wolf-b-w1pqy9gzhq 2s cubic-bezier(.2,.7,.2,1) forwards; }
.coin.to-crow[b-w1pqy9gzhq] { animation: flip-crow-b-w1pqy9gzhq 2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes flip-wolf-b-w1pqy9gzhq { 0% { transform: rotateY(0) scale(.7); } 80% { transform: rotateY(1980deg) scale(1.08); } 100% { transform: rotateY(1800deg) scale(1); } }
@keyframes flip-crow-b-w1pqy9gzhq { 0% { transform: rotateY(0) scale(.7); } 80% { transform: rotateY(2160deg) scale(1.08); } 100% { transform: rotateY(1980deg) scale(1); } }
.roll-result[b-w1pqy9gzhq] { animation: roll-text-in-b-w1pqy9gzhq .5s ease both; animation-delay: 1.7s; opacity: 0; }
.roll-result h2[b-w1pqy9gzhq] { font-size: 28px; margin: 0 0 6px; }
.roll-result .s-wolf[b-w1pqy9gzhq] { color: #e3bd4f; }
.roll-result .s-crow[b-w1pqy9gzhq] { color: #cfd6db; }
.roll-init[b-w1pqy9gzhq] { color: var(--text-dim); font-size: 16px; margin: 0; }
.roll-sub[b-w1pqy9gzhq] { color: var(--text-soft); font-size: 14px; margin: 6px 0 0; }
@keyframes roll-text-in-b-w1pqy9gzhq { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== живой драфт ===== */
.draft[b-w1pqy9gzhq] { max-width: 980px; margin: 6px auto 0;
         --me-ring: #e3bd4f; --foe-ring: #cfd6db; }
.draft.human-crow[b-w1pqy9gzhq] { --me-ring: #cfd6db; --foe-ring: #e3bd4f; }
.draft-status[b-w1pqy9gzhq] { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14px; }
.ds-side[b-w1pqy9gzhq] { font-weight: 700; padding: 3px 12px; border-radius: 10px; }
.ds-side.s-wolf[b-w1pqy9gzhq] { color: #2a210e; background: linear-gradient(180deg, #f0d066, #c9a23e); }
.ds-side.s-crow[b-w1pqy9gzhq] { color: #11181d; background: linear-gradient(180deg, #cdd6dd, #9aa7b1); }
.ds-turn[b-w1pqy9gzhq] { font-weight: 700; padding: 3px 12px; border-radius: 10px; border: 1px solid var(--border2); }
.ds-turn.you[b-w1pqy9gzhq] { color: #6dc472; border-color: #2f7d3288; box-shadow: 0 0 12px #2f7d3244; }
.ds-turn.bot[b-w1pqy9gzhq] { color: var(--text-soft); }
.ds-turn.done[b-w1pqy9gzhq] { color: var(--accent); border-color: var(--accent); }
.ds-bag[b-w1pqy9gzhq] { color: var(--text-soft); }

.draft-arena[b-w1pqy9gzhq] { display: grid; grid-template-columns: 1fr minmax(280px, 1.4fr) 1fr; gap: 16px; align-items: stretch; }
.draft-rail[b-w1pqy9gzhq] { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.draft-rail.mine[b-w1pqy9gzhq] { border-color: var(--me-bd); }
.draft-rail.bot[b-w1pqy9gzhq] { border-color: var(--foe-bd); }
.rail-h[b-w1pqy9gzhq] { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.rail-h em[b-w1pqy9gzhq] { font-style: normal; font-weight: 700; color: var(--accent); float: right; }
.rail-coins[b-w1pqy9gzhq] { display: flex; flex-direction: column; gap: 8px; }
.dcoin[b-w1pqy9gzhq] { display: flex; align-items: center; gap: 8px; height: 46px; border-radius: 10px; }
.dcoin.slot[b-w1pqy9gzhq] { border: 2px dashed var(--border2); opacity: .5; }
.dcoin.filled[b-w1pqy9gzhq] { background: var(--panel2); border: 1px solid var(--border2); padding: 0 10px; animation: dcoin-in-b-w1pqy9gzhq .3s ease both; }
.dcoin.filled img[b-w1pqy9gzhq] { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 3px var(--me-ring); }
.dcoin.filled.foe img[b-w1pqy9gzhq] { box-shadow: 0 0 0 3px var(--foe-ring); }
@keyframes dcoin-in-b-w1pqy9gzhq { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.draft-pool[b-w1pqy9gzhq] { background: var(--panel2); border: 1px solid var(--border2); border-radius: 16px; padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 220px; box-shadow: inset 0 0 40px #0006; }
.pool-revealed[b-w1pqy9gzhq] { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.draftcoin[b-w1pqy9gzhq] { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; padding: 14px 8px; background: var(--panel); border: 2px solid var(--border2); border-radius: 14px; color: var(--text); cursor: pointer; transition: .14s; animation: dcoin-in-b-w1pqy9gzhq .3s ease both; }
.draftcoin img[b-w1pqy9gzhq] { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 2px 8px #0008; transition: transform .14s; }
.draftcoin .dc-name[b-w1pqy9gzhq] { font-size: 13px; font-weight: 600; }
.draftcoin .dc-cnt[b-w1pqy9gzhq] { font-size: 11px; color: var(--text-soft); }
.draftcoin:hover:not(.locked)[b-w1pqy9gzhq] { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 20px #0007; }
.draftcoin:hover:not(.locked) img[b-w1pqy9gzhq] { transform: scale(1.06); }
.draftcoin.locked[b-w1pqy9gzhq] { opacity: .55; cursor: default; }
.pool-done[b-w1pqy9gzhq] { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pool-done .done-x[b-w1pqy9gzhq] { font-size: 46px; filter: drop-shadow(0 0 12px #e3bd4f88); }
/* /Components/Pages/Lobby.razor.rz.scp.css */
.lobby[b-7doc1dtyh5] { max-width: 900px; margin: 26px auto; padding: 0 16px; color: var(--text); font-family: system-ui, sans-serif; }
.lobby h1[b-7doc1dtyh5] { text-align: center; font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 0 0 4px;
            background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a);
            -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub[b-7doc1dtyh5] { text-align: center; color: var(--text-dim); margin: 0 0 22px; }

.mine-bar[b-7doc1dtyh5] { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
            margin: 0 auto 18px; padding: 12px 18px; border-radius: 14px; max-width: 560px;
            background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 0 14px #e3bd4f33;
            color: var(--text-dim); font-size: 15px; }

.cols[b-7doc1dtyh5] { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .cols[b-7doc1dtyh5] { grid-template-columns: 1fr; } }

.panel[b-7doc1dtyh5] { background: var(--panel); border: 1px solid var(--border2); border-radius: 14px; padding: 16px 18px;
         display: flex; flex-direction: column; gap: 12px; }
.panel h2[b-7doc1dtyh5] { font-size: 16px; color: var(--text-dim); margin: 0; text-transform: uppercase; letter-spacing: .5px; }
.panel label[b-7doc1dtyh5] { color: var(--text-dim); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.panel select[b-7doc1dtyh5] { padding: 6px 8px; border-radius: 8px; background: var(--panel2); color: var(--text); border: 1px solid var(--border2); flex: 1; }

.joinrow[b-7doc1dtyh5] { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.joinrow input[b-7doc1dtyh5] { padding: 8px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--border2);
                 color: var(--text); font-size: 18px; letter-spacing: 4px; text-align: center; }
.joinrow input:focus[b-7doc1dtyh5] { outline: none; border-color: var(--accent); }
.err[b-7doc1dtyh5] { color: #e08a7a; font-size: 13px; }

.empty[b-7doc1dtyh5] { color: var(--text-soft); text-align: center; padding: 26px 0; line-height: 1.6; }
.games[b-7doc1dtyh5] { display: flex; flex-direction: column; gap: 8px; }
.game-row[b-7doc1dtyh5] { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--border);
            border-radius: 10px; padding: 8px 12px; }
.game-row .host[b-7doc1dtyh5] { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-row .rs[b-7doc1dtyh5] { color: var(--text-soft); font-size: 12px; }
.game-row .age[b-7doc1dtyh5] { color: var(--text-soft); font-size: 12px; }
.game-row[b-7doc1dtyh5]  button.sm, .game-row button.sm[b-7doc1dtyh5] { padding: 6px 12px; font-size: 13px; }
/* /Components/Pages/PvpGame.razor.rz.scp.css */
.pvp-center[b-j5asbo0qdp] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
              min-height: 50vh; color: var(--text); font-family: system-ui, sans-serif; text-align: center; padding: 20px; }
.pvp-center h2[b-j5asbo0qdp] { font-size: 28px; margin: 0; }
.pvp-center p[b-j5asbo0qdp] { color: var(--text-dim); margin: 0; }

.code-card[b-j5asbo0qdp] { display: flex; flex-direction: column; align-items: center; gap: 6px;
             background: var(--panel); border: 1px solid var(--border2); border-radius: 16px; padding: 18px 34px; }
.code-lbl[b-j5asbo0qdp] { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.code[b-j5asbo0qdp] { font-size: 44px; font-weight: 800; letter-spacing: 10px; color: var(--accent);
        text-shadow: 0 2px 14px #e3bd4f55; padding-left: 10px; }
.code-hint[b-j5asbo0qdp] { font-size: 13px; color: var(--text-dim); max-width: 300px; }

.pvp-pick[b-j5asbo0qdp] { max-width: 1100px; margin: 22px auto; padding: 0 16px 20px; color: var(--text);
            font-family: system-ui, sans-serif; text-align: center; }
.pvp-pick h2[b-j5asbo0qdp] { font-size: clamp(26px, 4vw, 34px); font-weight: 800; margin: 0 0 4px;
               background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a);
               -webkit-background-clip: text; background-clip: text; color: transparent; }
.pvp-pick .sub[b-j5asbo0qdp] { color: var(--text-dim); margin: 0 0 14px; }

.pick-status[b-j5asbo0qdp] { display: flex; justify-content: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ps[b-j5asbo0qdp] { font-size: 14px; font-weight: 700; padding: 4px 14px; border-radius: 10px;
      border: 1px solid var(--border2); color: var(--text-dim); }
.ps.done[b-j5asbo0qdp] { color: #6dc472; border-color: #2f7d3288; box-shadow: 0 0 10px #2f7d3244; }
/* /Components/Pages/Replays.razor.rz.scp.css */
.replays[b-wtl6y68csh] { max-width: 900px; margin: 26px auto; padding: 0 16px; color: var(--text); font-family: system-ui, sans-serif; }
.replays h1[b-wtl6y68csh] { text-align: center; font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 0 0 4px;
              background: linear-gradient(180deg, #ffe7a3, var(--accent) 60%, #a9802a);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub[b-wtl6y68csh] { text-align: center; color: var(--text-dim); margin: 0 0 18px; }

.tabs[b-wtl6y68csh] { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.tab-btn[b-wtl6y68csh] { background: var(--panel2); border: 1px solid var(--border2); color: var(--text-dim);
           border-radius: 10px; padding: 6px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tab-btn.on[b-wtl6y68csh] { border-color: var(--accent); color: var(--accent); background: var(--panel); }

.rp-center[b-wtl6y68csh] { display: flex; justify-content: center; padding: 40px 0; }
.empty[b-wtl6y68csh] { color: var(--text-soft); text-align: center; padding: 40px 0; line-height: 1.7; }

.list[b-wtl6y68csh] { display: flex; flex-direction: column; gap: 8px; }
.row[b-wtl6y68csh] { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--border);
       border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: .12s; }
.row:hover[b-wtl6y68csh] { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px #0006; }
.date[b-wtl6y68csh] { color: var(--text-soft); font-size: 12px; min-width: 78px; }
.players[b-wtl6y68csh] { flex: 1; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.players b[b-wtl6y68csh] { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players b.win[b-wtl6y68csh] { color: var(--accent); }
.players b.win[b-wtl6y68csh]::after { content: " 🏆"; }
.players img[b-wtl6y68csh] { width: 20px; height: 20px; border-radius: 50%; }
.players i[b-wtl6y68csh] { color: var(--text-soft); font-style: normal; font-size: 12px; }
.mode[b-wtl6y68csh] { color: var(--text-dim); font-size: 12px; min-width: 74px; }
.rs[b-wtl6y68csh] { color: var(--text-soft); font-size: 12px; min-width: 66px; }
.plies[b-wtl6y68csh] { color: var(--text-soft); font-size: 12px; min-width: 70px; }
.more[b-wtl6y68csh] { display: flex; justify-content: center; margin-top: 14px; }
/* /Components/Pages/ReplayView.razor.rz.scp.css */
.rv-center[b-kv9to3bwgf] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
             min-height: 50vh; color: var(--text); font-family: system-ui, sans-serif; }

.rv[b-kv9to3bwgf] { outline: none; }

/* ===== шапка: игроки и итог ===== */
.rv-head[b-kv9to3bwgf] { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
           padding: 10px 0 4px; font-size: 17px; }
.rv-p[b-kv9to3bwgf] { font-weight: 700; display: flex; align-items: center; gap: 7px; }
.rv-p i[b-kv9to3bwgf] { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rv-p .dotm[b-kv9to3bwgf], .rv-p i.dotm[b-kv9to3bwgf] { background: var(--me-ring); box-shadow: 0 0 6px var(--me-ring); }
.rv-p .dotf[b-kv9to3bwgf], .rv-p i.dotf[b-kv9to3bwgf] { background: var(--foe-ring); box-shadow: 0 0 6px var(--foe-ring); }
.rv-vs[b-kv9to3bwgf] { color: var(--accent); }
.rv-res[b-kv9to3bwgf] { color: var(--accent); font-weight: 700; padding: 2px 12px; border: 1px solid var(--border2); border-radius: 10px; }
.rv-meta[b-kv9to3bwgf] { color: var(--text-soft); font-size: 13px; }

/* ===== градусник оценки ===== */
.evalbar[b-kv9to3bwgf] { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }
.eb-mk[b-kv9to3bwgf] { width: 26px; height: 26px; border-radius: 50%; filter: drop-shadow(0 1px 3px #000a); }
.eb-track[b-kv9to3bwgf] { position: relative; width: 26px; flex: 1 1 auto; min-height: 200px; border-radius: 13px; overflow: hidden;
            border: 1px solid var(--border2); background: var(--panel2); display: flex; flex-direction: column;
            box-shadow: inset 0 0 10px #0007; }
.eb-foe[b-kv9to3bwgf] { background: linear-gradient(180deg, color-mix(in srgb, var(--foe-ring) 88%, #000), var(--foe-ring));
          transition: height .25s ease; }
.eb-gap[b-kv9to3bwgf] { height: 2px; background: var(--bg); flex: 0 0 2px; }   /* зазор между долями (mark spec) */
.eb-me[b-kv9to3bwgf] { background: linear-gradient(180deg, var(--me-ring), color-mix(in srgb, var(--me-ring) 80%, #000));
         transition: height .25s ease; flex: 1 1 auto; }
.eb-val[b-kv9to3bwgf] { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800;
          padding: 1px 3px; border-radius: 6px; background: #1c1812cc; color: var(--text); pointer-events: none; }
.eb-val.on-me[b-kv9to3bwgf] { bottom: 4px; }
.eb-val.on-foe[b-kv9to3bwgf] { top: 4px; }

/* ===== управление ===== */
.rv-side[b-kv9to3bwgf] { gap: 8px; }
.rv-controls[b-kv9to3bwgf] { display: flex; gap: 6px; justify-content: center; }
.rv-controls[b-kv9to3bwgf]  button, .rv-controls button[b-kv9to3bwgf] { font-size: 15px; padding: 6px 10px; }
.rv-controls .play[b-kv9to3bwgf] { border-color: var(--accent); color: var(--accent); min-width: 44px; }
.rv-slider[b-kv9to3bwgf] { width: 100%; accent-color: var(--accent); }
.rv-pos[b-kv9to3bwgf] { text-align: center; color: var(--text-soft); font-size: 12px; }

.rv-moves[b-kv9to3bwgf] { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 6px 8px;
            flex: 1 1 auto; overflow-y: auto; min-height: 120px; max-height: calc(100vh - 420px);
            display: flex; flex-direction: column-reverse; gap: 2px; }
.rv-move[b-kv9to3bwgf] { font-size: 12px; color: var(--text); padding: 3px 6px; border-radius: 6px; cursor: pointer;
           border-left: 3px solid transparent; }
.rv-move:hover[b-kv9to3bwgf] { background: var(--panel2); }
.rv-move.s-me[b-kv9to3bwgf] { border-left-color: var(--me-ring); }
.rv-move.s-foe[b-kv9to3bwgf] { border-left-color: var(--foe-ring); }
.rv-move.cur[b-kv9to3bwgf] { background: var(--panel2); box-shadow: 0 0 0 1px var(--accent); }
.rv-move .no[b-kv9to3bwgf] { color: var(--text-soft); }
.rv-move .ev[b-kv9to3bwgf] { float: right; font-size: 11px; color: var(--text-soft); }

/* ===== график оценки ===== */
.rv-chart[b-kv9to3bwgf] { margin: 12px auto 4px; max-width: 1100px; background: var(--panel); border: 1px solid var(--border);
            border-radius: 12px; padding: 10px 12px 4px; }
.rv-chart svg[b-kv9to3bwgf] { width: 100%; height: 140px; display: block; }
.rv-chart .area-me[b-kv9to3bwgf] { fill: var(--me-ring); opacity: .3; }
.rv-chart .area-foe[b-kv9to3bwgf] { fill: var(--foe-ring); opacity: .3; }
.rv-chart .mid[b-kv9to3bwgf] { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 4 4; }
.rv-chart .line[b-kv9to3bwgf] { fill: none; stroke: var(--text-soft); stroke-width: 2; vector-effect: non-scaling-stroke;
                  stroke-linejoin: round; stroke-linecap: round; }
.rv-chart .cursor[b-kv9to3bwgf] { stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rv-chart .dot[b-kv9to3bwgf] { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.rv-chart .hit[b-kv9to3bwgf] { fill: transparent; cursor: pointer; }
.rv-chart-cap[b-kv9to3bwgf] { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-soft); padding: 4px 2px; }
.rv-chart-cap .cme[b-kv9to3bwgf] { color: var(--text-dim); }
.rv-chart-cap .cfoe[b-kv9to3bwgf] { color: var(--text-soft); }

/* ===== полосы полного состояния в реплее ===== */
.rv-strip[b-kv9to3bwgf] { margin: 4px 0; }
.rv-strip .none[b-kv9to3bwgf] { color: var(--text-soft); font-size: 12px; align-self: center; }

/* ===== разбор движком (кнопка/прогресс) ===== */
.rv-analyze[b-kv9to3bwgf] { display: flex; align-items: center; justify-content: center; min-height: 30px; }
.an-btn[b-kv9to3bwgf] { font-size: 13px; }
.an-done[b-kv9to3bwgf] { color: #6ad07a; font-size: 12px; font-weight: 600; }
.an-fail[b-kv9to3bwgf] { color: #e88; font-size: 12px; margin-left: 8px; }
.an-prog[b-kv9to3bwgf] { width: 100%; display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; color: var(--text-soft); }
.an-bar[b-kv9to3bwgf] { width: 100%; height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; border: 1px solid var(--border2); }
.an-bar div[b-kv9to3bwgf] { height: 100%; background: var(--accent); transition: width .3s ease; }

/* ===== метки качества хода (шахматная нотация) ===== */
.rv-move .q[b-kv9to3bwgf] { float: right; font-weight: 800; font-size: 12px; margin-left: 4px; padding: 0 4px; border-radius: 5px; }
.q-brill[b-kv9to3bwgf] { color: #17130b; background: #26c6a6; }         /* !! */
.q-great[b-kv9to3bwgf] { color: #6ad07a; }                              /* !  */
.q-inacc[b-kv9to3bwgf] { color: #d6b23c; }                              /* ?! */
.q-mist[b-kv9to3bwgf]  { color: #e08a2f; }                              /* ?  */
.q-blun[b-kv9to3bwgf]  { color: #fff; background: #e24a4a; }            /* ?? */
.rv-better[b-kv9to3bwgf] { clear: both; font-size: 11px; color: var(--text-soft); padding-top: 3px; }
.rv-better b[b-kv9to3bwgf] { color: var(--accent); }

/* рекомендованный движком ход (для текущей ошибочной позиции) */
.hex.best[b-kv9to3bwgf] { filter: drop-shadow(0 0 7px #26c6a6) brightness(1.05); }

/* ===== дельта рейтинга в шапке реплея ===== */
.rv-elo[b-kv9to3bwgf] { font-size: 12px; font-weight: 700; margin-left: 6px; padding: 1px 6px; border-radius: 7px;
          background: var(--panel2); border: 1px solid var(--border2); }
.rv-elo em[b-kv9to3bwgf] { font-style: normal; }
.rv-elo.up em[b-kv9to3bwgf] { color: #6ad07a; }
.rv-elo.down em[b-kv9to3bwgf] { color: #e88; }
/* /Components/Shared/WcLoader.razor.rz.scp.css */
/* ===== лоадер «вращающаяся монета» =====
   Размер задаётся через inline-переменную --wc-size (параметр Size компонента). */

.wc-loader[b-282xa228oq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* полноразмерный затемняющий оверлей (как .overlay на игровом экране) */
.wc-loader.overlay[b-282xa228oq] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 5;
    color: #e8dcc0; /* фон всегда тёмный — текст всегда светлый */
}

/* ---- монета ---- */

/* неподвижная обёртка: перспектива для 3D, свечение и тень на «земле» */
.wc-coin[b-282xa228oq] {
    position: relative;
    width: var(--wc-size, 64px);
    height: var(--wc-size, 64px);
    perspective: calc(var(--wc-size, 64px) * 5);
}

/* золотое свечение — пульсирует в такт подбрасыванию */
.wc-coin[b-282xa228oq]::after {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    pointer-events: none;
    animation: wc-ldr-glow-b-282xa228oq 1.2s ease-in-out infinite;
}

/* тень под монетой: сжимается и бледнеет, когда монета «в воздухе» */
.wc-coin[b-282xa228oq]::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: calc(var(--wc-size, 64px) * -0.2);
    height: calc(var(--wc-size, 64px) * 0.12);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
    animation: wc-ldr-shadow-b-282xa228oq 1.2s ease-in-out infinite;
}

/* вращающийся диск: rotateY + лёгкое подпрыгивание одним transform-ом */
.wc-coin-inner[b-282xa228oq] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: wc-ldr-flip-b-282xa228oq 1.2s ease-in-out infinite;
    /* фоллбэк-«золото», если png ещё не подъехал */
    background: radial-gradient(circle at 35% 30%, #f0d066, #8a6a26 70%, #5a4419);
}

.wc-coin-inner img[b-282xa228oq] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* блик по краю монеты */
.wc-gloss[b-282xa228oq] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, .38) 0%,
        rgba(255, 255, 255, .10) 32%,
        rgba(255, 255, 255, 0) 55%);
}

/* ---- подпись ---- */

.wc-caption[b-282xa228oq] {
    color: var(--text-dim, #c9b88c);
    font-size: 14px;
    text-align: center;
    max-width: 280px;
}

.wc-loader.overlay .wc-caption[b-282xa228oq] {
    color: #e8dcc0;
    font-size: 16px;
}

/* многоточие: точки загораются по очереди */
.wc-dots[b-282xa228oq] {
    letter-spacing: 1px;
}

.wc-dots i[b-282xa228oq] {
    font-style: normal;
    opacity: .15;
    animation: wc-ldr-dot-b-282xa228oq 1.2s ease-in-out infinite;
}

.wc-dots i:nth-child(2)[b-282xa228oq] { animation-delay: .2s; }
.wc-dots i:nth-child(3)[b-282xa228oq] { animation-delay: .4s; }

/* ---- анимации ----
   ВАЖНО: keyframes в scoped-css попадают в общий бандл без переименования,
   поэтому имена с уникальным префиксом wc-ldr-. */

@keyframes wc-ldr-flip-b-282xa228oq {
    0%   { transform: translateY(0) rotateY(0deg); }
    50%  { transform: translateY(calc(var(--wc-size, 64px) * -0.11)) rotateY(180deg); }
    100% { transform: translateY(0) rotateY(360deg); }
}

@keyframes wc-ldr-glow-b-282xa228oq {
    0%, 100% { box-shadow: 0 0 calc(var(--wc-size, 64px) * .16) color-mix(in srgb, var(--accent, #e3bd4f) 40%, transparent); }
    50%      { box-shadow: 0 0 calc(var(--wc-size, 64px) * .34) color-mix(in srgb, var(--accent, #e3bd4f) 70%, transparent); }
}

@keyframes wc-ldr-shadow-b-282xa228oq {
    0%, 100% { transform: scaleX(1); opacity: .8; }
    50%      { transform: scaleX(.72); opacity: .35; }
}

@keyframes wc-ldr-dot-b-282xa228oq {
    0%, 10%  { opacity: .15; }
    40%, 70% { opacity: 1; }
    100%     { opacity: .15; }
}

/* уважение к prefers-reduced-motion: монета не крутится, только мягко мерцает */
@media (prefers-reduced-motion: reduce) {
    .wc-coin-inner[b-282xa228oq],
    .wc-coin[b-282xa228oq]::before {
        animation: none;
    }
    .wc-coin[b-282xa228oq]::after {
        animation-duration: 2.4s;
    }
}