* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: math;
}
a { text-decoration: none; }
html, body {
    min-height: 100%;
}

body {
    background: #eef3ff;
    color: #1b1f2a;
}

.page {
    padding-top: 130px; /* высота player-status */
    min-height: 100vh;
}

.container {
     margin: 0 auto; padding: 0 16px; 
}
/* --- TG MENU --- */
.tg-menu {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 9998;
}
.tg-main-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #2CA6E0, #1E90D9);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .25s ease;
}

.tg-main-btn img {
    width: 34px;
    height: 34px;
}

.tg-main-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}

.tg-items {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.tg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    text-decoration: none;
    transition: all .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tg-bubble {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.tg-item span {
    background: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.tg-menu.active .tg-item {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tg-menu.active .tg-item:nth-child(1) { transition-delay: .05s; }
.tg-menu.active .tg-item:nth-child(2) { transition-delay: .12s; }
.tg-menu.active .tg-item:nth-child(3) { transition-delay: .18s; }

.tg-item:hover .tg-bubble {
    transform: scale(1.1);
    background: #f7f7f7;
}

.tg-item:hover span {
    transform: translateX(-5px);
    background: #f0f0f0;
}

#online-badge {
    
    box-sizing: border-box;
    background-color: #fff;
    color: #608ab9;
    width: 74px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 2px solid #608ab9;
    opacity: 0.8;
    border-bottom: none;
    position: fixed;
    z-index: 998;
    right: -21px;
    top: 270px;
    border-radius: 12px 12px 0 0;
    cursor: help;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
}

#online-badge span {
    display: inline-block;
    transform: rotate(360deg);
    font-size: 14px;
}
.topbar {
    background: #ffffff;
    border-bottom: 1px solid #e8ecf7;
    position: relative;   /* было sticky */
    top: auto;            /* можно вообще убрать */
    z-index: 50;
}

.topbar .container {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { font-size: 18px; }
.brand-name { font-weight: 800; letter-spacing: .5px; color: #1b1f2a; font-size: 18px; }

.nav { display: flex; gap: 14px; margin-left: 10px; flex: 1; flex-wrap: wrap; }
.nav-link {
    color: #5b6478;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: .15s;
}
.nav-link:hover { background: #f2f6ff; color: #1b1f2a; }
.nav-link.active { background: #eaf2ff; color: #1b1f2a; }

.auth-buttons { display: flex; gap: 10px; }

.btn-sm {
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    transition: .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-outline { border: 1px solid #d7def2; color: #1b1f2a; background: #fff; }
.btn-outline:hover { background: #f2f6ff; }
.btn-solid { background: #2f8f46; color: #fff; border: 1px solid #2f8f46; }
.btn-solid:hover { background: #2a813f; }

.page {
    padding: 20px 17px 5px;
}
@media (max-width: 768px) {
    .page {
        padding: 20px 0px 32px;
    }
}


.hero {
    background: linear-gradient(135deg, #2f8f46, #1f6f36);
    border-radius: 16px;
    padding: 26px 22px;
    color: #fff;
    box-shadow: 0 12px 30px rgba(14, 24, 40, .18);
    margin-bottom: 18px;
}
.hero-title { font-size: 26px; font-weight: 900; letter-spacing: .6px; }
.hero-title span { color: #ffe08a; }
.hero-sub { opacity: .92; margin-top: 8px; font-size: 14px; }

.panel {
    background: #ffffff;
    border: 1px solid #e8ecf7;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(14, 24, 40, .06);
    margin-bottom: 16px;
}

.panel-title {
    text-align: center;
    font-weight: 900;
    color: #2f8f46;
    letter-spacing: .8px;
    margin-bottom: 14px;
}
.panel-title.orange { color: #d96b00; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    border: 1px solid #e8ecf7;
    border-radius: 14px;
    padding: 14px 14px;
    background: #fbfcff;
}

.stat-top { display: flex; gap: 8px; align-items: center; color: #5b6478; font-size: 13px; }
.stat-top .ico { font-size: 16px; }

.stat-val { margin-top: 10px; font-size: 24px; font-weight: 900; color: #1b1f2a; }
.unit { font-size: 14px; color: #5b6478; font-weight: 700; margin-left: 4px; }

.workline { padding-top: 6px; border-top: 1px dashed #e2e8fb; }
.workline-title { text-align: center; font-weight: 900; color: #1b1f2a; margin: 14px 0 12px; letter-spacing: .8px; }

.timer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.timer-box {
    border: 1px solid #e8ecf7;
    border-radius: 14px;
    padding: 12px 10px;
    background: #fbfcff;
    text-align: center;
}
.t-num { font-size: 22px; font-weight: 900; color: #2f8f46; }
.t-lbl { font-size: 12px; color: #5b6478; margin-top: 4px; }

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

.feature {
    border: 1px solid #e8ecf7;
    border-radius: 14px;
    padding: 14px;
    background: #fbfcff;
}
.f-head { font-weight: 900; color: #1b1f2a; display: flex; gap: 10px; align-items: center; }
.f-ico { font-size: 16px; }
.f-text { margin-top: 8px; color: #5b6478; font-size: 13px; line-height: 1.35; }

.bonus-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.bonus-item {
    border: 1px solid #e8ecf7;
    border-radius: 14px;
    padding: 12px 10px;
    background: #fbfcff;
    text-align: center;
}
.bonus-pic { font-size: 22px; }
.bonus-name { margin-top: 8px; font-size: 12px; color: #1b1f2a; font-weight: 800; }

.cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.btn-lg {
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 20px;
    font-weight: 900;
    transition: .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.site-footer {
    margin-top: 10px;
    padding: 18px 0 26px;
}
.footer-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.muted { color: #7a859d; font-size: 13px; }

/* Адаптация */
@media (max-width: 1000px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .timer-grid { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .bonus-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
    .nav { display: none; } /* на телефоне меню спрячем, потом сделаем бургер */
    .timer-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: 1fr; }
    .bonus-row { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: 20px; }
}

.site-footer {
    margin-top:40px;
    padding:20px 0;
    background:#0f0f0f;
    border-top:1px solid rgba(255,255,255,0.05);
}

.site-footer .muted {
    color:#888;
    font-size:13px;
}

.footer-link {
    color:#aaa;
    text-decoration:none;
    transition:color .2s;
}

.footer-link:hover {
    color:#fff;
}

/* ===== 404 PAGE ===== */

.error404-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, #1f2937, #0b1220);
    padding: 20px;
}

.error404-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 40px 30px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.error404-code {
    font-size: 96px;
    font-weight: 900;
    line-height: 1;
    color: #ff4d4d;
    text-shadow: 0 0 20px rgba(255,77,77,0.4);
    margin-bottom: 10px;
}

.error404-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.error404-text {
    font-size: 15px;
    color: #cbd5e1;
    line-height: 1.4;
    margin-bottom: 18px;
}

.error404-timer {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 22px;
}

.error404-btn {
    width: 100%;
    padding: 12px;
}


/* ===== AUTH ===== */
.auth-panel {
    max-width: 420px;
    margin: 0 auto;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.form-row label {
    font-size: 13px;
    color: #5b6478;
    font-weight: 700;
}

.form-row input {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d7def2;
    font-size: 14px;
}

.form-row input:focus {
    outline: none;
    border-color: #2f8f46;
}

.btn-lg.full {
    width: 100%;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
}

.auth-links a {
    color: #2f8f46;
    font-weight: 700;
}
/* ===== NOTIFY (NOTY) ===== */
.noty_theme__mint.noty_type__success {
    background: #2f8f46;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(47,143,70,.35);
}

.noty_theme__mint.noty_type__error {
    background: #d64545;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(214,69,69,.35);
}

.noty_theme__mint.noty_type__warning {
    background: #f0ad4e;
    color: #fff;
}

.noty_body {
    font-size: 14px;
    padding: 12px 14px;
}
.noty_theme__mint.noty_type__info {
    background: #fff2e0;              /* светло-оранжевый фон */
    color: #7a4a00;                   /* тёплый тёмный текст */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(255,180,90,.35);
}

/* ===== ЛИЧНЫЙ КАБИНЕТ ===== */
.lk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.lk-card {
    background: #fbfcff;
    border: 1px solid #e8ecf7;
    border-radius: 14px;
    padding: 16px;
}

.lk-label {
    font-size: 13px;
    color: #5b6478;
    font-weight: 700;
}

.lk-value {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 900;
    color: #1b1f2a;
}

.lk-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

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

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

.page-title {
    font-size: 32px;
    margin-bottom: 5px;
}

.page-subtitle {
    color: #777;
    margin-bottom: 30px;
}

.news-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.07);
    
    
}

.news-date {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
}

.load-more-wrap {
    text-align: center;
    margin: 40px 0;
}

.btn-primary {
    padding: 14px 34px;
    border-radius: 30px;
    border: none;
    background: #4CAF50;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: .2s;
}

.btn-primary:hover {
    background: #43a047;
}

.btn-primary:disabled {
    background: #ccc;
    cursor: default;
}
.top-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.top-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    padding: 16px 22px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    transition: .15s;
}

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

.top-card.me {
    border: 2px solid #4CAF50;
}

.top-card.top-1 { background: linear-gradient(90deg,#fff7d6,#fff); }
.top-card.top-2 { background: linear-gradient(90deg,#f3f3f3,#fff); }
.top-card.top-3 { background: linear-gradient(90deg,#f9eadf,#fff); }

.top-place {
    width: 40px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.top-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.top-ava {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.top-name a {
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.vip {
    background: gold;
    color: #000;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
}

.online-dot {
    width: 9px;
    height: 9px;
    background: #4CAF50;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
}

.top-stats {
    display: flex;
    gap: 24px;
    text-align: right;
}

.top-stats span {
    font-size: 12px;
    color: #888;
    display: block;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    transition: .15s;
}

.contact-card:hover {
    transform: translateY(-3px);
}

.contact-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.contact-card h3 {
    margin: 10px 0 6px;
}

.contact-card p {
    color: #777;
    font-size: 14px;
    margin-bottom: 16px;
}

.btn-outline {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid #4CAF50;
    color: #4CAF50;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}

.btn-outline:hover {
    background: #4CAF50;
    color: #fff;
}

.contact-footer {
    margin-top: 40px;
    text-align: center;
}

.contact-footer .muted {
    color: #999;
    font-size: 13px;
    margin-top: 6px;
}
.withdraw-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.withdraw-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

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

.withdraw-user a {
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.withdraw-level {
    font-size: 13px;
    color: #777;
    margin-top: 2px;
}

.withdraw-info {
    text-align: right;
}

.withdraw-amount {
    font-size: 18px;
    font-weight: 700;
    color: #4CAF50;
}

.withdraw-meta {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.payment-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-top: -20px;
    margin-right: 10px;
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}
.stats-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    height:340px;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.stats-card.small{ height:320px; }

@media(max-width:900px){
    .stats-grid{ grid-template-columns:1fr; }
}
/* add to /style/style.css (new classes only, no duplicates) */

.nav.nav-game {
    gap: 10px;
}

.gamebar {
    margin-top: 12px;
}

.gamebar-inner {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.gamebar-link {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    color: #333;
    transition: .15s;
    white-space: nowrap;
}

.gamebar-link:hover {
    background: #f3f4f6;
}

@media (max-width: 900px) {
    .gamebar-inner {
        flex-wrap: wrap;
    }
    .gamebar-link {
        flex: 1 1 48%;
    }
}
/* === GAME SIDEBAR === */

.zagons-title {
    font-size: 32px;
    margin-bottom: 10px;
}

.zagons-desc {
    color: #777;
    margin-bottom: 30px;
    font-size: 15px;
}

.zagons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.zagon-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 15px;
    text-decoration: none;
    color: #222;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.zagon-count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}


.zagon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.15);
}

.zagon-card img {
    width: 200px;
    height: 135px;
    object-fit: contain;
    margin-bottom: 12px;
}
.zagon-name {
    font-size: 16px;
    font-weight: 600;
}


.game-toggle {
    font-size: 20px;
    border: none;
    background: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
}
.game-sidebar a {
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 600;
    color: #2b2b2b;
    transition: .15s;
}

.game-sidebar a:hover {
    background: #f1f5f9;
}

.game-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
}

/* OPEN STATE */
body.game-open .game-sidebar {
    left: 0;
}
body.game-open .game-overlay {
    opacity: 1;
    pointer-events: auto;
}
/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 768px) {

    .topbar .container.wide {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 10px;
    }

    /* ☰ кнопка */
    .game-toggle {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    /* логотип */
    .brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    /* кнопки профиля */
    .header-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        gap: 10px;
    }

    .header-actions a {
        flex: 1;
        text-align: center;
    }
}
/* ===== MOBILE BUTTON OVERFLOW FIX ===== */
@media (max-width: 768px) {

    .header-actions {
        width: 100%;
        box-sizing: border-box;
    }

    .header-actions a {
        min-width: 0 !important;
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        white-space: nowrap;
    }

    body {
        overflow-x: hidden;
    }
}
/* ===== GAME MENU (auth) ===== */
.gmenu-wrap { position: relative; }

.gmenu-burger{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid #e6edf8;
  background:#fff;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.gmenu-burger svg{ width:22px;height:22px; opacity:.8; }

.gmenu-sidebar{
  position:fixed; top:0; left:0; height:100vh; width:290px;
  background:#ffffff;
  border-right:1px solid #e6edf8;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
  transform: translateX(-105%);
  transition: transform .2s ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
}
.gmenu-sidebar.open{ transform: translateX(0); }

.gmenu-overlay{
  position:fixed; inset:0;
  background: rgba(15, 23, 42, .35);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  z-index: 9998;
}
.gmenu-overlay.open{ opacity:1; pointer-events:auto; }

.gmenu-head{
  padding:18px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #e6edf8;
}
.gmenu-title{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
}
.gmenu-close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid #e6edf8;
  background:#fff;
  cursor:pointer;
}

.gmenu-links{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.gmenu-link{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #eef3fb;
  background:#f8fbff;
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
}
.gmenu-link:hover{ background:#eef6ff; }
.gmenu-link.active{
  background:#eaf4ff;
  border-color:#cfe6ff;
}

.gmenu-foot{ margin-top:auto; padding:12px; border-top:1px solid #e6edf8; }
.gmenu-mini{
  display:flex; gap:10px;
}
.gmenu-mini a{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
}
.gmenu-mini .outline{ border:2px solid #2f8f46; color:#2f8f46; background:#fff; }
.gmenu-mini .solid{ background:#2f8f46; color:#fff; border:2px solid #2f8f46; }

@media (max-width: 980px){
  .gmenu-burger{ display:inline-flex; }
}
/* ===== FIELDS UI ===== */

/* (если где-то остался старый wrapper) */
.field-page{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .field-page{ grid-template-columns: 1fr; }
}

/* cards */
.field-card{
  background:#fff;
  border:1px solid #e6edf8;
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.field-card .hd{
  padding:14px 14px;
  border-bottom:1px solid #e6edf8;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.field-card .hd h3{ margin:0; font-size:16px; }
.field-card .bd{ padding:14px; }

/* ===== SEEDS ===== */
/* desktop: 6 квадратов в ряд */
.field-seeds{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:12px;
}

/* один блок семени */
.field-seed{
  border:1px solid #eef3fb;
  background:#f8fbff;
  border-radius:16px;
  padding:12px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;

  cursor:pointer;
  aspect-ratio: 1 / 1;
}
.field-seed:hover{ background:#eef6ff; }
.field-seed.active {
    border-color: #ff7b0a;
    background: #eaf4ff;
    box-shadow: 0 0 0 2px rgb(234 71 71);
}
.field-seed small {
    display: block;
    opacity: .75;
    /* font-weight: 600; */
}
.field-seed b{ font-weight:800; }

/* правый нижний угол: цена/минуты */
.field-seed > div:last-child{
  align-self:flex-end;
  text-align:right;
}

/* mobile: список вертикально (и НЕ квадратный) */
@media (max-width: 980px){
  .field-seeds{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .field-seed{
    aspect-ratio: auto;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
  }
  .field-seed > div:last-child{
    align-self:center;
    text-align:right;
  }
}

/* ===== FIELDS GRID ===== */
.field-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 520px){
  .field-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field-tile{
  border-radius:16px;
  border:1px solid #e6edf8;
  background:#fff;
  padding:10px;
  min-height:74px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.field-tile:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.field-tile .n{ font-weight:900; font-size:14px; opacity:.85; }
.field-tile .st {
    font-size: 18px;
    opacity: .75;
    font-weight: 700;
    text-align: center;
}

.field-tile.empty{ background: linear-gradient(180deg, #ffffff, #f7fbff); }
.field-tile.grow{ background: linear-gradient(180deg, #fff, #f2fff4); border-color:#d6f4dd; }
.field-tile.ready{ background: linear-gradient(180deg, #ffffff, #fffbe7); border-color:#ffefb5; }
.field-tile.locked{ cursor:not-allowed; opacity:.6; background:#f7f7f7; }

/* =========================
   ПОЛЕ — НЕ КУПЛЕНО
   ========================= */
.field-tile.empty-lock {
    background: #f8fafc; /* светло-серый фон */
    border: 2px dashed #cbd5e1; /* пунктир — визуально "закрыто" */
    opacity: 0.85;
    cursor: pointer;
    transition: all .2s ease;
}

/* текст */
.field-tile.empty-lock .n {
    color: #475569;
    font-weight: 800;
}

.field-tile.empty-lock .st {
    color: #ff5151;
    font-weight: 700;
}
/* кнопка */
.field-tile.empty-lock .field-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-weight: 800;
}

/* hover — аккуратный, не как у купленных */
.field-tile.empty-lock:hover {
    background: #eef2f7;
    border-color: #94a3b8;
}

/* лёгкое подсвечивание кнопки */
.field-tile.empty-lock:hover .field-pill {
    background: #f1f5f9;
}

/* удобрено */
.field-tile.fert{
  background: linear-gradient(180deg, #e6ffe9, #ccf5d6);
  border-color: #6fd18c;
}

.field-tile.fert .field-pill{
  background:#2f8f46;
  color:#fff;
  font-weight:900;
}


.field-pill{
  position:absolute;
  top:10px; right:10px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
  font-weight:800;
}

/* ===== MODAL ===== */
.field-modal-overlay{
  position:fixed; inset:0;
  background: rgba(15, 23, 42, .35);
  display:none;
  align-items:center; justify-content:center;
  z-index: 10000;
  padding:18px;
}
.field-modal-overlay.open{ display:flex; }

.field-modal{
  width: 520px; max-width: 100%;
  background:#fff;
  border-radius:20px;
  border:1px solid #e6edf8;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.field-modal .mh{
  padding:14px 16px;
  border-bottom:1px solid #e6edf8;
  display:flex; align-items:center; justify-content:space-between;
}
.field-modal .mh b{ font-size:16px; }
.field-modal .mc{ padding:16px; }
.field-modal .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.field-btn{
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  border:2px solid transparent;
  cursor:pointer;
}
.field-btn.primary{ background:#2f8f46; border-color:#2f8f46; color:#fff; }
.field-btn.outline{ background:#fff; border-color:#2f8f46; color:#2f8f46; }
.field-btn.gray{ background:#f1f5f9; border-color:#e2e8f0; color:#0f172a; }
.field-btn:disabled{ opacity:.55; cursor:not-allowed; }

.field-note{ font-size:13px; opacity:.8; font-weight:600; line-height:1.35; }
/* верх поля */
.field-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}


/* иконка культуры */
.field-icon{
  width:34px;
  height:34px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.95;
}

.field-tile.seed-1 .field-icon { background-image: url('/images/seeds/1.png'); }
.field-tile.seed-2 .field-icon { background-image: url('/images/seeds/2.png'); }
.field-tile.seed-3 .field-icon { background-image: url('/images/seeds/3.png'); }
.field-tile.seed-4 .field-icon { background-image: url('/images/seeds/4.png'); }
.field-tile.seed-5 .field-icon { background-image: url('/images/seeds/5.png'); }
.field-tile.seed-6 .field-icon { background-image: url('/images/seeds/6.png'); }

.vip-badge{
  margin-left:6px;
  padding:2px 6px;
  font-size:11px;
  font-weight:900;
  border-radius:6px;
  background:#facc15;
  color:#422006;
}
.game-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    background: transparent;
    border: none;
    cursor: pointer;

    font-size: 16px;
    font-weight: 600;
    color: #333;

    margin-right: 20px;
}

.game-menu-btn:hover {
    color: #4CAF50;
}

.menu-icon {
    font-size: 20px;
    line-height: 1;
}

.menu-text {
    font-size: 15px;
}
@media (max-width: 768px) {
    .menu-text {
        display: none;
    }
}
@media (max-width: 768px) {

    .header-actions {
        gap: 8px;
    }

    .header-actions .btn-lg {
        padding: 8px 14px;
        font-size: 14px;
        border-radius: 999px;
        white-space: nowrap;
    }

}
@media (max-width: 768px) {
    .brand-name {
        font-size: 16px;
    }

    .brand-icon {
        font-size: 18px;
    }
}
.site-menu-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.site-menu {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 15px;
    z-index: 2000;
}
.site-menu a {
    display: block;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
}

.site-menu a:hover {
    background: #f1f5f9;
}

@media (max-width: 768px) {

    .nav {
        display: none;
    }

    .site-menu-btn {
        display: block;
    }

    body.site-open .site-menu {
        display: block;
    }
}
/* общие кнопки */
.game-menu-btn,
.site-menu-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

/* мобилка */
@media (max-width: 768px) {

    .game-menu-btn {
        position: absolute;
        left: 12px;
        top: 25%;
        transform: translateY(-50%);
    }

    .site-menu-btn {
        position: absolute;
        right: 12px;
        top: 25%;
        transform: translateY(-50%);
    }

}
/* ================================
   КОРМОВЫЕ ЗАВОДЫ
   ================================ */

/* инфо-блок */
.korm-info-block {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #374151;
}

/* склад */
.korm-warehouse {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.korm-warehouse > div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #111827;
    min-width: 140px;
}
.yogurt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px;
}

/* сетка */
.korm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* карточка */
.korm-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    position: relative;
}

/* картинка */
.korm-img img {
    width: 80px;
    margin-bottom: 10px;
}

/* блокировка */
.korm-card.locked {
    opacity: 0.5;
    pointer-events: none;
}

.korm-lock {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    color: #ffffff;
    font-weight: 600;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

/* рецепт */
.korm-recipe {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 10px;
    text-align: left;
}

/* статус */
.korm-status {
    margin-bottom: 10px;
}

.korm-status .status-text {
    font-weight: 600;
    color: #111827;
}

.korm-status .status-timer {
    display: block;
    margin-top: 4px;
    font-family: monospace;
    font-size: 18px;
    color: #b91c1c;
}

/* кнопки */
.korm-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.korm-actions button {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

/* купить */
.korm-actions .btn-buy {
    background: #3b82f6;
    color: #ffffff;
}

.korm-actions .btn-buy:hover {
    background: #2563eb;
}

/* переработать */
.korm-actions .btn-start {
    background: #f59e0b;
    color: #ffffff;
}

.korm-actions .btn-start:hover {
    background: #d97706;
}

/* собрать */
.korm-actions .btn-collect {
    background: #10b981;
    color: #ffffff;
}

.korm-actions .btn-collect:hover {
    background: #059669;
}

/* мобильная адаптация */
@media (max-width: 768px) {

    .korm-warehouse > div {
        min-width: 100%;
    }

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

    .korm-actions {
        flex-direction: column;
    }
}
.korm-wear {
    margin-top: 10px;
}

.korm-wear-text {
    font-size: 14px;
    margin-bottom: 4px;
    color: #444;
}

.korm-wear-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.korm-wear-fill {
    height: 100%;
    width: 0%;
    background: #22c55e; /* зелёный */
    transition: width .3s ease, background .3s ease;
}

.korm-wear-fill.yellow {
    background: #f59e0b;
}

.korm-wear-fill.red {
    background: #ef4444;
}
/* ===== ЗАГОНЫ ===== */

/* вкладки */
.zagony-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.zagony-tab {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    background: #f6f6f6;
    cursor: pointer;
    font-size: 14px;
}

.zagony-tab.active {
    background: #4caf50;
    color: #fff;
    border-color: #4caf50;
}

/* сетка загонов */
.zagony-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

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

/* карточка загона */
.zagon-card {
    position: relative;
    padding: 12px;
    min-height: 110px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    text-align: center;
}

/* номер загона */
.zagon-num {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 15px;
}

/* статус */
.zagon-status {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* кнопки */
.zagon-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.zagon-btn.open {
    background: #4caf50;
    color: #fff;
}

.zagon-btn.buy {
    background: #ff9800;
    color: #fff;
}

/* состояния */
.zagon-card.locked {
    background: #f2f2f2;
    color: #999;
    border-style: dashed;
}

.zagon-card.not-bought {
    background: #fff8e1;
    border-color: #ffcc80;
}

.zagon-card.bought {
    background: #f1fff3;
    border-color: #a5d6a7;
    cursor: pointer;
}

/* пагинация */
.zagony-pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.zagony-pages{
  margin-top:15px;
  text-align:center;
}
.zagony-page{
  padding:6px 10px;
  margin:0 3px;
  cursor:pointer;
}
.zagony-page.active{
  background:#444;
  color:#fff;
}
.zagon-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.zagon-modal-box{
  background:#fff;
  width:90%;
  max-width:420px;
  border-radius:12px;
  padding:15px;
}
.zagon-modal-head{
  display:flex;
  justify-content:space-between;
  font-size:18px;
}
.zagon-grid-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:15px;
}
.zagon-cell{
  height:80px;
  border-radius:8px;
  background:#eee;
}
.zagon-cell.hungry{ background:#f6c1c1; }
.zagon-cell.wait{ background:#ffe9a8; }
.zagon-cell.ready{ background:#b9f6c6; }
.zagon-cell.empty{ background:#ddd; }

@media(max-width:480px){
  .zagon-cell{ height:65px; }
}
.zagon-cell{
  position:relative;
  border-radius:10px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#555;
}

.zagon-cell.empty{
  background:#e5e5e5;
}
.zagon-cell.empty::after{
  content:"+";
  font-size:28px;
  opacity:.5;
}

.zagon-cell.hungry{
  background:#ffd6d6;
}
.zagon-cell.hungry::after{
  content:"🐔";
  font-size:26px;
}

.zagon-cell.wait{
  background:#fff1b8;
}
.zagon-cell.wait::after{
  content:"⏳";
  font-size:22px;
}

.zagon-cell.ready{
  background:#c9f7c5;
}
.zagon-cell.ready::after{
  content:"🎁";
  font-size:22px;
}

.cell-num{
  position:absolute;
  bottom:4px;
  right:6px;
  font-size:11px;
  opacity:.4;
}
.kur-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.kur-box{
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:360px;
}
.kur-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
}
.kur-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.kur-cell{
  height:100px;
  width:100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center 6px;
  background-size:85px 85px;
}

/* пусто */
.kur-cell.empty{
  background-color:#f1f1f1;
  background-image:url('/img/animals/kur0.png');
  filter: grayscale(100%) opacity(0.45);
}


/* голодная */
.kur-cell.hungry{
  background-color:#fff3cd;
  background-image:url('/img/animals/kur1.png');
}

/* ждём */
.kur-cell.wait{
  background-color:#d1ecf1;
  background-image:url('/img/animals/kur2.png');
}

/* готово */
.kur-cell.ready{
  background-color:#d4edda;
  background-image:url('/img/animals/kur3.png');
}

.kur-cell .num{
  position:absolute;
  top:6px;
  left:8px;
  font-size:12px;
}

.kur-cell .prod{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:12px;
  
  padding:2px 6px;
  border-radius:6px;
}
.kur-cell.wait::after{
  content: attr(data-timer);

  position:absolute;
  left:10px;
  right:10px;
  bottom:12px;   /* ← ровно на зелёной плашке */

  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#fff;

  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 3px rgba(0,0,0,.7);
}

.zagon-card {
    cursor: pointer;
    transition: .15s;
    position: relative;
}

.zagon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.zagon-card.locked {
    cursor: default;
    opacity: .6;
}

.zagon-card.locked:hover {
    transform: none;
    box-shadow: none;
}
.zagon-badge{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border-radius:50%;
    color:#fff;
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.zagon-badge.need_feed{
    background:#f44336; /* 🔴 */
}

.zagon-badge.waiting{
    background:#ff9800; /* 🟠 */
}

.zagon-badge.ready{
    background:#4caf50; /* 🟢 */
}

.kur-cell .prod-count{
  position:absolute;
  top:6px;
  right:6px;

  font-size:11px;
  font-weight:700;
  color:#fff;

  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:6px;

  line-height:1;
  z-index:5;
}
/* ===== AUTO ACTION BUTTON ===== */
.kur-auto-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    margin: 10px 0;
    border-radius: 10px;

    background: linear-gradient(135deg, #43a047, #66bb6a);
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    font-family: inherit;

    border: none;
    cursor: pointer;

    box-shadow:
        0 6px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.25);

    transition: 
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}

.kur-auto-btn:hover{
    filter: brightness(1.05);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.kur-auto-btn:active{
    transform: translateY(1px);
    box-shadow:
        0 4px 10px rgba(0,0,0,0.2),
        inset 0 2px 4px rgba(0,0,0,0.2);
}

/* иконка */
.kur-auto-btn .icon{
    font-size: 18px;
    line-height: 1;
}

/* disabled (если потом захочешь блокировать) */
.kur-auto-btn:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.3);
}
.page-info{
    margin: 12px 0 18px;
    padding: 12px 16px;

    background: #f9fafb;
    border: 1px solid #e3e6ea;
    border-radius: 10px;

    font-size: 14px;
    color: #333;
}

.page-info h3{
    margin: 0 0 6px;
    font-size: 15px;
    color: #2f7d32;
}

/* короткий список */
.page-info ul{
    padding-left: 18px;
    margin: 0;
}

.page-info ul li{
    margin-bottom: 4px;
}

/* скрытая часть */
.page-info.compact .full{
    display: none;
}

/* кнопка */
.info-toggle{
    margin-top: 6px;
}

.info-toggle button{
    background: none;
    border: none;
    color: #2f7d32;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
}

.info-toggle button:hover{
    text-decoration: underline;
}
.confirm-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-box{
    background: #fff;
    width: 340px;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
}

.confirm-title{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.confirm-text{
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.confirm-actions{
    display: flex;
    gap: 10px;
}

.confirm-actions button{
    flex: 1;
    padding: 8px 0;
    border-radius: 5px;
    cursor: pointer;
    border: 0;
}

.btn-confirm{
    background: #4CAF50;
    color: #fff;
}

.btn-cancel{
    background: #e0e0e0;
}
/* ================== СВИНАРНИК ================== */

.svin-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.svin-box{
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:360px;
}

.svin-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
}

.svin-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.svin-cell{
  height:100px;
  width:100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center 6px;
  background-size:90px 90px;
}

/* пусто */
.svin-cell.empty{
  background-color:#f1f1f1;
  background-image:url('/img/animals/svin0.png');
  filter: grayscale(100%) opacity(0.45);
}

/* голодная */
.svin-cell.hungry{
  background-color:#fff3cd;
  background-image:url('/img/animals/svin1.png');
}

/* ждём */
.svin-cell.wait{
  background-color:#d1ecf1;
  background-image:url('/img/animals/svin2.png');
}

/* готово */
.svin-cell.ready{
  background-color:#d4edda;
  background-image:url('/img/animals/svin3.png');
}

.svin-cell .num{
  position:absolute;
  top:6px;
  left:8px;
  font-size:12px;
}

.svin-cell .prod{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

.svin-cell.wait::after{
  content: attr(data-timer);

  position:absolute;
  left:10px;
  right:10px;
  bottom:12px;

  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#fff;

  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 3px rgba(0,0,0,.7);
}
.svin-cell .prod-count{
  position:absolute;
  top:6px;
  right:6px;

  font-size:11px;
  font-weight:700;
  color:#fff;

  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:6px;

  line-height:1;
  z-index:5;
}
/* ================== ОВЧАРНЯ ================== */

.ovca-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.ovca-box{
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:360px;
}

.ovca-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
}

.ovca-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.ovca-cell{
  height:100px;
  width:100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center 6px;
  background-size:85px 85px;
}

/* пусто */
.ovca-cell.empty{
  background-color:#f1f1f1;
  background-image:url('/img/animals/ovca0.png');
  filter: grayscale(100%) opacity(0.45);
}

/* голодная */
.ovca-cell.hungry{
  background-color:#fff3cd;
  background-image:url('/img/animals/ovca1.png');
}

/* ждём */
.ovca-cell.wait{
  background-color:#d1ecf1;
  background-image:url('/img/animals/ovca2.png');
}

/* готово */
.ovca-cell.ready{
  background-color:#d4edda;
  background-image:url('/img/animals/ovca3.png');
}

.ovca-cell .num{
  position:absolute;
  top:6px;
  left:8px;
  font-size:12px;
}

.ovca-cell .prod{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

.ovca-cell.wait::after{
  content: attr(data-timer);

  position:absolute;
  left:10px;
  right:10px;
  bottom:12px;

  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#fff;

  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 3px rgba(0,0,0,.7);
}
.ovca-cell .prod-count{
  position:absolute;
  top:6px;
  right:6px;

  font-size:11px;
  font-weight:700;
  color:#fff;

  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:6px;

  line-height:1;
  z-index:5;
}
/* ================== КОРОВНИКИ ================== */

.korova-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.korova-box{
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:360px;
}

.korova-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
}

.korova-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.korova-cell{
  height:100px;
  width:100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center 6px;
  background-size:85px 85px;
}

/* пусто */
.korova-cell.empty{
  background-color:#f1f1f1;
  background-image:url('/img/animals/korova0.png');
  filter: grayscale(100%) opacity(0.45);
}

/* голодная */
.korova-cell.hungry{
  background-color:#fff3cd;
  background-image:url('/img/animals/korova1.png');
}

/* ждём */
.korova-cell.wait{
  background-color:#d1ecf1;
  background-image:url('/img/animals/korova2.png');
}

/* готово */
.korova-cell.ready{
  background-color:#d4edda;
  background-image:url('/img/animals/korova3.png');
}

.korova-cell .num{
  position:absolute;
  top:6px;
  left:8px;
  font-size:12px;
}

.korova-cell .prod{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

.korova-cell.wait::after{
  content: attr(data-timer);

  position:absolute;
  left:10px;
  right:10px;
  bottom:12px;

  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#fff;

  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 3px rgba(0,0,0,.7);
}
.korova-cell .prod-count{
  position:absolute;
  top:6px;
  right:6px;

  font-size:11px;
  font-weight:700;
  color:#fff;

  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:6px;

  line-height:1;
  z-index:5;
}
/* ================== ЛАМОВНИКИ ================== */

.lama-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.lama-box{
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:360px;
}

.lama-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
}

.lama-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.lama-cell{
  height:100px;
  width:100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center 6px;
  background-size:85px 85px;
}

/* пусто */
.lama-cell.empty{
  background-color:#f1f1f1;
  background-image:url('/img/animals/lama0.png');
  filter: grayscale(100%) opacity(0.45);
}

/* голодная */
.lama-cell.hungry{
  background-color:#fff3cd;
  background-image:url('/img/animals/lama1.png');
}

/* ждём */
.lama-cell.wait{
  background-color:#d1ecf1;
  background-image:url('/img/animals/lama2.png');
}

/* готово */
.lama-cell.ready{
  background-color:#d4edda;
  background-image:url('/img/animals/lama3.png');
}

.lama-cell .num{
  position:absolute;
  top:6px;
  left:8px;
  font-size:12px;
}

.lama-cell .prod{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

.lama-cell.wait::after{
  content: attr(data-timer);

  position:absolute;
  left:10px;
  right:10px;
  bottom:12px;

  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#fff;

  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 3px rgba(0,0,0,.7);
}
.lama-cell .prod-count{
  position:absolute;
  top:6px;
  right:6px;

  font-size:11px;
  font-weight:700;
  color:#fff;

  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:6px;

  line-height:1;
  z-index:5;
}
/* ================== СЛОНОВНИКИ ================== */

.slon-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.slon-box{
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:360px;
}

.slon-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:18px;
}

.slon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.slon-cell{
  height:100px;
  width:100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center 6px;
  background-size:85px 85px;
}

/* пусто */
.slon-cell.empty{
  background-color:#f1f1f1;
  background-image:url('/img/animals/slon0.png');
  filter: grayscale(100%) opacity(0.45);
}

/* голодная */
.slon-cell.hungry{
  background-color:#fff3cd;
  background-image:url('/img/animals/slon1.png');
}

/* ждём */
.slon-cell.wait{
  background-color:#d1ecf1;
  background-image:url('/img/animals/slon2.png');
}

/* готово */
.slon-cell.ready{
  background-color:#d4edda;
  background-image:url('/img/animals/slon3.png');
}

.slon-cell .num{
  position:absolute;
  top:6px;
  left:8px;
  font-size:12px;
}

.slon-cell .prod{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

.slon-cell.wait::after{
  content: attr(data-timer);

  position:absolute;
  left:10px;
  right:10px;
  bottom:12px;

  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#fff;

  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 3px rgba(0,0,0,.7);
}
.slon-cell .prod-count{
  position:absolute;
  top:6px;
  right:6px;

  font-size:11px;
  font-weight:700;
  color:#fff;

  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:6px;

  line-height:1;
  z-index:5;
}
/* ====== CARDS LAYOUT ====== */
.page h1 {
    margin-bottom: 15px;
}

.page h2 {
    margin: 25px 0 12px;
    font-size: 20px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* ====== CARD ====== */
.card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.card-body {
    font-size: 14px;
    line-height: 1.5;
}

/* ====== INPUT ====== */
.input {
    width: 100%;
    padding: 6px 8px;
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* ====== BUTTONS ====== */
.btn {
    display: inline-block;
    width: 100%;
    padding: 7px 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
}
/*
.btn-primary {
    background: linear-gradient(180deg, #ffd56a, #f2b400);
    color: #3b2a00;
}

.btn-primary:hover {
    opacity: 0.9;
}
*/
.btn-danger {
    background: linear-gradient(180deg, #ff8a8a, #e34b4b);
    color: #fff;
}

/* ====== NOTICE ====== */
.notice {
    font-size: 13px;
    color: #777;
}
/* ===== BLINAYA LIST STYLE ===== */

.page h2 {
    margin: 25px 0 10px;
    font-size: 20px;
    font-weight: bold;
}

/* --- LIST BLOCK --- */
.list {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

.list-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 140px 130px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #ededed;
    font-size: 14px;
}

.list-row:last-child {
    border-bottom: none;
}

.list-row:nth-child(even) {
    background: #fafafa;
}

/* --- INPUT --- */
.input {
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- BUTTONS --- */
.btn {
    padding: 7px 10px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    background: #2f8f46;
    color: #ffffff;
}
.btn:hover {
    background: #05af32;
}
.btn-danger {
    background: linear-gradient(#ff7b7b, #e04848);
    color: #fff;
}

.btn-danger:hover {
    background: linear-gradient(#ff6a6a, #d93a3a);
}

/* --- TABLE --- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

.table th {
    background: #f2f2f2;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.table td {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #ededed;
}

.table tr:nth-child(even) {
    background: #fafafa;
}

/* --- NOTICE --- */
.notice {
    padding: 10px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
    margin-bottom: 15px;
}
/* ===== BLINAYA MOBILE FIX ===== */
@media (max-width: 768px) {

    .list-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title title"
            "count energy"
            "input button";
        row-gap: 8px;
    }

    .list-row span:nth-child(1) {
        grid-area: title;
        font-weight: bold;
    }

    .list-row span:nth-child(2) {
        grid-area: count;
    }

    .list-row span:nth-child(3) {
        grid-area: energy;
        text-align: right;
    }

    .list-row input {
        grid-area: input;
        width: 100%;
        font-size: 16px; /* важно для мобильного */
    }

    .list-row button {
        grid-area: button;
        width: 100%;
        font-size: 16px;
    }

    /* кнопки не прилипают к краю */
    .list {
        padding: 6px;
    }

    /* таблицы — скролл */
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* ===== BLINAYA TABLE MOBILE FIX ===== */
@media (max-width: 768px) {

    .table,
    .table thead,
    .table tbody,
    .table tr,
    .table th,
    .table td {
        display: block;
        width: 100%;
    }

    .table thead {
        display: none;
    }

    .table tr {
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 8px;
    }

    .table td {
        border: none;
        padding: 6px 4px;
        font-size: 14px;
    }

    /* ячейки с input + кнопкой */
    .table td:last-child {
        display: flex;
        gap: 8px;
        margin-top: 6px;
    }

    .table input {
        width: 100%;
        font-size: 16px; /* важно: видно ввод */
    }

    .table button {
        width: 100%;
        font-size: 16px;
        white-space: nowrap;
    }
}

.page-info.open{ max-height:none; }

.page-info-more{
    position:absolute;
    right:10px;
    bottom:8px;
    background:none;
    border:0;
    color:#3b82f6;
    cursor:pointer;
}

.page-info .muted{
    color:#777;
    font-size:13px;
}

.animals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 10px;
}
.animal-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    padding:12px;
    text-align:center;
}

.animal-card.locked{ opacity:.6; }

.animal-img img{
    max-width:100%;
    height:120px;
    object-fit:contain;
}

.animal-title{
    font-weight:bold;
    margin:6px 0;
}

.animal-desc{
    font-size:13px;
    color:#666;
    min-height:32px;
}

.animal-info{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin:8px 0;
}

.animal-buy{
    width:100%;
    padding:8px;
    border-radius:6px;
    border:0;
    background:#22c55e;
    color:#fff;
    cursor:pointer;
}

.animal-locked{
    padding:8px;
    font-size:13px;
    color:#888;
}
/* строка ввода количества */
.animal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    background: #e8e8e8;
}
.animal-row span{
    font-size:14px;
    color:#555;
    white-space:nowrap;
}

/* поле количества без стрелок */
.animal-row input{
    width:90px;
    padding:8px 10px;
    border:1px solid #e5e5e5;
    border-radius:8px;
    outline:none;
    text-align:center;
    font-weight:700;
}

.animal-row.total {
    background: #fff;
    border: 1px solid #eee;
    margin: 6px 0px;
}
.loader{
    grid-column:1/-1;
    text-align:center;
    padding:30px;
    color:#888;
}
/* ============================
   MARKET (clean, single style)
   uses: .market-list .market-row .market-icon .market-title .market-meta
         .market-amount .market-price .market-action .market-own
   ============================ */

.market-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* card */
.market-row{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:14px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:56px 1fr 96px 110px 220px;
  align-items:center;
  gap:10px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.market-row:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.07);
  transform:translateY(-1px);
  border-color:#d7e3f6;
}

/* system lots */
.market-row.system{
  background:#f8fafc;
  border-color:#e5e7eb;
}

/* icon */
.market-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.market-icon img{
  width:46px;
  height:46px;
  border-radius:10px;
}

/* info */
.market-info{ /* если нет — не страшно */
  min-width:0;
}
.market-title{
  font-size:18px;
  
  color:#162033;
  line-height:1.15;
  
}
.market-meta{
  font-size:13px;
  color:#6b7280;
  margin-top:3px;
  line-height:1.25;
  
}

/* qty & price */
.market-amount{
  text-align:center;
  font-size:16px;
  
  color:#111827;
  white-space:nowrap;
  
}
.market-price{
  text-align:center;
  font-size:16px;
  
  color:#0f766e;
  white-space:nowrap;
  
}

/* action */
.market-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.market-action input[type=number]{
  width:72px;
  height:38px;
  padding:6px 8px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:14px;
  text-align:center;
  background:#fff;
}

.market-action input[type=number]:focus{
  outline:none;
  border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* buttons */
.market-action .btn{
  height:38px;
  padding:0 16px;
  border-radius:10px;
  font-weight:800;
  border:none;
  cursor:pointer;
  transition: filter .12s ease, transform .12s ease;
  white-space:nowrap;
}

.market-action .btn:active{
  transform: scale(.98);
}

.market-action .btn-green{
  color:#fff;
  background:linear-gradient(135deg,#22c55e,#16a34a);
}

.market-action .btn-green:hover{
  filter:brightness(1.05);
}

.market-action .btn-red{
  color:#fff;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
}

.market-action .btn-red:hover{
  filter:brightness(1.05);
}

.market-action .btn-gray{
  background:#f1f5f9;
  color:#374151;
}

/* "Ваш лот" label */
.market-own{
  width:110px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:#6b7280;
  white-space:nowrap;
}

/* ============ MARKET ABOUT ============ */
.market-about{
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  border:1px solid #e6edf7;
  border-radius:14px;
  padding:16px 18px;
  margin:14px 0 18px;
}

.market-about-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.market-about-icon{ font-size:18px; }

.market-about-title{
  font-size:16px;
  font-weight:900;
  color:#162033;
}

.market-about-text{
  font-size:14px;
  color:#374151;
  line-height:1.55;
}

.market-about-text p{ margin:0 0 10px 0; }
.market-about-text ul{ padding-left:18px; margin:0 0 10px 0; }
.market-about-text li{ margin-bottom:4px; }

.market-about-note{
  background:#f1f5f9;
  border-left:4px solid #22c55e;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  color:#1f2937;
}

/* ============================
   MOBILE (only one version)
   ============================ */
@media (max-width: 700px){

  .market-row{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "icon title"
      "icon meta"
      "qty price"
      "action action";
    gap:8px 10px;
    padding:12px;
  }

  .market-icon{ grid-area:icon; }
  .market-title{ grid-area:title; font-size:16px; }
  .market-meta{ grid-area:meta; font-size:12px; }

  .market-amount{
    grid-area:qty;
    text-align:left;
    font-size:14px;
    color:#111827;
  }

  .market-price{
    grid-area:price;
    text-align:right;
    font-size:14px;
  }

  .market-own{
    grid-area:price;
    width:auto;
    text-align:right;
    font-size:12px;
  }

  .market-action{
    grid-area:action;
    justify-content:flex-end;
  }

  .market-action input[type=number]{
    width:74px;
    height:40px;
  }

  .market-action .btn{
    flex:1;
    height:40px;
    border-radius:12px;
  }

  .market-about{ padding:14px; }
  .market-about-title{ font-size:15px; }
  .market-about-text{ font-size:13px; }
}

/* ============================
   STORAGE — CLEAN STYLE
   ============================ */

.storage-info{
  margin:10px auto 20px;
  background:#f0f8e0;
  padding:14px 16px;
  border-radius:12px;
  text-align:center;
  font-size:14px;
}

/* GRID */
.storage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 4px;
    justify-content: center;
}

/* CARD */
.storage-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 10px 14px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
    font-size: 13px;
}

.storage-card:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transform:translateY(-2px);
}

.storage-card img{
  width:52px;
  height:52px;
  object-fit:contain;
  margin-bottom:6px;
}

.storage-card-title{
  font-size:14px;
  font-weight:700;
  color:#1f2937;
}

.storage-card-amount{
  font-size:13px;
  color:#6b7280;
  margin-top:2px;
}

/* ============================
   MODAL
   ============================ */

.storage-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:14px;
}

.storage-modal-box{
  background:#fff;
  border-radius:16px;
  width:720px;
  max-width:100%;
  padding:20px 18px 18px;
  position:relative;
}

.storage-close {
    position: absolute;
    right: -18px;
    top: -18px;
    cursor: pointer;
    font-size: 26px;
    color: #070707;
    font-weight: bold;
    border-radius: 16px;
    border: 2px solid #b1b1b1;
    background: #ffffff;
    padding: 0 5px 0px 5px;
}
.storage-close:hover {
    background: #cf0000;
    color: #fff;
}

/* BODY */
.storage-modal-body{
  display:flex;
  gap:18px;
}

/* LEFT (ICON) */
.storage-left{
  width:160px;
  text-align:center;
}

.storage-icon-wrap{
  width:120px;
  height:120px;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.storage-icon-wrap img{
  width:70px;
  height:70px;
  object-fit:contain;
}

.storage-left-title{
  font-size:16px;
  font-weight:800;
}

.storage-left-amount{
  font-size:14px;
  color:#6b7280;
}

/* COLUMNS */
.storage-col{
  flex:1;
  background:#f9fafb;
  padding:14px;
  border-radius:12px;
}

.storage-col-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
  text-align:center;
}

/* INPUTS */
.storage-modal input[type=number]{
  width:100%;
  height:38px;
  padding:0 12px;
  font-size:14px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#fff;
  box-sizing:border-box;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  margin:6px 0;
}

.storage-modal input[type=number]:focus{
  border-color:#4CAF50;
  box-shadow:0 0 0 3px rgba(76,175,80,.15);
}

/* PRICE ROW */
.storage-modal .price-row{
  margin:10px 0 12px;
  font-size:14px;
  background:#f1f5f9;
  border-radius:10px;
  padding:10px;
  text-align:center;
}
.storage-empty {
  opacity: 0.45;
  filter: grayscale(100%);
  cursor: default;
}

.storage-empty img {
  opacity: 0.7;
}

.storage-empty-text {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}


/* BUTTONS */
.btn-green{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  width:100%;
  padding:10px;
  border:0;
  border-radius:10px;
  font-weight:700;
  margin-top:0px;
}
.btn-green:hover {
  background:linear-gradient(135deg,#03da52,#0a8537);
}

.btn-blue{
  background:linear-gradient(135deg,#2196F3,#1e88e5);
  color:#fff;
  width:100%;
  padding:10px;
  border:0;
  border-radius:10px;
  font-weight:700;
  margin-top:10px;
}
.btn-blue:hover{
   background:linear-gradient(135deg,#0586f0,#0e66b3); 
}
.btn-gray {
    background: linear-gradient(#cfd4da,#b9c0c7);
    color: #000000;
    border: none;
    cursor: not-allowed;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-weight: 700;
}

.btn-gray:hover{
    background:linear-gradient(#cfd4da,#b9c0c7);
}

.hint{
  font-size:12px;
  color:#6b7280;
  text-align:center;
  margin:6px 0;
}

.result{
  text-align:center;
  margin-top:10px;
}

/* ============================
   MOBILE FIX
   ============================ */
@media (max-width: 640px){

  /* 2 товара в ряд */
  .storage-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
  }

  /* MODAL → COLUMN */
  .storage-modal-body{
    flex-direction:column;
  }

  .storage-left{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
  }

  .storage-icon-wrap{
    width:72px;
    height:72px;
    margin:0;
  }

  .storage-icon-wrap img{
    width:48px;
    height:48px;
  }

  .storage-col{
    padding:12px;
  }

  .storage-modal-box{
    padding:18px 14px 16px;
  }
}

/* ===== REFERRALS ===== */

.ref-count {
    margin-bottom: 15px;
    font-size: 18px;
    color: #2f7d32;
}

.ref-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.ref-table thead {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
    color: #fff;
}

.ref-table th,
.ref-table td {
    padding: 12px 14px;
    text-align: left;
    font-size: 14px;
}

.ref-table tbody tr:nth-child(even) {
    background: #f7f9fb;
}

.ref-table tbody tr:hover {
    background: #eef6ff;
}

.ref-more {
    margin-top: 15px;
    padding: 10px 18px;
    background: #4caf50;
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.ref-more:hover {
    background: #43a047;
}
/* ===== REFERRALS ===== */
.ref-table-wrap {
    width: 100%;
    
}

/* desktop */
.ref-table {
    width: 100%;
    border-collapse: collapse;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

    .ref-table thead {
        display: none;
    }

    .ref-table,
    .ref-table tbody,
    .ref-table tr {
        display: block;
        width: 100%;
    }

    .ref-table tr {
        background: #fff;
        margin-bottom: 14px;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(0,0,0,.06);
        padding: 12px;
    }

    .ref-table td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border: none;
        font-size: 14px;
    }

    .ref-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6a6a6a;
    }
}
/* =========================
   PROFILE PAGE
========================= */
/* ===== PROFILE PAGE ===== */

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #43a047; /* фирменный спокойный зелёный */
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-title {
    display: flex;
    flex-direction: column;
}

.profile-login {
    font-size: 20px;
    font-weight: 600;
    color: #222;
}

.profile-meta {
    font-size: 13px;
    color: #777;
    margin-top: 2px;
}

/* ===== STATS CARDS ===== */

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.profile-card {
    background: #ffffff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.profile-card b {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.profile-card span {
    font-size: 13px;
    color: #666;
}

/* убираем радугу — оставляем аккуратный акцент */
.profile-card.green b  { color: #2e7d32; }
.profile-card.red b    { color: #c62828; }
.profile-card.blue b   { color: #1565c0; }
.profile-card.orange b { color: #ef6c00; }

/* ===== INFO BLOCK ===== */

.profile-info {
    background: #ffffff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.profile-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f6;
    font-size: 14px;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-row span {
    color: #777;
}

.profile-row b {
    font-weight: 600;
    color: #222;
}

/* ===== MOBILE ===== */

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

@media (max-width: 480px) {
    .profile-stats {
        grid-template-columns: 1fr;
    }

    .profile-header {
        gap: 12px;
    }

    .profile-avatar {
        width: 54px;
        height: 54px;
        font-size: 26px;
    }

    .profile-login {
        font-size: 18px;
    }

    .profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
}
/* =========================
   SETTINGS PAGE
========================= */

.settings{
    
    margin: 0 auto;
}

/* grid */
.settings-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

/* cards */
.settings-card{
    background: #ffffff;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.settings-card-wide{
    max-width: 700px;
    margin: 0 auto;
}

/* head */
.settings-card-head{
    padding: 14px 18px 10px;
    border-bottom: 1px solid #eef1f6;
}

.settings-card-title{
    font-size: 17px;
    font-weight: 600;
    color: #222;
}

.settings-card-subtitle{
    font-size: 13px;
    color: #777;
    margin-top: 2px;
}

/* body */
.settings-card-body{
    padding: 16px 18px 18px;
}

/* form */
.settings-form{
    display: flex;
    flex-direction: column;
}

.s-label{
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-top: 12px;
}

.s-input{
    margin-top: 6px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #d7dce4;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.s-input:focus{
    border-color: #43a047;
    box-shadow: 0 0 0 2px rgba(67,160,71,0.12);
    outline: none;
}

.s-input:disabled{
    background: #f5f6f8;
    color: #888;
}

/* buttons */
.s-btn{
    margin-top: 16px;
    padding: 11px 0;
    border-radius: 10px;
    border: none;
    background: #43a047;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .05s;
}

.s-btn:hover{
    background: #388e3c;
}

.s-btn:active{
    transform: translateY(1px);
}

.s-btn-link{
    display: block;
    text-align: center;
    text-decoration: none;
}

/* hints & notes */
.s-hint{
    margin-top: 8px;
    font-size: 12px;
    color: #888;
}

.s-note-ok{
    margin-top: 10px;
    font-size: 13px;
    color: #2e7d32;
    font-weight: 600;
}

/* avatar */
.avatar-box{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.avatar-preview img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e0e4ea;
}

.avatar-info{
    display: flex;
    flex-direction: column;
}

.avatar-name{
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.avatar-desc{
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

/* telegram */
.settings-wide{
    margin-top: 10px;
}

.tg-linked{
    display: flex;
    flex-direction: column;
}

.tg-row{
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid #eef1f6;
}

.tg-row span{
    color: #777;
}

.tg-row b{
    color: #222;
    font-weight: 600;
}

/* ===== RESPONSIVE ===== */

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

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

    .settings-card-wide{
        max-width: 100%;
    }

    .tg-row{
        flex-direction: column;
        gap: 4px;
    }
}
.profile-menu{
    position: relative;
}

.profile-menu-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    min-width: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);

    display: none;
    z-index: 1000;
}

.profile-menu-dropdown a{
    display: block;
    padding: 12px 16px;
    color: #222;
    text-decoration: none;
    font-weight: 500;
}

.profile-menu-dropdown a:hover{
    background: #f5f7fb;
}

/* мобайл */
@media (max-width: 768px){
    .profile-menu-dropdown{
        right: auto;
        left: 0;
        max-width: calc(100vw - 20px);
    }
}
.header-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

/* важно: не даём кнопкам растягиваться */
.header-actions .btn-lg{
    width: auto;
    white-space: nowrap;
}
/* ===== БОНУС УДАЧИ ===== */

.bonus-info {
    max-width: 720px;
    margin: 15px auto 25px;
    text-align: center;
    font-size: 16px;
    color: #555;
}

.bonus-info b {
    color: #2e7d32;
}

/* ===== КНОПКА ===== */

.bonus-action {
    text-align: center;
    margin: 25px 0;
}

.bonus-action .btn {
    font-size: 18px;
    padding: 14px 30px;
}

/* ===== СООБЩЕНИЯ ===== */

.bonus-message {
    margin-top: 12px;
    font-size: 14px;
    color: #c62828;
}

/* ===== ТАЙМЕР ===== */

.bonus-timer {
    text-align: center;
    margin: 20px 0;
}

.bonus-timer-label {
    font-size: 14px;
    color: #777;
}

.bonus-timer-value {
    font-size: 32px;
    font-weight: bold;
    font-family: monospace;
    color: #d32f2f;
    margin-top: 6px;
}

/* ===== СЕТКА НАГРАД ===== */

.bonus-subtitle {
    text-align: center;
    margin: 35px 0 15px;
    font-size: 20px;
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    /* max-width: 820px; */
    margin: 0 auto;
}

.bonus-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px 10px;
    text-align: center;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    user-select: none;
}

/* чуть затемним редкие (на будущее, если захочешь) */
.bonus-card.rare {
    opacity: 0.75;
}

/* ===== РЕЗУЛЬТАТ ===== */

.bonus-result {
    max-width: 420px;
    margin: 35px auto 10px;
    padding: 22px;
    background: #e8f5e9;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.bonus-result-title {
    font-size: 16px;
    color: #2e7d32;
    margin-bottom: 8px;
}

.bonus-result-value {
    font-size: 22px;
    font-weight: bold;
    color: #1b5e20;
}

/* ===== УТИЛИТЫ ===== */

.hidden {
    display: none !important;
}
/* ===== MOBILE BONUS ADAPTIVE ===== */

@media (max-width: 768px) {

    .bonus-info {
        font-size: 15px;
        padding: 0 12px;
    }

    .bonus-action .btn {
        width: 100%;
        max-width: 360px;
        font-size: 17px;
        padding: 14px 0;
    }

    .bonus-timer-value {
        font-size: 26px;
    }

    .bonus-subtitle {
        font-size: 18px;
        margin-top: 28px;
    }

    .bonus-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 10px;
    }

    .bonus-card {
        font-size: 14px;
        padding: 14px 8px;
    }

    .bonus-result {
        margin: 28px 12px 10px;
        padding: 18px;
    }

    .bonus-result-value {
        font-size: 20px;
    }
}

/* ===== SMALL MOBILE (≤420px) ===== */

@media (max-width: 420px) {

    .bonus-info {
        font-size: 14px;
    }

    .bonus-timer-value {
        font-size: 24px;
    }

    .bonus-card {
        font-size: 13px;
        padding: 12px 6px;
    }

    .bonus-result-value {
        font-size: 18px;
    }
}
/* ===== BONUS HISTORY ===== */

.bonus-history {
    /* margin: 40px auto 0; */
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.06);
    overflow: hidden;
}
.bonus-history-title {
    padding: 18px 22px;
    font-size: 20px;
    font-weight: 700;
    color: #2e7d32;
    background: linear-gradient(90deg, #e8f5e9, #f1f8e9);
    border-bottom: 1px solid #e0e0e0;
}

.bonus-history-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 10px;
    padding: 14px 22px;
    align-items: center;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.25s ease;
}

.bonus-history-row:last-child {
    border-bottom: none;
}

.bonus-history-row:hover {
    background: #f9fff6;
}

/* Фермер */
.bonus-history-user {
    
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Награда */
.bonus-history-reward {
    
    color: #2e7d32;
}

/* Дата */
.bonus-history-date {
    /* text-align: right; */
    font-size: 13px;
    color: #888;
}

/* Пусто */
.bonus-history-empty {
    padding: 22px;
    text-align: center;
    color: #999;
    font-size: 15px;
}
@media (max-width: 768px) {

    .bonus-history {
        margin: 30px 12px 0;
    }

    .bonus-history-title {
        font-size: 18px;
        padding: 14px 16px;
        text-align: center;
    }

    .bonus-history-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .bonus-history-user {
        font-size: 15px;
    }

    .bonus-history-reward {
        font-size: 14px;
    }

    .bonus-history-date {
        text-align: left;
        font-size: 12px;
    }
}
/* ===== BONUS HISTORY TABLE ===== */

.bonus-history-row {
    display: grid;
    grid-template-columns: 80px 1.4fr 1fr 1fr;
    gap: 10px;
    align-items: center;
}

/* Шапка */
.bonus-history-head {
    background: #f4f8f4;
    font-weight: 700;
    color: #555;
    border-bottom: 2px solid #e0e0e0;
}

.bonus-history-head div {
    font-size: 14px;
}

/* ID */
.bonus-history-id {
    font-weight: 600;
    color: #999;
}

/* Награды */
.bonus-history-reward.money {
    color: #c62828;
}

.bonus-history-reward.item {
    color: #2e7d32;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .bonus-history-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .bonus-history-head {
        display: none;
    }

    .bonus-history-id {
        font-size: 12px;
        color: #aaa;
    }

    .bonus-history-user {
        font-size: 15px;
        font-weight: 600;
    }

    .bonus-history-reward {
        font-size: 14px;
    }

    .bonus-history-date {
        font-size: 12px;
        color: #888;
    }
}
.surf-card{
  background:#fff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.surf-head{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.surf-title{margin:0;font-size:22px}
.surf-meta{display:flex;gap:10px;color:#666;font-weight:600}
.surf-desc{margin:10px 0;color:#555}
.surf-iframe-wrap{
  height:60vh; border-radius:12px; overflow:hidden; border:1px solid #e5e5e5;
}
.surf-iframe-wrap iframe{width:100%;height:100%;border:0}
.surf-actions{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.surf-timer{font-weight:700}
.surf-msg{margin-top:8px}
.surf-msg.ok{color:#1a7f37}
.surf-msg.err{color:#c62828}
.hidden{display:none}
/* ===== SURFING MOBILE FIX ===== */

@media (max-width: 768px){

  .surf-card{
    padding:12px;
    border-radius:12px;
  }

  .surf-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .surf-title{
    font-size:18px;
    line-height:1.25;
  }

  .surf-meta{
    font-size:14px;
    gap:12px;
  }

  .surf-desc{
    font-size:14px;
    line-height:1.4;
  }

  .surf-iframe-wrap{
    height:50vh;   /* 👈 ключевое */
    border-radius:10px;
  }

  .surf-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .surf-actions .btn-lg{
    width:100%;
    text-align:center;
  }

  .surf-timer{
    text-align:center;
    font-size:16px;
  }

  .surf-msg{
    text-align:center;
    font-size:14px;
  }
}

/* Маленькие экраны (очень важно) */
@media (max-width: 420px){

  .surf-iframe-wrap{
    height:45vh;
  }

  .surf-title{
    font-size:17px;
  }

}
.surf-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.surf-item{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding:14px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.surf-item-info{
  flex:1;
}

.surf-item-title{
  font-size:18px;
  font-weight:700;
}

.surf-item-desc{
  color:#555;
  margin:4px 0;
}

.surf-item-meta{
  color:#777;
  font-size:14px;
}

@media (max-width:768px){
  .surf-item{
    flex-direction:column;
    align-items:stretch;
  }
}
.surf-status{
  font-size:14px;
  font-weight:600;
  color:#888;
  padding:10px 14px;
  border-radius:10px;
  background:#f1f1f1;
  text-align:center;
  white-space:nowrap;
}
.surf-status.ready{
  background:#e8f5e9;
  color:#1b7f3a;
  font-weight:700;
}
/* ===== SURFING TABS ===== */

.surf-tabs{
    display: flex;
    gap: 10px;
    margin: 20px 0 25px;
    flex-wrap: wrap;
}

.surf-tab{
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    background: #f6f6f6;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: all .2s ease;
}

.surf-tab:hover{
    background: #ececec;
}

.surf-tab.active{
    background: #2e8bff;
    border-color: #2e8bff;
    color: #fff;
}

/* ===== AJAX CONTENT ===== */

#surf-content{
    min-height: 120px;
}

/* ===== LOADER / EMPTY ===== */

.loader{
    padding: 30px;
    text-align: center;
    font-weight: 600;
    color: #777;
}

.empty-block{
    padding: 25px;
    text-align: center;
    font-size: 16px;
    color: #666;
    background: #f3f3f3;
    border-radius: 10px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px){
    .surf-tabs{
        gap: 8px;
    }

    .surf-tab{
        flex: 1;
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
    }
}
.loader{
  padding:30px;
  text-align:center;
  font-weight:600;
  color:#777;
}
.error{
  padding:20px;
  color:#c00;
  font-weight:600;
}
.surf-tab.active{
    box-shadow: 0 6px 16px rgba(46,139,255,.35);
}

.surf-add h2{
    margin-bottom:15px;
}

.surf-add label{
    display:block;
    margin-top:12px;
    font-weight:600;
}

.surf-add input,
.surf-add textarea,
.surf-add select{
    width:100%;
    padding:10px;
    margin-top:6px;
    border-radius:8px;
    border:1px solid #ccc;
}

.surf-price{
    margin:15px 0;
    font-size:15px;
}

.surf-rules {
    background: #edffde;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.surf-rules ul{
    margin:8px 0 0 18px;
}
.surf-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.surf-actions button{
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    background:#f7f7f7;
    cursor:pointer;
    font-size:14px;
}

.surf-actions button:hover{
    background:#eee;
}
/* ===== Farmer public view ===== */

.farmer-view {

    margin: 0 auto;
}

/* карточки */
.farmer-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.farmer-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

/* профиль */
.farmer-profile {
    display: flex;
    gap: 18px;
    align-items: center;
}

.farmer-profile-left {
    flex-shrink: 0;
}

.farmer-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #76b852;
    background: #fff;
}

.farmer-profile-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.farmer-name {
    font-size: 22px;
    font-weight: 700;
}

/* статус */
.farmer-status {
    font-weight: 600;
}

.farmer-status.online {
    color: #2ecc71;
}

.farmer-status.offline {
    color: #e74c3c;
}

/* списки */
.farmer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.farmer-list li {
    padding: 4px 0;
    font-size: 15px;
}

/* вторичный текст */
.muted {
    color: #777;
    font-size: 14px;
}

/* ошибки / пусто */
.empty-block {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* адаптив */
@media (max-width: 600px) {
    .farmer-profile {
        flex-direction: column;
        text-align: center;
    }

    .farmer-avatar {
        width: 90px;
        height: 90px;
    }

    .farmer-name {
        font-size: 20px;
    }
}
/* ===== Payments (select system) ===== */

.pay-page {
    
    margin: 0 auto;
}

.page-title {
    margin: 0 0 6px 0;
}

.page-subtitle {
    color: #777;
    margin-bottom: 14px;
}

.pay-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.pay-card {
    display: block;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pay-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.pay-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: #f3f3f3;
    margin-bottom: 10px;
}

.pay-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pay-min {
    font-size: 14px;
    color: #777;
}

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

@media (max-width: 520px) {
    .pay-grid { grid-template-columns: 1fr; }
}
/* ===== CryptoBot deposit page ===== */

.crypto-pay-page { 

    margin: 0 auto; }

.crypto-pay-card{
    background:#fff;
    border-radius:14px;
    padding:16px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.crypto-pay-badge{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:14px;
    padding:12px;
    border-radius:12px;
    background:#f7f7f7;
}

.crypto-pay-badge-icon{
    width:54px;
    height:54px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

.crypto-pay-badge-title{ font-size:18px; font-weight:800; }
.crypto-pay-badge-sub{ color:#666; margin-top:2px; }

.crypto-pay-form{ display:grid; gap:12px; }

.crypto-pay-row{ display:grid; gap:6px; }
.crypto-pay-label{ font-weight:700; }

.crypto-pay-input,
.crypto-pay-select{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid #e5e5e5;
    background:#fff;
    outline:none;
}

.crypto-pay-hint{ color:#777; font-size:13px; }

.crypto-pay-btn{ width:100%; margin-top:4px; }
.crypto-pay-btn.is-loading{ opacity:.7; }

.crypto-pay-result{
    margin-top:10px;
    padding:12px;
    border-radius:12px;
    background:#f7fff7;
    border:1px solid #dff2df;
}

.crypto-pay-success{ margin-bottom:10px; }

.crypto-pay-go{
    display:inline-block;
    width:100%;
    text-align:center;
    text-decoration:none !important;
}

@media (max-width: 560px){
    .crypto-pay-card{ padding:14px; }
}
/* ===== GAME SIDEBAR ===== */

.game-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: #f1f3f6;
    font-size: 14px;
    box-shadow: 2px 0 15px rgba(0,0,0,0.06);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1001;
}

body.game-open .game-sidebar {
    transform: translateX(0);
}

.game-sidebar-inner {
    padding: 3px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* ===== BUTTON STYLE ===== */

.game-sidebar-inner a {
    background: linear-gradient(180deg, #ffffff, #f5f7fb);
    border: 1px solid #e2e6f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    height: 35px;
    padding: 7px 10px;
}

.game-sidebar-inner a:hover {
    background: #e5ebff;
}

.game-sidebar-inner a.active {
    background: #ffffff;
    border-left-color: #2563eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .game-sidebar {
        width: 85%;
        max-width: 300px;
    }
}
/* ===== Payout page ===== */
/* ===== Payout (same as invest, NO icons) ===== */

.payout-info{
    margin: 10px 0 25px;
    font-size: 15px;
    color: #6b7280;
}

.payout-list{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.payout-card{
    flex: 0 0 340px;
    background: #ffffff;
    border-radius: 14px;
    padding: 24px 26px;
    text-decoration: none;
    color: #111827;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.payout-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

.payout-title{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.payout-desc{
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

/* Mobile */
@media (max-width: 700px){
    .payout-card{
        flex: 1 1 100%;
    }
}
/* ===== Payout AZVOX page ===== */

.payout-info{
    margin: 15px 0 25px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.alert-block{
    padding: 14px 16px;
    background: linear-gradient(45deg, #fef3c7, #fde68a);
    border-radius: 10px;
    font-size: 15px;
    color: #92400e;
}

.alert-block a{
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
}

.payout-form{
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.payout-form label{
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #374151;
    font-weight: 600;
}

.payout-form input{
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 15px;
}

.payout-form input:disabled{
    background: #f3f4f6;
    color: #6b7280;
}

.payout-hint{
    margin: -6px 0 14px;
    font-size: 14px;
    color: #065f46;
}

.payout-warning{
    margin-top: 15px;
    padding: 12px 14px;
    background: linear-gradient(45deg, #fee2e2, #fecaca);
    border-radius: 10px;
    font-size: 14px;
    color: #7f1d1d;
}

.payout-subtitle{
    margin: 30px 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.payout-history{
    padding: 15px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    font-size: 14px;
    color: #374151;
}

/* Mobile */
@media (max-width: 700px){
    .payout-form{
        padding: 16px;
    }
}
.payout-table{
    width:100%;
    border-collapse:collapse;
}
.payout-table th,
.payout-table td{
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    text-align:left;
    font-size:14px;
}
.st-wait{ color:#d97706; font-weight:600; }
.st-ok{ color:#059669; font-weight:600; }
.st-cancel{ color:#dc2626; font-weight:600; }

.btn-cancel{
    padding:6px 10px;
    border-radius:6px;
    border:none;
    background:#fee2e2;
    color:#991b1b;
    cursor:pointer;
}
.btn-cancel:hover{
    background:#fecaca;
}


.history-filter select,
.history-filter input{
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #ddd;
}

.history-table-wrap{
    overflow-x:auto;
}

.history-table{
    width:100%;
    
    margin:0 auto 20px;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.history-table th{
    background:#f6f3ee;
    padding:12px;
    text-align:left;
}

.history-table td{
    padding:10px 12px;
    border-bottom:1px solid #eee;
}

.history-table tr:hover{
    background:#fafafa;
}

.btn-primary,
.btn-secondary{
    display:block;
    margin:10px auto;
    padding:10px 24px;
    border-radius:10px;
    border:none;
    cursor:pointer;
}

.btn-primary{background:#4caf50;color:#fff;}
.btn-secondary{background:#ddd;}

.metr-ya{
   opacity: 1;
    position: relative;
    top: -8px;
}
.metr-ya:hover{
    opacity: 1;
}
/* ===== Реинвест ===== */

.reinvest-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.reinvest-desc {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

.reinvest-box {
    
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Балансы */
.reinvest-balances {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.reinvest-balance {
    flex: 1;
    background: #f7f8fa;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.reinvest-balance span {
    display: block;
    font-size: 13px;
    color: #777;
    margin-bottom: 4px;
}

.reinvest-balance b {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.reinvest-arrow {
    font-size: 22px;
    opacity: 0.6;
}

/* Форма */
.reinvest-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.reinvest-form input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    margin-bottom: 12px;
}

.reinvest-form input:focus {
    outline: none;
    border-color: #4CAF50;
}

/* Инфо */
.reinvest-info {
    background: #f1f8f4;
    border-left: 4px solid #4CAF50;
    padding: 10px 12px;
    font-size: 14px;
    color: #2e7d32;
    border-radius: 6px;
    margin-bottom: 14px;
}

/* Кнопка */
#reinvestBtn {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    border-radius: 12px;
}

/* Результат */
#reinvestResult {
    margin-top: 14px;
    font-size: 14px;
    text-align: center;
}

/* Мобилка */
@media (max-width: 480px) {
    .reinvest-balances {
        flex-direction: column;
    }

    .reinvest-arrow {
        transform: rotate(90deg);
    }
}
.crypto-deposit-box {

    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.crypto-title {
    margin: 0 0 12px;
    font-size: 22px;
    text-align: center;
}

.crypto-desc {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

.crypto-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crypto-label {
    font-size: 14px;
    color: #333;
}

.crypto-input {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.crypto-calc {
    background: #f7f8fa;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
}

.crypto-note {
    font-size: 12px;
    color: #777;
    margin-top: 6px;
}

.crypto-btn {
    margin-top: 10px;
    padding: 14px;
    font-size: 16px;
    border-radius: 12px;
    border: none;
    background: #28a745;
    color: #fff;
    cursor: pointer;
}

.crypto-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.crypto-pay-box {
    margin-top: 20px;
    padding: 16px;
    background: #f4fff6;
    border-radius: 14px;
    border: 1px solid #cfead6;
}

.crypto-line {
    font-size: 14px;
    margin-bottom: 6px;
}

.crypto-address {
    font-family: monospace;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    word-break: break-all;
    font-size: 16px;
}
.crypto-timer {
    margin-top: 15px;
    font-size: 25px;
    color: #ff3939;
    font-family: monospace;
}
.crypto-amount {
    font-weight: 700;
    color: #0a8f3c;
}

.crypto-warning {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 10px;
    font-size: 13px;
    color: #856404;
    line-height: 1.4;
}
/* ===== Recovery Page ===== */

.recovery-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 25px;
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.recovery-card .form-group {
    margin-bottom: 18px;
}

.recovery-card label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #bbb;
}

.recovery-card .input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d6d6d6;
    background: #ffffff;
    color: #555555;
    font-size: 15px;
    transition: 0.2s;
}
.recovery-card .input:focus {
    border-color: #d6d6d6;
    outline: none;
    background: #f7f7f7;
}

.recovery-card .btn-primary.full {
    width: 100%;
    margin-top: 10px;
}

.recovery-links {
    margin-top: 18px;
    text-align: center;
}

.recovery-links a {
    color: #6ec1ff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.recovery-links a:hover {
    text-decoration: underline;
}

/* ===== Mobile ===== */

@media (max-width: 600px) {

    .recovery-card {
        padding: 18px;
        border-radius: 14px;
    }

}
/* затемнение */
.level-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.75);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

/* коробка */
.level-box{
    background:linear-gradient(180deg,#ffffff,#f7f7f7);
    padding:40px 30px;
    border-radius:20px;
    width:420px;
    max-width:90%;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,0.35);
    animation:levelPop 0.35s ease;
}

/* иконка */
.level-icon{
    font-size:60px;
    margin-bottom:10px;
}

/* заголовок */
.level-title{
    font-size:26px;
    font-weight:700;
    margin-bottom:10px;
}

/* текст */
.level-text{
    font-size:18px;
    margin-bottom:25px;
    color:#444;
}

/* номер уровня */
.level-number{
    font-size:32px;
    font-weight:800;
    color:#ff8a00;
}

/* кнопка */
.level-btn{
    background:linear-gradient(45deg,#ff8a00,#ffb347);
    border:none;
    padding:12px 30px;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    color:white;
    cursor:pointer;
    transition:0.2s;
}

.level-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(255,138,0,0.4);
}

/* анимация */
@keyframes levelPop{
    from{
        transform:scale(0.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}
.lang-switch{
    display:flex;
    gap:5px;
    margin-left:10px;
}

.lang-switch button{
    background:rgba(255,255,255,0.1);
    border:none;
    padding:5px 8px;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
}

.lang-switch button:hover{
    background:rgba(255,255,255,0.2);
}
/* ===== ОБЩИЙ БЛОК ===== */

.help-accordion{
    margin-top: 20px;
}

.help-item {
    background: #fafafa;
    border-radius: 16px;
    margin-bottom: 12px;
    border: 1px solid rgb(187 187 187);
    overflow: hidden;
    transition: 0.25s;
    backdrop-filter: blur(6px);
    padding: 0px 0px 10px 0px;
}

.help-item:hover {
    border-color: rgb(187 187 187);

}
/* ===== ЗАГОЛОВОК ===== */


.help-header:hover{
    background: rgba(255,255,255,0.05);
}

/* ===== СТРЕЛКА ===== */

.help-arrow{
    width: 9px;
    height: 9px;
    border-right: 2px solid #bbb;
    border-bottom: 2px solid #bbb;
    transform: rotate(45deg);
    transition: 0.3s;
}

.help-item.active .help-arrow{
    transform: rotate(-135deg);
}

/* ===== ТЕЛО ===== */

.help-body{
    overflow: hidden;
    padding: 0 20px;
    opacity: 0.85;
    line-height: 1.55;
    transition: max-height 0.35s ease, padding 0.25s ease;
}


.help-item.active .help-body{
    padding: 16px 20px 20px;
}

/* ===== ТЕКСТ ===== */

.help-body p{
    margin-bottom: 12px;
}

.help-body ul{
    padding-left: 20px;
    margin-bottom: 12px;
}

.help-body li{
    margin-bottom: 6px;
}

/* ===== КАРТОЧКИ (ЖИВОТНЫЕ / ФАБРИКИ) ===== */

.help-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 15px;
}

.help-card {
    background: rgb(248 248 248);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgb(222 222 222);
    transition: 0.25s;
    position: relative;
    overflow: hidden;
}

.help-card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* ===== КАРТИНКА ===== */

.help-card img{
    width: 72px;
    height: auto;
    margin-bottom: 10px;
    transition: 0.3s;
}

.help-card:hover img{
    transform: scale(1.05);
}

/* ===== ТЕКСТ КАРТОЧКИ ===== */

.help-card-title{
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 15px;
}

.help-card-text{
    font-size: 13.5px;
    opacity: 0.9;
    line-height: 1.4;
}

/* ===== АДАПТИВ ===== */

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

@media (max-width: 600px){

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

    .help-header{
        font-size: 15px;
        padding: 16px;
    }

    .help-body{
        font-size: 14px;
    }

}
#tutorial-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    z-index:9998;
    pointer-events:none;
}

#tutorial-box{
    max-width:320px;
    background:#1e1e1e;
    color:#fff;
    padding:15px;
    border-radius:12px;
    z-index:9999;
}

.tutorial-highlight{
    position:relative;
    z-index:10000;
    box-shadow:0 0 0 4px #4CAF50, 0 0 25px #4CAF50;
    border-radius:8px;
}
.help-item {
    background: #ffffff;
    border-radius: 7px;
    margin-bottom: 5px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: 0.3s;
    padding: 0 0 10px 0;
    backdrop-filter: grayscale(9);
}

.help-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.help-header {
    padding: 9px 20px 0px 20px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(90deg,#f8fbff,#ffffff);
}

.help-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: linear-gradient(180deg,#3ca6ff,#00d084);
}

.help-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* === PLAYER STATUS BAR === */

.player-status {
    background: #fff;
}

.player-status-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* TOP ROW */
.player-status-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
}

.ps-name {
    font-weight: 600;
}

.ps-level {
    color: #6b7280;
}

.ps-money {
    color: #16a34a;
    font-weight: 600;
}

.ps-energy {
    color: #f59e0b;
    font-weight: 600;
}

/* PROGRESS */
.player-status-bars {
    display: flex;
    gap: 12px;
}

.ps-bar {
    flex: 1;
}

.ps-bar-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
}

.ps-bar-bg {
    height: 6px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.ps-bar-fill {
    height: 100%;
}

.ps-exp {
    background: #22c55e;
}

.ps-energy-fill {
    background: #f59e0b;
}
.player-menu-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}
.player-status-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.player-menu-btn {
    margin-right: 6px;
}

/* MOBILE */
@media (max-width: 768px) {
    .player-status-top {
        gap: 10px;
        font-size: 13px;
    }
    .player-status-bars {
        flex-direction: column;
        gap: 8px;
    }
}
.player-status-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* было wrap */
}
.player-menu-btn {
    flex-shrink: 0;
}
@media (max-width: 768px){
    .player-status-top {
        gap: 8px;
    }
}
.player-sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}

.player-status-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* HEADER (КНОПКА + ИНФО) */
.player-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* КНОПКА МЕНЮ */
.player-menu-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 6px;
}

/* СТРОКА С ИНФО */
.player-status-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
}

.ps-name {
    font-weight: 600;
}

.ps-level {
    color: #6b7280;
}

.ps-money {
    color: #16a34a;
    font-weight: 600;
}

.ps-energy {
    color: #f59e0b;
    font-weight: 600;
}

/* ПРОГРЕСС */
.player-status-bars {
    display: flex;
    gap: 12px;
}

.ps-bar {
    flex: 1;
}

.ps-bar-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
}

.ps-bar-bg {
    height: 6px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.ps-bar-fill {
    height: 100%;
}

.ps-exp {
    background: #22c55e;
}

.ps-energy-fill {
    background: #f59e0b;
}

/* MOBILE */
@media (max-width: 768px) {
    .player-status-top {
        font-size: 13px;
        gap: 10px;
    }

    .player-status-bars {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 768px) {

    .player-status-top {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    /* Первая строка */
    .player-menu-btn,
    .ps-name,
    .ps-level {
        order: 1;
    }

    /* Вторая строка */
    .ps-money,
    .ps-energy {
        order: 2;
    }

    /* Принудительно переносим блок балансов на новую строку */
    .ps-money {
        flex-basis: 100%;
    }

    /* И делаем оба баланса в одну линию */
    .ps-money,
    .ps-energy {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
}

/* ============================= */
/* ЛИПКИЙ БЛОК ИГРОКА */
/* ============================= */

.player-status {
    position: sticky;
    top: 0px; /* высота header */
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1;
}

/* Небольшая тень при прилипании */
.player-status {
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
}
.news-badge {
    display: inline-block;
    min-width: 18px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #e53935;
    border-radius: 12px;
    text-align: center;
    margin-left: 6px;
    position: relative;
    animation: badgePulse 1.1s infinite;
}
/* мягкая пульсация */
@keyframes badgePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(229, 57, 53, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
    }
}
/* ===== КРАСИВЫЕ СДЕЛКИ БИРЖИ ===== */

.market-deals-wrap {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.market-deals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.market-deals-table thead {
    background: linear-gradient(90deg, #2e7d32, #43a047);
    color: #fff;
}

.market-deals-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}

.market-deals-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    
}

.market-deals-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.market-deals-table tbody tr:hover {
    background: #eef6ff;
    transition: 0.2s;
}

.deal-date {
    white-space: nowrap;
    color: #777;
    font-size: 12px;
}

.deal-user {
    font-weight: 600;
    color: #055ccf;
}

.deal-seller {
    font-weight: 600;
    color: #e36464;
}

.deal-sum {
    
    font-weight: 700;
    color: #1b5e20;
    white-space: nowrap;
}
.deal-system {
    font-weight: 700;
    color: #d4a017;
}
.close-m-d {
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    background: #ffffff;
    color: #eb0101;
    font-size: 21px;
    font-weight: 700;
}
.close-m-d:hover {
    background: #f1f1f1;
    color: #3f9943;
}
.market-btn {
    padding: 4px 20px;
    background: #22c55e;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    border: 2px solid #dcdcdc;
    box-shadow: 0px 0px 3px 0px #000;
}
.market-btn:hover {
    background: #008f33;
    /* box-shadow: none; */
}
/* ===== MOBILE FIX ДЛЯ СДЕЛОК ===== */
@media (max-width: 768px) {

  .market-deals-table thead {
    display: none;
  }

  .market-deals-table,
  .market-deals-table tbody,
  .market-deals-table tr,
  .market-deals-table td {
    display: block;
    width: 100%;
  }

  .market-deals-table tr {
    background: #f9f9f9;
    margin-bottom: 12px;
    border-radius: 10px;
    padding: 10px;
  }

  .market-deals-table td {
    border: none;
    padding: 4px 0;
  }

  .deal-date {
    font-size: 12px;
    color: #777;
  }

  .deal-sum {
    text-align: left !important;
    font-size: 15px;
    margin-top: 4px;
  }

}
#chat-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    background: #2bb3d6;
    color: #fff;
    padding: 15px 6px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    cursor: pointer;
    border-radius: 0px 8px 8px 0px;
    z-index: 9997;
}
#chat-panel {
    position: fixed;
    right: -350px;
    top: 0;
    width: 350px;
    height: 100%;
    background: #f5f7fa;
    box-shadow: -4px 0 10px rgba(0,0,0,0.2);
    transition: 0.3s;
    z-index: 9998;
    display: flex;
    flex-direction: column;
}

#chat-panel.active {
    right: 0;
}

.chat-header {
    background: #1b8f3a;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-size: 14px;
}

.chat-input {
    padding: 10px;
    background: #fff;
}

/* === CHAT INPUT === */

.chat-input {
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    gap: 8px;
}

#chat-text {
    flex: 1;
    resize: none;
    padding: 4px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}
#chat-text:focus {
    border-color: #1b8f3a;
    box-shadow: 0 0 0 2px rgba(27,143,58,0.15);
}

#chat-send {
    background: #1b8f3a;
    color: #fff;
    border: none;
    padding: 0px 15px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}
#chat-send:hover {
    background: #15702d;
}

#chat-send:active {
    transform: scale(0.97);
}
/* === CHAT MESSAGE ROW === */

.chat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 4px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.chat-left {
    flex: 1;
    margin-right: 8px;
    word-break: break-word;
}

.chat-time {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}
.chat-admin {
    color: #e53935;
}

.chat-user {
    color: #1b8f3a;
}
.chat-del{
    margin-left: 8px;
    cursor: pointer;
    color: #c62828;
    font-weight: bold;
    opacity: 0.7;
}
.chat-del:hover{ opacity: 1; }
.chat-ban{
    margin-left: 6px;
    cursor: pointer;
    color: #ff9800;
    font-weight: bold;
    opacity: 0.7;
}
.chat-ban:hover{ opacity: 1; }
.chat-reply{
    margin-left: 6px;
    cursor: pointer;
    color: #2196f3;
    font-weight: bold;
    opacity: 0.7;
}
.chat-reply:hover{ opacity: 1; }
.chat-input {
    padding: 10px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}

.chat-input-row {
    display: flex;
    gap: 8px;
}

#chat-text {
    flex: 1;
    resize: none;
    min-height: 45px;
}

#chat-reply-container {
    margin-bottom: 6px;
}
.chat-nick{
    cursor: pointer;
}

.chat-nick:hover{
    text-decoration: underline;
}
.sum-plus {
    color: #1e7e34;
    font-weight: 600;
}

.sum-minus {
    color: #c82333;
    font-weight: 600;
}
/* ================= HISTORY ================= */

.history-card{
    background:#fff;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    padding:20px;
}

.history-list{
    display:flex;
    flex-direction:column;
}

.history-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #eee;
}

.history-item:last-child{
    border-bottom:none;
}

.history-left{
    display:flex;
    flex-direction:column;
}

.history-comment{
    font-size:15px;
    color:#333;
}

.history-date{
    font-size:12px;
    color:#888;
    margin-top:3px;
}

.history-right{
    font-weight:600;
    font-size:14px;
}

.history-plus{
    color:#2e9d47;
}

.history-minus{
    color:#e54848;
}

/* кнопка */

.history-more-wrap{
    margin-top:15px;
    text-align:center;
}

.history-more-btn{
    background:#2f6fed;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.history-more-btn:hover{
    opacity:.9;
}

.history-loading{
    text-align:center;
    color:#777;
    padding:20px 0;
}
.history-empty{
    text-align:center;
    color:#888;
    padding:24px 0;
    font-size:14px;
}

.history-zero{
    color:#666;
}
.history-filter{
    margin-bottom:15px;
}

.history-select{
    padding:8px 10px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
}
.history-none{
    color:#aaa;
    font-weight:500;
}
.market-contracts-page{
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

/* header */

.market-contracts-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.market-contracts-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:4px;
}

.market-contracts-subtitle{
    font-size:13px;
    color:#777;
}

/* buttons */

.market-contracts-btn{
    border:0;
    border-radius:6px;
    padding:10px 16px;
    font-size:14px;
    cursor:pointer;
}

.market-contracts-btn--primary{
    background:#2b7cff;
    color:#fff;
}

.market-contracts-btn--success{
    background:#2bbf6a;
    color:#fff;
}

/* tabs */

.market-contracts-tabs{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.market-contracts-tab{
    padding:8px 14px;
    border-radius:6px;
    background:#f2f2f2;
    text-decoration:none;
    color:#333;
    font-size:14px;
}

.market-contracts-tab.is-active{
    background:#2b7cff;
    color:#fff;
}

/* filters */

.market-contracts-filters{
    display:flex;
    gap:20px;
    margin-bottom:25px;
    flex-wrap:wrap;
}

.market-contracts-filter{
    display:flex;
    flex-direction:column;
    font-size:13px;
}

.market-contracts-filter select,
.market-contracts-filter input{
    margin-top:4px;
    padding:7px 8px;
    border:1px solid #ddd;
    border-radius:5px;
}

/* cards */

.market-contracts-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:20px;
}

.market-contract-card{
    background:#fff;
    border:1px solid #e7e7e7;
    border-radius:8px;
    padding:16px;
}

/* card top */

.market-contract-card__top{
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
}

.market-contract-card__product{
    font-size:16px;
    font-weight:600;
}

.market-contract-card__time{
    font-size:12px;
    color:#777;
}

/* grid info */

.market-contract-card__grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:14px;
}

.market-contract-card__item{
    font-size:13px;
}

.market-contract-card__item .label{
    display:block;
    color:#777;
    font-size:11px;
}

/* progress */

.market-contract-card__progress{
    height:6px;
    background:#eee;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:14px;
}

.market-contract-card__progress-bar{
    height:100%;
    background:#2bbf6a;
}

/* actions */

.market-contract-card__actions{
    display:flex;
    gap:10px;
}

.market-contract-card__qty{
    width:100%;
    padding:8px;
    border:1px solid #ddd;
    border-radius:5px;
}
#crypto-badge {
    box-sizing: border-box;
    background-color: #fff;
    color: #22c55e;
    width: 110px;
    height: 30px;
    font-size: 13px;
    text-align: center;
    line-height: 30px;
    border: 2px solid #22c55e;
    opacity: 1;
    border-bottom: none;
    position: fixed;
    z-index: 998;
    right: -40px;
    top: 365px;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transform: rotate(270deg);
}
#crypto-badge:hover {
    background-color: #22c55e;
    color: #fff;
}
@keyframes borderGlow {
    0% {
        border-color: #22b36b;
        box-shadow: 0 0 0 rgba(34,179,107,0);
    }
    50% {
        border-color: #8b5cf6;
        box-shadow: 0 0 12px rgba(139,92,246,0.3);
    }
    100% {
        border-color: #22b36b;
        box-shadow: 0 0 0 rgba(34,179,107,0);
    }
}
#crypto-badge {
    animation: borderGlow 4s infinite ease-in-out;
}
#crypto-badge {
    color: #22b36b;
}
@keyframes cryptoFlow {
    0% {
        border-color: #34d399;
        color: #34d399;
    }
    50% {
        border-color: #a78bfa;
        color: #a78bfa;
    }
    100% {
        border-color: #34d399;
        color: #34d399;
    }
}
#crypto-badge {
    animation: cryptoFlow 4s infinite ease-in-out;
}
#crypto-badge {
    transition: background 0.2s ease;
}
.ogorod-page .field-tile.seed-1 .field-icon {
  background: url('/img/fruits/item37.png') center/contain no-repeat;
}

.ogorod-page .field-tile.seed-2 .field-icon {
  background: url('/img/fruits/item38.png') center/contain no-repeat;
}

.ogorod-page .field-tile.seed-3 .field-icon {
  background: url('/img/fruits/item39.png') center/contain no-repeat;
}

.ogorod-page .field-tile.seed-4 .field-icon {
  background: url('/img/fruits/item40.png') center/contain no-repeat;
}
.ogorod-page .field-icon {
  width: 42px;
  height: 42px;
}
.worker-block {
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.worker-feed-btn {
    margin-left: 1px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.worker-feed-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.worker-feed-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.worker-food-select {
    margin-left: 1px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
    position: relative;
}

.worker-food-select:hover {
    border-color: #4CAF50;
}

.worker-food-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
}
.worker-food-wrap {
    position: relative;
    display: inline-block;
}

.worker-food-wrap::after {
    content: '▼';
    font-size: 10px;
    color: #666;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    
    width: 20px;          /* ограничиваем зону */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.worker-food-wrap {
    position: relative;
    display: inline-block;
    width: auto;
    overflow: hidden;
    margin: -8px 1px;
}
.worker-food-select {
    display: inline-block; /* важно */
    width: auto;           /* чтобы не растягивался */
}
.worker-food-wrap::after {
    right: 8px;
}
.worker-food-select option:disabled {
    color: #999;
}
.worker-energy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}

.worker-bar {
    width: 80px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.worker-bar-fill {
    height: 100%;
    width: 0%;
    background: green;
    transition: all 0.3s ease;
}

.worker-energy-text {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}
@media (max-width: 600px) {

    #worker-fields {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* верх: текст + шкала */
    #worker-fields > .worker-energy {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 90%;
    }

    .worker-bar {
        flex: 1;
    }

    /* селект + кнопка */
    #worker-fields > .worker-food-wrap,
    #worker-fields > .worker-feed-btn {
        width: 90%;
    }

    .worker-food-select {
        width: 96%;
        margin-top: 12px;
    }

    .worker-feed-btn {
        width: 84%;
        margin-top: 10px;
    }
}
.worker-info {
    font-size: 14px;
    color: #666;
    background: #f5f7fa;
    padding: 6px 10px;
    border-radius: 8px;
    margin: 8px 0px;
}
.lang-switcher { display:flex; align-items:center; gap:4px; font-size:13px; }
.lang-switcher a { color:#666; text-decoration:none; }
.lang-switcher a.active { color:#2e7d32; font-weight:700; }